Vue 3.4 那些被埋在角落的宝藏 API

说实话，hen多同事在升级到 Vue 3.4 时只盯着新特性列表。

其实有几把钥匙一直被我们忽视，拿出来一用，项目质量立马飞起。

下面咱们随意聊聊，别太正经，随口说的，你懂的。

这个宏一出现，我就忍不住笑：哈哈，以前写 props + emit 那套流程，我dou快忘记长啥样了。

其实它背后干的活儿hen简单——把 modelValue prop 和 update:modelValue emit 合并成一个响应式引用。

不对不对，应该是：defineModel 直接给你一个可写的 .value。

用了以后你再也不用手动写 @update:modelValue 那套代码。

老早 Vue 就有 ，但每次改名dou要跑全局搜索，容易出错。

useTemplateRef 把模板里的 DOM 引用变成了真正的类型安全变量。

而且Ru果模板里有多个同名 ref，它会自动收集成数组，这点在 Accordion 场景下超赞。

Pina 内部早就用了它，你可Neng还在每个组件里写 @onUnmounted => clearInterval)

核心思想：

把所有定时器、watcher、eventListener “装进”一个作用域，卸载时一次性全部 stop。

- 不对不对，是一次性全部清理，不是只停掉定时器。

场景：

A 页面需要实时 WebSocket 推送；B 表单要双向绑定；C 还有滚动容器需要直接操作 DOM。

import { ref, effectScope, onUnmounted } from 'vue'
export function useWebSocket {
  const scope = effectScope
  const data = ref
  const status = ref
  let ws = null
  scope.run => {
    ws = new WebSocket
    ws.onopen =  => status.value = 'connected'
    ws.onmessage = e => data.value = JSON.parse
    ws.onclose =  => status.value = 'disconnected'
  })
  const dispose =  => {
    ws?.close
    scope.stop
  }
  onUnmounted
  return { data, status, dispose }
}

Q:  "为什么我的博客页面在百度搜索里根本找不到？"

A:  "这往往是因为页面缺少关键的 meta 信息、robots.txt 禁止爬取，或者服务器返回了错误的 HTTP 状态码。检查一下 ``、`` 是否合理，并确保没有 `noindex` 指令。还有，一定要让服务器返回 `200 OK` 而不是 `302/301` 循环跳转。"