这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法,通过多种情况实例代码相结合给大家详细讲解,需要的朋友可以参考下
Vue3中watch的详解
Vue2使用watch
总合:{{ sum }}
Vue3使用watch
watch有三个参数:
参数1:监听的参数
参数2:监听的回调函数
参数3:监听的配置(immediate)
情况1
监视ref所定义的一个响应式数据
总合:{{ sum }}
// 监视ref所定义的一个响应式数据
情况2
监视ref所定义的多个响应式数据
总合:{{ sum }}msg:{{ msg }}
情况3
监视reactive所定义的一个响应式数据
注意:
- 这里无法正确获取oldValue
- 强制开启了深度监听(deep配置不生效)
情况3::监视reactive所定义的一个响应式数据
姓名:{{person.name}}年龄:{{person.age}}
情况4
监视reactive所定义的一个响应式数据中的某个属性
情况4::监视reactive所定义的一个响应式数据中的某个属性
姓名:{{person.name}}年龄:{{person.age}}
情况5
监视reactive所定义的一个响应式数据中的某些属性
情况4::监视reactive所定义的一个响应式数据中的某个属性
姓名:{{person.name}}年龄:{{person.age}}
特殊情况
watch监听reactive中对象的嵌套对象
姓名:{{person.name}}年龄:{{person.age}}薪资:{{person.job.joblist.money}} K
到此这篇关于Vue3中watch的详解的文章就介绍到这了,更多相关Vue3 watch内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!
以上就是Vue3中watch的使用详解的详细内容,更多请关注0133技术站其它相关文章!