vue3学习 watch、watchEffect的使用

使用方法

watch(person,(newValue,oldValue)=>{
// person为你要监听的数据
})

情况一、监视ref定义的一个响应式数据

// sum 为自己定义的一个ref响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log(newValue)
})

情况二、监听ref所定义的多个响应式数据

// sum,msg为自己用ref定义的数据
// 在监听的过程中，只要有一个值发生了改变，newValue中都会返回回来，是一个数组
watch([sum,msg],(newValue,oldValue)=>{
	console.log("我发现值变拉",newVal)
    console.log(oldVal)
})

情况三、监听reatcive所定义的一个响应式数据

// 监听reactive值的变化
    watch(obj,(newVal,oldVal)=>{
      console.log("我是reactive定义的数据的新值",newVal)
      console.log("我是reactive定义的数据的旧值",oldVal)
    })
    function changeDB(){
      obj.age = 22
    }

结果：此时无法正确获取 oldVal 值，oldVal 和 newVal 值相等

而且此时强制开启了深度监视，就算修改price里的内容也会监视到你数据的变化

情况四、监听reactive所定义的一个响应式数据中的某一个属性

function changeDB(){
      // obj.age = 22
      // obj.xz.price = '22k'
      obj.name='redred'
  }
    // 监视reactive定义数据的某一个属性
    watch(()=> obj.name,(newVal,oldVal)=>{
      console.log("有新名字拉~~",newVal)
      console.log("原来的名字哦~",oldVal)
    })

结果：通过这种方式监视reactive定义的数据所获取到的 oldVal 是正确的

注：特殊情况

// 当你reactive定义数据的某一个属性，该属性是字典时，你如果没有开启deep:true,watch无法监视到你数据的变化
function changeDB(){
      // obj.age = 22
      obj.xz.price = '22k'
      // obj.name='redred'
    }
    // 监视reactive定义数据的某一个属性
    watch(()=> obj.xz,(newVal,oldVal)=>{
      console.log("薪资变了~~",newVal)
      console.log("原来的薪资~",oldVal)
    },{deep:true})

watchEffect函数
这个函数和vue2中的computed有些类似，在回调函数中，用到谁就监听谁，但不需要return
使用：

watchEffect(()=>{
      console.log(name.value)
 })
 
 function change(){
      name.value = 'blue'
      // age.value=1
      // console.log(111)
    }

程序运行的时候会打印出name的值，且在我点击按钮的时候又会打印出新的name值