Vue3 监听属性与 Computed 的区别详解

一、引言

在 Vue 3 中，watch 和 computed 都是非常重要的概念，它们都可以用于观察和响应数据的变化，但在使用场景和原理上存在明显的区别。本文将详细解析 Vue 3 中监听属性 (watch) 和计算属性 (computed) 的区别，帮助你更好地理解它们的用法。

二、监听属性 (watch)

watch 是 Vue 3 中用于观察和响应数据变化的机制之一。你可以使用 watch 来监听单个数据源的变化，并在数据变化时执行相应的回调函数。

1. 基本用法

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    watch(count, (newValue, oldValue) => {  
      console.log(`Count changed from ${oldValue} to ${newValue}`);  
    });  
  
    return {  
      count  
    };  
  }  
};

2. 监听多个属性

import { reactive, watch } from 'vue';  
  
export default {  
  setup() {  
    const state = reactive({  
      count: 23,  
      name: 'Jiaranerzhi'  
    });  
  
    watch(  
      () => [state.count, state.name],  
      ([newCount, newName], [oldCount, oldName]) => {  
        console.log(`Count changed from ${oldCount} to ${newCount}`);  
        console.log(`Name changed from ${oldName} to ${newName}`);  
      }  
    );  
  
    return {  
      ...state  
    };  
  }  
};

3. 深度监听

watch(  
  state,  
  (newValue, oldValue) => {  
    // 当 state 中的任何属性发生变化时触发  
  },  
  { deep: true }  
);

三、计算属性 (computed)

computed 是 Vue 3 中另一种用于观察和响应数据变化的机制。与 watch 不同，computed 主要用于根据已有的数据进行计算并返回一个新的值，这个新的值会被 Vue 缓存，只有当依赖的数据发生变化时才会重新计算。

1. 基本用法

import { ref, computed } from 'vue';  
  
export default {  
  setup() {  
    const firstName = ref('Alen');  
    const lastName = ref('Jia');  
  
    const fullName = computed(() => {  
      return `${firstName.value} ${lastName.value}`;  
    });  
  
    return {  
      firstName,  
      lastName,  
      fullName  
    };  
  }  
};

2. 监听多个属性

computed 会自动追踪其依赖的数据，并根据这些数据的变化重新计算。因此，你可以很方便地在 computed 函数中使用多个数据属性。

3. 缓存机制

computed 的一个重要特点是它的缓存机制。只有当其依赖的数据发生变化时，computed 属性才会重新计算。这可以提高性能，特别是在进行复杂计算或需要频繁访问计算属性时。

四、区别总结

• 用途：watch 主要用于观察和响应数据的变化并执行相应的操作，而 computed 主要用于根据已有的数据进行计算并返回一个新的值。
• 触发时机：watch 是在数据变化时触发回调函数，而 computed 是在访问其值时进行计算（如果依赖的数据发生变化）。
• 缓存：computed 具有缓存机制，只有当依赖的数据发生变化时才会重新计算，而 watch 没有缓存机制。
• 性能：对于需要频繁访问的计算属性，computed 通常比 watch 更高效，因为它可以避免不必要的重复计算。

五、结语

在 Vue 3 中，watch 和 computed 都是非常重要的工具，它们可以帮助你更好地观察和响应数据的变化。选择使用哪种机制取决于你的具体需求和场景。希望本文能够帮助你更好地理解和使用 Vue 3 中的 watch 和 computed的区别。