VUE3的watch监听的使用和最佳实践

2023-03-12 07:41:30

VUE3的watch监听：掌控数据的变化

在VUE3中，watch监听就像一个敏锐的侦探，它时刻监视着数据的变化，并在关键时刻采取行动。这是一种强大的工具，可以帮助你保持对应用程序状态的掌控，并对变化做出适当的反应。

单兵作战：监听单个ref

想像一下，你有一个名为count的ref，它负责跟踪一个数值的变化。为了时刻关注count的一举一动，你可以使用watch监听：

const count = ref(0);

watch(count, (newValue, oldValue) => {
  // 当count发生变化时，这个函数就会被触发
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

每次count的值改变时，控制台都会记录下它的变化。

团队作战：监听多个ref

如果你的应用程序中有多个ref需要关注，比如count和name，你可以让watch同时监听它们：

const count = ref(0);
const name = ref('John');

watch([count, name], (newValue, oldValue) => {
  // 当count或name发生变化时，这个函数就会被触发
  console.log(`count changed from ${oldValue[0]} to ${newValue[0]}`);
  console.log(`name changed from ${oldValue[1]} to ${newValue[1]}`);
});

这样一来，你就不会错过任何一个ref的变化。

代理战场：监听proxy数据

代理（proxy）数据就像一个虚拟的数据宝库，它可以让你以响应式的方式访问和操作对象和数组。要监听proxy数据，只需将proxy对象本身传递给watch：

const data = reactive({
  count: 0,
  name: 'John'
});

watch(data, (newValue, oldValue) => {
  // 当data的任何属性发生变化时，这个函数都会被触发
  console.log(`data changed from ${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`);
});

现在，proxy数据的任何改动都会引起watch的注意。

精确狙击：监听proxy数据的特定属性

有时，你可能只想关注proxy数据中的特定属性，比如count：

watch('data.count', (newValue, oldValue) => {
  // 当data.count发生变化时，这个函数就会被触发
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

watch会只关注count属性的变化。

群狙行动：监听proxy数据的多个属性

如果你需要同时监视多个proxy数据属性，比如count和name，可以使用数组：

watch(['data.count', 'data.name'], (newValue, oldValue) => {
  // 当data.count或data.name发生变化时，这个函数就会被触发
  console.log(`count changed from ${oldValue[0]} to ${newValue[0]}`);
  console.log(`name changed from ${oldValue[1]} to ${newValue[1]}`);
});