深入理解Vue 的钩子函数

Vue 的钩子函数是 Vue 实例在特定时期执行的函数。这些函数提供了扩展 Vue 行为的机会，例如在实例创建前和销毁后执行某个操作，或者在数据更新时执行一些代码。

Vue 的钩子函数分为两种：生命周期钩子函数和自定义钩子函数。

生命周期钩子函数

Vue 实例的生命周期从创建到销毁一共有 8 个时期，每个时期都有对应的生命周期钩子函数。下面逐一介绍并举例说明。

beforeCreate

在实例创建之前执行。此时实例的 data、computed、methods、watcher 都还未初始化。

export default {
  beforeCreate() {
    console.log('beforeCreate执行了');
  }
}

created

在实例创建之后执行。此时实例已经完成了 data、computed、methods 都初始化，并且 DOM 元素还未挂载到页面中。

export default {
  created() {
    console.log('created执行了');
  }
}

beforeMount

在 DOM 元素挂载到页面之前执行。此时实例已经完成了 template 转换成 DOM 对象，但还没有挂载到页面中。

export default {
  beforeMount() {
    console.log('beforeMount执行了');
  }
}

mounted

在 DOM 元素挂载到页面后执行。此时实例已经成功地挂载到了页面中，并且可以通过 DOM API 操作页面元素。

export default {
  mounted() {
    console.log('mounted执行了');
  }
}

beforeUpdate

在数据更新时执行，但 DOM 还未更新。此时可以对数据进行操作。

export default {
  beforeUpdate() {
    console.log('beforeUpdate执行了');
  }
}

updated

在数据更新后执行，并且 DOM 已经更新完毕。

export default {
  updated() {
    console.log('updated执行了');
  }
}

beforeDestroy

在实例销毁之前执行。此时实例还没有销毁，可以在这里进行资源释放、事件解绑等操作。

export default {
  beforeDestroy() {
    console.log('beforeDestroy执行了');
  }
}

destroyed

在实例销毁之后执行。此时实例已经完全销毁，无法访问实例的 data、methods 等属性。

export default {
  destroyed() {
    console.log('destroyed执行了');
  }
}

自定义钩子函数

除了 Vue 实例的生命周期钩子函数，我们还可以自定义钩子函数。自定义钩子函数是为了让组件之间解耦，避免组件之间直接耦合调用。

举例来说，假设有两个组件 A 和 B，组件 A 需要在某个时刻执行组件 B 的某个方法，但是组件 A 并不知道组件 B 的存在，也不应该调用组件 B 的方法。这种情况可以使用自定义钩子函数来实现。

首先在组件 B 中定义一个自定义钩子函数：

export default {
  created() {
    // 在created生命钩子函数中调用自定义钩子函数
    this.$emit('hello', '组件B的hello方法被执行了！');
  }
}

然后在组件 A 中监听这个自定义钩子函数：

export default {
  created() {
    // 监听名为hello的自定义钩子函数
    this.$on('hello', message => {
      console.log(message);
    });
  }
}

通过自定义钩子函数，组件 A 和 B 实现了解耦，互不知道对方的存在，但是可以通过自定义钩子函数实现相互通信。

总结

Vue 的钩子函数为开发者提供了丰富的扩展 Vue 行为的机会，可以利用好这些钩子函数，合理地分配生命周期和自定义行为以及组件之间通信。可以提高代码的可维护性和可扩展性。