vue3 新增的 Composition API中的 watchEffect 和 watch
都可在 setup() 函数中使用

watchEffect：
1.它是立即执行的，在页面加载时会主动执行一次，来收集依赖
2.不需要传递需要侦听的内容，它可以自动感知代码依赖，只需要传递一个回调函数
3.它不能获取之前数据的值
4.它的返回值用来停止此监听

例：

setup() {
  const { reactive, watchEffect } = vue;
  const data = reactive({ name:'lei' })

  const stop = watchEffect( () => {  // 返回值 stop 用来停止监听
    console.log( data.name )  // 页面加载时执行一次之后，当 data.name 改变时，将会再次执行log

    setTimeout( () => {
      stop();  //5秒之后停止此监听
    }, 5000 )
  })
}

watch : （watch也可以在setup中使用）
1.具备一定的惰性 lazy （ 但可配置 immediate , 使其主动）
2.参数可拿到更改之前的值和更改之后的值
3.可以侦听多个数据的变化，用一个侦听器承载

例：

const { reactive, watch, ref } = vue;
const name = ref('yang')
// ref包装过的可直接通过watch的第一个参数传入
watch( name, (newValue,oldValue) => { //  第一个参数 需要监听的数据
  console.log(newValue)  // 新值
  console.log(newValue)  // 旧值
}，{ immediate: true }) //  第三个参数可接受配置项

const data = reactive({ name:'lei', age:18 })
// 但是 reactive 包装过的值不可以直接传入，可使用箭头函数 return 出需要监听的数据
watch( () => data.name, (newValue,oldValue) => { //  第一个参数 需要监听的数据
  console.log(newValue)  // 新值
  console.log(newValue)  // 旧值
}，{ immediate: true }) //  第三个参数可接受配置项

上边说到可以侦听多个数据的变化，用一个侦听器承载，接着看

例：

const data = reactive({ name:'lei', age:18 })
// 可用数组接收参数
watch( [() => data.name, () => data.age], ([newName, newAge], [oldName, oldAge]) => { 
  console.log(newName, newAge)  // 新值
  console.log(oldName, oldAge)  // 旧值
}) 

具体需要用 watch 还是 watchEffect 就看业务需求啦
下一篇看看 computed ~
再见！