[JavaScript知识库]vue3.0 之watch监视目标ref和reactive的数据

一般ref用来配置基本数据类型，reactive用来配置引用数据类型

? ? ? ? 总结? ?

??????let?data?=??ref(5)

??????let?info?=?reactive({

????????name:'孙策',

????????age:17,

????????job:{

??????????old:'c',

??????????new:'z'

????????}

??????})

????????

? ? ? ? 1.当ref了一个基本数据类型的时候，watch()它的时候，不用写value

????????????????

??????watch(data,(olddata,newdata)?=>?{??这里的data就没有写value

??????? ?console.log(olddata,newdata)

???????},{

??????? immediate:true

???????})

? ? ? ? 2.监视多个数据类型的时候，[info,data] 来包起来

??????watch([data,info],(oldvalue,newvalue)?=>?{

????????console.log(oldvalue,newvalue)

??????},{

????????immediate:true

??????})

? ? ? ? 3.reactive的是引用类型? ? ?，而且这里强制开启了deep:true? 意思就是deep的配置是无效的

?????????watch(info,(oldvalue,newvalue) => {
? ? ? ? ?console.log(oldvalue,newvalue)
? ? ? ? },{immediate:true})

? ? ? ? ? ? ? ? info是一个对象，这里输出来的old和new是一样的

??????4.监视reactive中的某些属性的变化??要以函数返回值的情况来得到

??????watch([()=>info.name,()=>info.age],(o,n)=>{? 监视info对象里的name 和 age

????????console.log(o,n)

??????},{

????????immediate:true

??????}

??????5.在上一步的基础上，你要监视的对象的某个属性还是个对象的时候，就要开启deep:true，不然检测不到

??????watch(()=>info.job,(o,n)=>{

????????console.log(o,n)

??????},{

????????deep:true? ?这里要开启deep为true

??????})

???6.如果用ref定义了一个对象?就要开启深度检测???或者obj.value

??????let?obj?=?ref({

????????a:1,

????????b:2

??????})

??????watch(obj,(o,n)=>{? ? 或者这里写obj.value

????????console.log(o,n)

??????},{

????????deep:true? ? ? ?开启deep:true模式

??????})