14.vue.js的watch（）的注意事项（1）
一、
Q ：因为 state 有内部的属性 也就是id。 因为要追逐id。所以要写函数？而不能直接监听state。 只监听state ，监听不到id的变化吗？
A：
为什么监听 state 不等于监听 state.id？
在 Vue 3 中，如果你这样写：
watch(state, () => {
console.log(‘state changed’);
})
这 只能监听整个 state 对象的引用是否变化，而不是它内部某个属性的变化。
🛑 举个例子：
const state = reactive({
id: 1,
name: ‘Tom’
});
watch(state, () => {
console.log(‘state changed’);
});
现在你执行：
state.id = 2;
❗这个时候，watch 是不会触发的！
因为 state 本身（这个对象的引用）没变，只是它里面的属性变了。Vue 没法“自动猜测”你想追踪哪些属性。
✅ 正确写法：想监听 id，就得显式写 () => state.id
watch(() => state.id, (newVal, oldVal) => {
console.log(‘id changed from’, oldVal, ‘to’, newVal);
});
这样 Vue 就知道：“哦！你只关心 state.id 的变化。”
✅ 如果你真的想监听整个对象的所有属性怎么办？
可以用 deep: true 选项：
watch(state, (newVal, oldVal) => {
console.log(‘state deep changed’);
}, { deep: true });
但注意这性能开销比较大，而且也不够精确，不推荐只为了监听某个属性而这样写。
✅ 总结一下
二、
Q：好像还有个shallowReactive什么的。可以用来做浅层和深层监听
A：Vue 3 中确实有一套跟 “深层 / 浅层” 有关的工具，它们用来控制 响应式系统的行为，而不是直接控制 watch 的深度监听。
我们来拆解清楚这几个概念 👇
🧱 1. deep 是 watch 的选项
当你用 watch() 监听一个对象时，Vue 默认只监听它的“引用变化”，不会深层追踪子属性的变化。
✅ 用法：
watch(state, (newVal, oldVal) => {
console.log(‘deep change’);
}, { deep: true })
这个 { deep: true } 表示：Vue 会递归追踪 state 内部所有的属性变化。
🧪 举个例子：
const state = reactive({
user: {
name: ‘Tom’,
age: 20
}
});
watch(state, () => {
console.log(‘state changed’);
}, { deep: true });
这时你做：
state.user.name = ‘Jerry’;
✅ 这会触发监听，因为你用了 deep: true。
🧊 2. shallowReactive 和 shallowRef
这是你刚刚提到的 shallow，它是另一个话题：
✅ 作用：只让对象最外层变成响应式，里面嵌套的对象不会响应式化！
🔹shallowReactive 用法：
import { shallowReactive } from ‘vue’;
const state = shallowReactive({
user: {
name: ‘Tom’
}
});
这时，如果你改 state.user.name，Vue 不会追踪到变化！
🔹对比 reactive：
const state = reactive({
user: {
name: ‘Tom’
}
});
这里 state.user.name 的变化会被 Vue 自动追踪。
🧠 总结一下区别：
用法 深度追踪 用途
reactive() ✅ 会递归处理内部对象 通常默认使用
shallowReactive() ❌ 只处理第一层，内部对象不是响应式 性能优化，避免不必要追踪
watch(obj, fn, { deep: true }) ✅ 深层监听 用于监听嵌套对象属性变化
watch(obj, fn) ❌ 默认只监听对象引用变化 如果改属性值，不触发
🎯 你什么时候会用 shallowReactive？
• 当你知道你不需要监听内部属性，比如只监听 API 结果是否更新，不关心结果结构。
• 或者你手动控制响应式，不希望 Vue 自动追踪太多东西（性能优化场景）。
三、
Q：
x和y 都是ref（0）执行watch（x，（）=>y.value],([newX,newY])=>{ })这什么意思？ x和y的监听有什么区别
A：
确实，从“效果”上来说，监听 x 和监听 () => y.value，在你这个例子中表现是一样的。但是写法不一样，是因为 Vue 对 ref 和函数这两种写法的处理方式不同。
我们来彻底搞清楚：
✅ 结论先说：
虽然监听效果一样，但写法上的不同是因为 Vue 对不同“源”的处理机制不一样：
写法 意义 Vue 的处理方式
x 是 ref 对象 Vue 自动监听 x.value 的变化
() => y.value 是一个 getter 函数 Vue 追踪这个函数里访问的响应式依赖（即 y.value）
🧪 来看一组对比例子
const x = ref(1);
const y = ref(2);
watch([x, () => y.value], ([newX, newY]) => {
console.log(newX, newY);
});
你也可以这样写：
watch([() => x.value, () => y.value], ([newX, newY]) => {
console.log(newX, newY);
});
或者：
watch([x, y], ([newX, newY]) => {
console.log(newX, newY);
});
✔️ 这些写法最终都能监听 x.value 和 y.value 的变化。
❓那为什么还要写 () => y.value 呢？
这其实是 灵活性 + 一致性 的需要，以下场景中就必须使用 getter（函数）：
✅ 1. 监听多个响应式值组合而成的结果
watch(() => x.value + y.value, (sum) => {
console.log(‘sum changed to’, sum);
});
Vue 会追踪 x.value 和 y.value，因为这两个都在函数体中。
✅ 2. 监听嵌套属性（不是 ref）
const state = reactive({ a: { b: 1 } });
watch(() => state.a.b, (newVal) => {
console.log(‘b changed:’, newVal);
});
✅ 3. 统一写法增强可读性
有时你团队约定都用 getter 函数，这样避免有人忘了 .value 或混用 ref/reactive。
💡最佳实践建议
情况 推荐写法
监听 ref 值（简单场景） 直接写 x
监听多个响应式值组合 () => x.value + y.value
监听深层属性 / reactive 属性 () => obj.nested.prop
想统一写法、避免歧义 全部写成 () => xxx.value
✅ 最后总结一句话：
写成 x 是 Vue 对 ref 的“糖”，写成 () => y.value 是通用的 getter。虽然它们监听效果一样，但表达方式和使用场景略有不同。
四、watch是有返回值的？
是的，watch 在 Vue 3 中 是有返回值的！
watch 返回一个 停止监听的函数，也叫做 stop handle。
你可以在不需要监听的时候，调用它来 手动停止这个 watch。
🧪 举个例子：
import { ref, watch } from ‘vue’;
const count = ref(0);
const stop = watch(count, (newVal) => {
console.log(‘count changed to’, newVal);
});
// 5秒后停止监听
setTimeout(() => {
stop(); // 👈 调用这个函数，watch 不再触发
console.log(‘Stopped watching count’);
}, 5000);
✅ 常见用途：
1. 组件销毁前手动清理监听
（不过通常不需要，因为 Vue 会自动清理）
2. 只监听一次某个变化后就停止
const stop = watch(count, (val) => {
if (val > 10) {
console.log(‘Too big!’);
stop(); // 👈 只监听一次满足条件后停止
}
});
🧠 总结：
特性 说明
返回值 是一个函数（stop handle）
作用 调用后立即停止当前的监听器
适用场景 想主动控制监听生命周期（如监听一次或临时监听）
五、回顾一下箭头函数
