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 ~
再见！
