Vue3中的watch、watchEffect

Vue3中的watch

• 监视 ref（）所定义的数据

  setup(){
      let sum = ref(0)
      watch(sum, (newValue, oldValue) => {  //不加 .value，watch 它里面需要的是一个结构，而不是一个具体的数值；没有 .value 的话，sum 就是 RefImple 的实例对象，对象可以
        console.log(newValue, oldValue);
      })
      return{
        sum
      }
    }
  

  // 多个
  setup(){
    let sum = ref(0)
    let msg = ref('你好啊')
    watch([sum,msg], (newValue, oldValue) => {
      console.log(newValue, oldValue);
    }, {immediate: true})
    return{
      sum,
      msg
    }
  }
  

• 监视 reactive（）所定义的数据，其中，newValue === oldValue；所以有问题，目前无法解决。并且 reactive（）定义的默认开启了深度监视，并且关闭不了。目前 Vue3.0 是这样，改不了了的，除非以后 3.1 或往上版本会解决

  setup(){
    let info = reactive({
      name: 'jack',
      age: 18
    })
    watch(info, (newValue, oldValue) => {
      console.log(newValue, oldValue);
      console.log(newValue === oldValue);  //true
    })
    return {
      info
    }
  }
  

• 监视 reactive（）里面的某个属性，参数要写成一个函数，此时 oldValue 没有问题

  setup(){
    let info = reactive({
      name: 'jack',
      age: 18
    })
    watch(() => info.age, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    })
    return {
      info
    }
  }
  

• 监视 reactive（）里面的某些属性，此时 oldValue 也没有问题

  setup(){
    let info = reactive({
      name: 'jack',
      age: 18
    })
    watch([() => info.age, () => info.name], (newValue, oldValue) => {
      console.log(newValue, oldValue);
    })
    return {
      info
    }
  }
  

• 监视 reactive（）的对象里面的对象的属性，要开深度监视，此时 oldValue 不好用

  setup(){
    let info = reactive({
      name: 'jack',
      age: 18,
      job: {
        j1: {
          salary: 200
        }
      }
    })
    watch(() => info.job, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    }, {deep: true})
    return {
      info
    }
  }
  

watchEffect

特点：

1. 默认开启 立刻监视
2. 用到了谁，就监视谁。变了，就会重新走一遍这个回调。（有点类似于计算属性，但又不是，因为计算属性注重的是返回值，而监视属性注重的是过程）

setup(){
  let info = reactive({
    name: 'jack',
    age: 18,
    job: {
      j1: {
        salary: 200
      }
    }
  })
  watchEffect(() => {
    let a = {
      name: info.name,
      age: info.age,
      job: info.job.j1.salary
    }
    console.log('watchEffect 指定的回调执行了');
  })
  return {
    info
  }
}