在Vue3后台管理系统中使用watch和watcheffect

1、watch

在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。

const message = ref("test");
watch(message, (newValue, oldValue) => {
  console.log("新值:", newValue);
  console.log("旧值:", oldValue);
});

上段代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch 监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数，并且回调函数默认接收两个参数：新值和旧值。

2、watcheffect

watchEffect 也是一个监听器，只不过它不会像 watch 那样接收一个明确的数据源，它只接收一个回调函数。而在这个回调函数当中，它会自动监听响应数据，当回调函数里面的响应数据发生变化，回调函数就会立即执行。

const number = reactive({ count: 0 });
const countAdd = () => {
  number.count++;
};
watchEffect(()=>{
  console.log("新值:", number.count);
})

上段代码中，当我们第一次进入页面时，number 响应数据从无到有，这个时候就会触发 watchEffect 的回调函数，因为在 watchEffect 回调函数中使用了 number 响应数据，所以它会自动跟踪 number 数据的变化。当我们点击按钮更改 count 的值时，watchEffect 中的回调函数便会再次执行。

3、watch 和 watcheffect 的区别

• watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。
• watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。
• watch 在响应数据初始化时是不会执行回调函数的，watchEffect 在响应数据初始化时就会立即执行回调函数。

感兴趣的小伙伴，可以查看项目演示：https://demo.eleadmin.cn/login