Vue3 计算属性与侦听器的使用方法

在 Vue3 的开发过程中，计算属性与侦听器是两个极为重要的特性，它们能有效提升代码的逻辑性与可维护性。

计算属性是 Vue3 中一个强大的功能。它本质上是一个函数，但在使用时却像访问数据属性一样简洁。比如在一个电商项目中，我们需要展示商品的总价，商品的单价和数量存储在数据属性中，这时可以通过计算属性来动态计算总价。计算属性通过 computed 函数来创建，代码示例如下：

import { ref, computed } from 'vue';

const price = ref(10);
const quantity = ref(2);

const totalPrice = computed(() => {
  return price.value * quantity.value;
});

在这个例子中，totalPrice 就是一个计算属性。它依赖 price 和 quantity 这两个响应式数据，只有当 price 或 quantity 发生变化时，totalPrice 才会重新计算，这大大提高了性能。

而侦听器则用于监听一个或多个响应式数据的变化，并在数据变化时执行相应的操作。在 Vue3 里，使用 watch 函数来创建侦听器。例如，我们要监听用户登录状态的变化，当用户登录成功后进行一些操作：

import { ref, watch } from 'vue';

const isLoggedIn = ref(false);

watch(isLoggedIn, (newValue, oldValue) => {
  if (newValue) {
    // 执行登录成功后的操作，比如获取用户信息
    console.log('用户已登录');
  } else {
    console.log('用户已登出');
  }
});

这里 watch 函数第一个参数是要监听的响应式数据，第二个参数是一个回调函数，回调函数接收新值和旧值两个参数，方便我们在数据变化时进行相应处理。

计算属性适合处理一些依赖其他数据的复杂逻辑，以简洁的方式获取计算结果；而侦听器更侧重于在数据变化时执行特定的副作用操作，比如发送网络请求、更新 DOM 等。合理运用这两个特性，能够让 Vue3 项目的代码结构更加清晰，功能实现更加高效。无论是小型项目还是大型企业级应用，掌握它们的使用方法都是 Vue 开发者必不可少的技能。