第三十九篇:Vue3 watch(ref和reactive的监视)

2021-11-03 01:03:20 阅读：231 来源： 互联网

标签：Vue3 sum 第三十九 watch reactive oldvalue 监视 newValue

好家伙,

1.vue2中的watch是调用配置项,(只能写一个)

vue3中的watch是一个函数(可以写很多个)

2.watch一些用法:

这里是定义的数据

set up(){
    let sum =ref(0)
    let msg = ref('你好啊')
    let person = reactive({
    name:'张三'
    job:{
         j1{
              salary:20
             }
          }
      })
}
return{
  ..........
}

用法一:监视ref所定义的一个响应式数据

watch(sum,(newValue,oldvalue)=>
{console.log('sum变了',newValue,oldvalue)},
{immediate:true})

用法二:监视ref所定义的多个对象

watch([sum,msg],(newValue,oldvalue)=>
{console.log('sum变了',newValue,oldvalue)},
{immediate:true})

用法三:监视reactive监视reative所定义的一个响应式数据的全部属性

注意:1.此处无法获得正确的oldValue,对象拿不到oldVuale

　　 2.默认开启深度监视?关不掉,强制开启了深度监视(deep配置无效)

watch(person,(newValue,oldvalue)=>
{console.log('sum变了',newValue,oldvalue)},
{deep:false})

用法四:监视reactive监视reative所定义的一个响应式数据的某个属性 (写成函数)

watch(()=>person.name,(newValue,oldvalue)=>
{console.log('sum变了',newValue,oldvalue)},)

用法五:监视reactive监视reative所定义的一个响应式数据的某些属性

watch([()=>person.name,()=>person.age],(newValue,oldvalue)=> 
{console.log('sum变了',newValue,oldvalue)})

特殊情况:

watch(()=>person.name,(newValue,oldvalue)=> 
{console.log('sum变了',newValue,oldvalue)}, 
 {deep:true})

此处监视得失reactive定义的对象中的某个属性的对象 .

这里是普通对象了,deep配置又能用了

3.小结:1.监视reactive定义的响应式数据时:oldValue无法正确获取,强制开启了胜读监视(deep配置失败)

　　 2.监视reactive定义的响应式数据中某个属性时:deep配置有效

标签：Vue3,sum,第三十九,watch,reactive,oldvalue,监视,newValue
来源： https://www.cnblogs.com/FatTiger4399/p/15501781.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第三十九篇:Vue3 watch(ref和reactive的监视)