自适应网站模版,哈尔滨精品建站,如何编辑公众号,wordpress主题转discuz一、 Q #xff1a;因为 state 有内部的属性 也就是id。 因为要追逐id。所以要写函数#xff1f;而不能直接监听state。 只监听state #xff0c;监听不到id的变化吗#xff1f;
A#xff1a;
为什么监听 state 不等于监听 state.id#xff1f;
在 Vue 3 中#xff0…一、 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什么的。可以用来做浅层和深层监听
AVue 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.nameVue 不会追踪到变化
对比 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 都是ref0执行watchxy.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 作用 调用后立即停止当前的监听器 适用场景 想主动控制监听生命周期如监听一次或临时监听
五、回顾一下箭头函数
