在vue3中,watch和watchEffect都可以监听data属性的变化

一：watch

主要是需要明确监听那个属性的变化以及回调，是一种惰性执行，初始化不会执行

主要是监听ref、reactive、计算属性、getter 函数

响应式数据会隐式添加一个深度监听器，而getter 函数方式则属性值变化不会触发

A：属性值：watch( source, cb, [options] )

1：source：表达式或者函数，指定监听的依赖对象

2：cb：变化后执行的回调函数

3：options：有 immediate（立即触发回调函数）、deep（深度监听）

B：用法

1：监听单个值

const number = reactive({ count: 0 });
const countAdd = () => {
  number.count++;
};
//单个
watch(number, (newValue, oldValue) => {
  console.log("新的值:", newValue);
  console.log("旧的值:", oldValue);
});

2：监听多个值

//多个getter 函数方式
watch(
            [() => state.count, () => state.name], 
            ([newCount, newName], [oldvCount, oldvName]) => {
              console.log(oldvCount) // 旧的 count 值
              console.log(newCount) // 新的 count 值
              console.log(oldName) // 旧的 name 值
              console.log(newvName) // 新的 name 值
            }
          )

        

3：监听计算属性

const newMessage = computed(() => {
  return message.value;
});
watch(newMessage, (newValue, oldValue) => {
  console.log("新的值:", newValue);
  console.log("旧的值:", oldValue);
});

4：操作DOM，回调函数里面获取更新的数据

watch(source, callback, {
  flush: 'post'
})

二：watchEffect

会根据其中的属性，自动监听（隐式监听）其中的变化，初始化时会立即执行一次

 watchEffect(() => {
				  console.log('state.name', state.name)
			  })

操作DOM，回调函数里面获取更新的数据

方式一：添加flush

watchEffect(callback, {
  flush: 'post'
})

方式二：watchPostEffect后置刷新

watchPostEffect(()=>{/* 在 Vue 更新后执行 */})

特殊情况：

侦听器没随着组件销毁，需要进行手动销毁

const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()