Vue3 监视属性详解

引言

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

一、什么是监视属性?

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

二、使用 watch 函数

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

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 不需要明确指定要监视的数据源,它会自动追踪在回调函数中用到的响应式数据。

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 的值发生变化时,回调函数会被调用,并打印出它们的当前值。

四、监视属性的高级用法

  1. 深度监视:默认情况下,watch 只监视顶层属性的变化。如果需要监视嵌套对象或数组的变化,可以使用深度监视。通过传递一个选项对象作为 watch 的第三个参数,并设置 deep 属性为 true,可以实现深度监视。
watch(someObject, (newValue, oldValue) => {  
  // 处理变化  
}, { deep: true });
  1. 立即执行:默认情况下,watch 和 watchEffect 的回调函数在初始化时不会立即执行。如果需要立即执行回调函数,可以传递一个选项对象作为第三个参数,并设置 immediate 属性为 true
watch(someData, (newValue, oldValue) => {  
  // 立即执行回调  
}, { immediate: true });
  1. 停止监视:使用 watch 函数时,返回的是一个停止函数,可以用于停止监视。当不再需要监视某个数据源时,可以调用这个停止函数来停止监视。
const stopWatch = watch(someData, (newValue, oldValue) => {  
  // 处理变化  
});  
  
// 停止监视  
stopWatch();

五、实战应用

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

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 还提供了深度监视、立即执行和停止监视等高级用法,以满足更复杂的需求。

原文链接:https://juejin.cn/post/7334644227375235081 作者:戛然而止ro

(0)
上一篇 2024年2月15日 上午11:02
下一篇 2024年2月15日 上午11:12

相关推荐

发表回复

登录后才能评论