Vue3 监视属性详解

引言

在 Vue3 中，监视属性（Watchers）是一个非常重要的功能，它允许我们观察和响应 Vue 实例上的数据变化。Vue3 在监视属性的实现上做了一些改进和优化，提供了更加灵活和强大的功能。本文将详细解析 Vue3 中的监视属性，并通过实战应用来展示其用法。

一、什么是监视属性？

监视属性是 Vue 提供的一种机制，用于观察和响应 Vue 实例上的数据变化。当被监视的数据发生变化时，我们可以执行一些特定的操作或逻辑。Vue3 中的监视属性通过 watch 和 watchEffect 函数来实现。

二、使用 watch 函数

watch 函数用于监视指定的数据源，并在数据源发生变化时执行回调函数。它可以接受两个参数：要监视的数据源和回调函数。

js 复制代码

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    // 定义响应式数据  
    const count = ref(0);  
  
    // 使用 watch 监视 count 的变化  
    watch(count, (newValue, oldValue) => {  
      console.log(`Count changed from ${oldValue} to ${newValue}`);  
    });  
  
    // 返回数据和方法  
    return {  
      count  
    };  
  }  
};

在上面的例子中，我们定义了一个响应式数据 count，并使用 watch 函数来监视它的变化。当 count 的值发生变化时，回调函数会被调用，并打印出旧值和新值。

三、使用 watchEffect 函数

watchEffect 函数是 Vue3 中引入的一个新特性，它会自动收集依赖并执行回调函数。与 watch 不同的是，watchEffect 不需要明确指定要监视的数据源，它会自动追踪在回调函数中用到的响应式数据。

js 复制代码

import { ref, watchEffect } from 'vue';  
  
export default {  
  setup() {  
    // 定义响应式数据  
    const count = ref(0);  
    const doubleCount = computed(() => count.value * 2);  
  
    // 使用 watchEffect 监视依赖的变化  
    watchEffect(() => {  
      console.log(`Count is ${count.value}, doubleCount is ${doubleCount.value}`);  
    });  
  
    // 返回数据和方法  
    return {  
      count,  
      doubleCount  
    };  
  }  
};

在上面的例子中，我们定义了两个响应式数据 count 和 doubleCount，并使用 watchEffect 函数来监视它们的变化。当 count 或 doubleCount 的值发生变化时，回调函数会被调用，并打印出它们的当前值。

四、监视属性的高级用法

深度监视 ：默认情况下，watch 只监视顶层属性的变化。如果需要监视嵌套对象或数组的变化，可以使用深度监视。通过传递一个选项对象作为 watch 的第三个参数，并设置 deep 属性为 true，可以实现深度监视。

js 复制代码

watch(someObject, (newValue, oldValue) => {  
  // 处理变化  
}, { deep: true });

立即执行 ：默认情况下，watch 和 watchEffect 的回调函数在初始化时不会立即执行。如果需要立即执行回调函数，可以传递一个选项对象作为第三个参数，并设置 immediate 属性为 true。

js 复制代码

watch(someData, (newValue, oldValue) => {  
  // 立即执行回调  
}, { immediate: true });

停止监视 ：使用 watch 函数时，返回的是一个停止函数，可以用于停止监视。当不再需要监视某个数据源时，可以调用这个停止函数来停止监视。

js 复制代码

const stopWatch = watch(someData, (newValue, oldValue) => {  
  // 处理变化  
});  
  
// 停止监视  
stopWatch();

五、实战应用

假设我们有一个搜索框组件，需要根据用户输入的关键字过滤出一个列表。我们可以使用 watchEffect 来监视关键字的变化，并实时更新过滤后的列表。

js 复制代码

import { ref, watchEffect, computed } from 'vue';  
  
export default {  
  setup() {  
    // 定义响应式数据  
    const searchKeyword = ref('');  
    const items = ref(['Apple', 'Banana', 'Cherry', 'Date']);  
  
    // 计算过滤后的列表  
    const filteredItems = computed(() => {  
      return items.value.filter(item => item.includes(searchKeyword.value));  
    });  
  
    // 使用 watchEffect 监视关键字的变化并打印
    watchEffect(() => {  
  console.log(`Filtered items: ${filteredItems.value.join(', ')}`);  
  // 在实际应用中，你可能会更新一个用于渲染的列表数据，而不是仅仅打印出来  
});  
  
// 返回数据和方法  
return {  
  searchKeyword,  
  filteredItems  
};

在上面的例子中，我们定义了一个搜索关键字 searchKeyword 和一个包含多个项目的数组 items。我们使用 computed 属性 filteredItems 来计算过滤后的列表，该列表仅包含包含搜索关键字的项目。然后，我们使用 watchEffect 来监视 searchKeyword 的变化，并在每次变化时打印出过滤后的列表。

在实际应用中，你可能会将过滤后的列表赋值给一个用于渲染的数据属性，而不是仅仅打印出来。这样，当搜索关键字变化时，列表会自动更新并反映在界面上。

六、总结

Vue3 的监视属性提供了强大的功能，允许我们观察和响应 Vue 实例上的数据变化。通过 watch 和 watchEffect 函数，我们可以轻松地监视单个数据源或自动收集依赖，并在数据变化时执行特定的操作或逻辑。此外，Vue3 还提供了深度监视、立即执行和停止监视等高级用法，以满足更复杂的需求。