Vue.js入门系列（三十五）：`setup` 函数的注意点、计算属性、`watch` 与 `watchEffect` 的使用

Vue.js入门系列（三十五）：setup 函数的注意点、计算属性、watch 与 watchEffect 的使用

引言

在 Vue 3 中，组合式 API 提供了更灵活的状态管理和逻辑复用能力，其中 setup 函数是核心部分。我们不仅需要掌握 setup 的使用，还需要理解它的一些特殊注意点。与此同时，计算属性 (computed) 和监听器 (watch) 仍然是 Vue 3 中不可或缺的工具，它们在 Vue 3 中有了更灵活的应用方式。在本文中，我们将深入探讨 setup 的两个注意点、computed 的用法、以及 watch 和 watchEffect 的高级使用技巧。

一、setup 的两个注意点

setup 是 Vue 3 中最重要的组合式 API 之一。它用于初始化组件的逻辑和状态，返回的对象将直接暴露给模板。尽管使用非常灵活，但有两个重要的注意点需要掌握。

1.1 setup 中的生命周期

setup 函数是在组件实例创建之前调用的，因此我们无法在 setup 函数中直接访问 this 或组件实例相关的属性和方法。要使用生命周期钩子，我们需要通过 Vue 3 提供的组合式 API，例如 onMounted、onUpdated 等。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 生命周期钩子
    onMounted(() => {
      console.log('Component is mounted');
    });

    return { count };
  }
};

在这个例子中，onMounted 替代了 Vue 2 中的 mounted 钩子，用于在组件挂载后执行代码。

1.2 setup 的执行时机

setup 函数会在组件实例化时同步调用，它的返回值决定了组件的可用状态和方法。需要注意的是，setup 返回的数据和方法会直接暴露给模板，无需通过 this 访问。

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    return { message };
  }
};

在模板中：

<template>
  <div>{{ message }}</div>
</template>

通过这种方式，我们可以在模板中直接访问 setup 返回的数据和方法。

二、computed 计算属性

2.1 什么是 computed？

computed 是一种基于其他状态派生出的状态。与普通的数据属性不同，计算属性具有缓存功能，只有当其依赖的响应式数据发生变化时，计算属性才会重新计算。

2.2 在 Vue 3 中使用 computed

在 Vue 3 中，我们通过 import { computed } 来创建计算属性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const number1 = ref(5);
    const number2 = ref(10);

    const sum = computed(() => {
      return number1.value + number2.value;
    });

    return { number1, number2, sum };
  }
};

在这个例子中，sum 是一个计算属性，它根据 number1 和 number2 的值动态计算结果。计算属性的好处在于，它会自动根据依赖的值进行缓存和更新。

2.3 计算属性的使用场景

计算属性常用于以下场景：

• 依赖多个数据属性的派生状态。
• 需要避免不必要的重新计算的场景，例如复杂的计算逻辑。
• 用于格式化显示的数据，如日期格式化、价格计算等。

三、watch 监视器

3.1 什么是 watch？

watch 是 Vue 提供的一个功能，用于监听响应式数据的变化，并执行特定的副作用操作。它常用于响应式数据发生变化时进行异步操作、数据验证等场景。

3.2 watch 监视 ref 定义的数据

在 Vue 3 中，watch 用于监视由 ref 定义的响应式数据。

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 };
  }
};

在这个例子中，watch 会监视 count 的变化，当 count.value 发生变化时，watch 会触发并记录新的值和旧的值。

3.3 watch 监视 reactive 定义的数据

当使用 reactive 创建对象时，watch 也可以监视对象内部的属性变化。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({ name: 'Alice', age: 25 });

    watch(() => state.age, (newAge, oldAge) => {
      console.log(`Age changed from ${oldAge} to ${newAge}`);
    });

    return { state };
  }
};

这里我们通过 watch 监视 state.age 的变化，而不是整个对象的变化。这种方式更加灵活，可以精确监控某个具体的属性。

3.4 watch 中 value 的问题

当我们使用 watch 来监听 ref 或 reactive 对象时，需要注意对于 ref，我们监听的是 .value，而 reactive 对象则是直接监听其属性。

const myValue = ref(0);

watch(myValue, (newValue) => {
  console.log(newValue);  // 无需 .value，直接监听 myValue
});

对于 reactive 对象：

watch(() => reactiveObject.someProp, (newVal) => {
  console.log(newVal);
});

四、watchEffect 函数

4.1 什么是 watchEffect？

watchEffect 是 Vue 3 新引入的一个函数，它会立即执行传入的副作用函数，并且在其中的响应式数据变化时自动重新执行。与 watch 不同的是，watchEffect 不需要手动指定依赖，它会自动追踪函数中的所有响应式数据。

4.2 使用 watchEffect

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`Count is now: ${count.value}`);
    });

    return { count };
  }
};

在这个例子中，watchEffect 会立即执行一次，并在 count.value 发生变化时再次执行。它非常适合用来追踪多个响应式数据的变化，而不需要显式声明依赖。

4.3 watchEffect 的特点

• 自动依赖追踪：不需要手动声明依赖，Vue 会自动追踪函数中的所有响应式数据。
• 立即执行：watchEffect 会在初次调用时立即执行副作用函数。
• 适合副作用操作：常用于需要基于多个响应式数据进行副作用操作的场景。

五、总结

通过本文的学习，你应该掌握了以下关键点：

• setup 函数的注意点：理解了 setup 的生命周期限制和它的执行时机，掌握了在 setup 中使用生命周期钩子的方法。
• computed 计算属性：学会了在 Vue 3 中使用 computed 来创建具有缓存功能的计算属性，避免不必要的重新计算。
• watch 监视器：理解了如何通过 watch 监视 ref 和 reactive 定义的数据，并解决了监听值时遇到的问题。
• watchEffect 函数：掌握了 watchEffect 的自动依赖追踪机制，适合处理自动追踪多个响应式数据的副作用操作。

这些知识为你开发 Vue 3 应用提供了更强大的工具，帮助你更好地管理和追踪状态变化。在接下来的博客中，我们将继续深入探讨 Vue 3 的更多高级特性和应用场景。如果你有任何疑问或需要进一步讨论，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue 3 的开发技巧与经验！