Vue3 修改 ref的值，不触发watchEffect的原因

const myRef = ref(name: ‘jinD’)

修改 myRef.value.xxx时，不触发watchEffect的原因在于，触发trigger传入的对象是否相同，在 watchEffect 里面访问 myRef.value 时，此时 track的target 是refCompImpl实例，也就是ref

但是修改值时，是通过 myRef.value.xxx = newValue, 不是给 myRef.value = {}设置新值，触发的trigger是在 proxy 的 getter里面(ref 都给传入的对象调用了reative, 也就是把传入的对象转为了proxy)，此时trigger的target = {name: ‘xxx’}, 和之前track的 target不一致，没有获取到对应的effect(一个effect就是一个依赖，这里可以理解为watchEffect传入的cb)，所以不会导致 watchEffect 传入的cb重新执行

代码解析:

import { defineComponent, computed, ref, watchEffect } from 'vue'const obj = {name: 'jinD',
}
export default defineComponent({name: 'app',setup() {const myRef = ref({ name: 'jinD' })watchEffect(() => {console.log('watchEffect 执行')console.log(myRef.value) // 这里收集的依赖时 target = refCompImpL})// debugger// myRef.value = { name: 'ding123' }  这样才会导致 watchEffect 重新执行myRef.value.name = 'ding1' // 修改的是 name的值，没有修改ref.value的值，不会触发ref的trigger，触发的trigger是在 myRef.value这个proxy上面的，修改 myRef.value.name 时，触发的trigger是在 proxy的setter里面的，此时触发trigger ，target = {name: 'jinD'}, 但是没有给{name: 'jinD'} 收集依赖，所以不会触发 watchEffect 的 cbreturn () => {return <p>123</p>}},
})

Vue3 修改 ref的值，不触发watchEffect的原因相关推荐

Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...
转载非原创：修改BB 的内容，回车后修改CC 的值
原文 http://blog.csdn.net/iamah/article/details/8438981 修改BB 的内容,回车后修改CC 的值步骤: 1. 注册类为对类CL_GUI_ALV_GR ...
为什么不使用volatile，其它线程也能得到当前线程修改后的值，不使用volatile也不存在可见性问题？原来解决可见性问题不一定需要volatile，println也可以
1. 为什么不使用volatile,其它线程也能得到变量修改后的值实验代码分析: ①初始变量a=true,b=false: ②一个线程判断a或者b是否被改为相应逻辑,如果是,那么输出信息. ③修改a ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...
Vue3的Ref提案到底发生肾摸事了
Vue3的Ref提案到底发生肾摸事了朋友们好,我是大圣,最近vue3的ref提案社区讨论的比较多,社区里我看了一下相关的rfc和知乎讨论,我发现很多年轻人不讲武德,今天也摸鱼写一点我的看法吧先说结 ...
[vue3.x]ref的使用
[vue3.x]ref的使用普通的应用 DOM 元素将在初始渲染后分配给 ref 因为 ref 本身是作为渲染函数的结果而创建的,在初始渲染时你不能访问它们--它们还不存在! 表单的主动提交场景描 ...
Jsp java subroutine_Perl错误：无法修改非左值子例程调用(Perl error: Can't modify non-lvalue subroutine call at)...
Perl错误:无法修改非左值子例程调用(Perl error: Can't modify non-lvalue subroutine call at) 我的班级出现以下错误:"无法在file ...
修改数组的值和多维数组排序
foreach($ret as $key => $value) { //将数组元素中为空地补0,且添加sum元素的计算,注意修改数组的值,需要$key定位到是数组的哪一个地方需要修改,而不能简单 ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...

Vue3 修改 ref的值，不触发watchEffect的原因

Vue3 修改 ref的值，不触发watchEffect的原因相关推荐

最新文章

热门文章