探究 Vue 中 computed、watch 和 methods 与生命周期的执行顺序

2023-09-16 06:10:27

Vue.js 中 computed、watch、methods 与生命周期的执行顺序

在构建动态且交互式 Web 应用程序时，Vue.js 框架提供了强大的功能，例如 computed 属性、watch 侦听器、methods 方法和生命周期钩子。了解这些概念的执行顺序对于理解 Vue.js 如何管理和更新应用程序状态至关重要。

生命周期概述

Vue.js 的生命周期分为几个阶段，每个阶段都有特定的钩子函数用于执行自定义代码。主要生命周期钩子包括：

beforeCreate：在实例创建之前触发。
created：在实例创建后立即触发。
beforeMount：在实例挂载到 DOM 之前触发。
mounted：在实例挂载到 DOM 之后触发。
beforeUpdate：在实例数据更新之前触发。
updated：在实例数据更新之后触发。
beforeDestroy：在实例销毁之前触发。
destroyed：在实例销毁之后触发。

computed、watch、methods 的执行顺序

1. computed 属性

computed 属性是计算属性，其值基于其他响应式数据。它们在 beforeCreate 钩子中定义，并在 created 钩子中首次计算。当任何依赖的数据发生变化时，computed 属性将自动重新计算。

2. watch 侦听器

watch 侦听器允许您监视特定数据的变化。它们也在 beforeCreate 钩子中定义，并在 created 钩子中激活。当被监视的数据发生变化时，watch 侦听器将触发一个回调函数。

3. methods 方法

methods 是包含方法的对象，这些方法可以在模板中或从其他方法中调用。它们在 beforeMount 钩子中定义，可以在 mounted 钩子或后续的生命周期钩子中调用。

执行顺序图

以下是一个展示这些概念执行顺序的图表：

computed、watch、methods 与生命周期的执行顺序图

代码示例

// 在 beforeCreate 钩子中定义 computed 属性和 watch 侦听器
beforeCreate() {
  // 定义 computed 属性
  this.fullName = {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      // 分割传入的字符串以更新 firstNam 和 lastName 数据
      const [firstName, lastName] = newValue.split(' ');
      this.firstName = firstName;
      this.lastName = lastName;
    }
  };

  // 定义 watch 侦听器
  this.$watch('firstName', (newValue, oldValue) => {
    // 在 firstName 数据更新时执行此回调
  });
},

// 在 beforeMount 钩子中定义 methods 方法
beforeMount() {
  // 定义 methods 方法
  this.greet = function() {
    alert(`你好，${this.fullName}！`);
  };
}