Vue 3：什么时候用 ref，什么时候用 reactive

reactive 和 ref 都是把一块数据变成响应式的。选择不取决于喜好，取决于数据是不是对象。

reactive 只能包对象。数字、字符串这种简单类型要用 ref。ref 的读写都经过 .value，它内部还是靠 reactive 做依赖收集。模板里会自动解包，脚本里不会。两边写法不一致时，先看这行代码在不在模板里。

watch 的第一个参数如果已经是 ref，不必再加 .value。需要监听对象深处某一个字段、又不想对整棵对象开 deep 时，第一个参数写成函数，返回那个字段：

watch(
  () => state.user.profile.name,
  () => {
    // 只有这个字段变了才进来
  },
)

这样依赖的是函数的返回值。对象上其他字段变化不会触发回调。

父组件传下来的数据用 defineProps 接收，子组件通知父组件用 defineEmits。不要让子组件改 props。模板上的 ref 要等组件挂载之后才有值。如果它指向子组件，子组件必须用 defineExpose 交出内部属性和方法，父组件才能读到。默认是封闭的。