Vue生命周期详解

1. created

在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用。

此时，实例已经创建完成，但是还没有被挂载到DOM上。

在created钩子中，你可以执行以下操作：

• 初始化数据
• 获取props
• 注册方法
• 注册事件侦听器

created () {
  // 初始化数据
  this.count = 0;

  // 获取props
  console.log(this.$props.message);

  // 注册方法
  this.increment = () => {
    this.count++;
  };

  // 注册事件侦听器
  this.$on('click', this.increment);
}

2. beforeDestroy

在实例销毁之前调用。

在beforeDestroy钩子中，你可以执行以下操作：

• 注销事件侦听器
• 停止计时器
• 清理资源

beforeDestroy () {
  // 注销事件侦听器
  this.$off('click', this.increment);

  // 停止计时器
  clearInterval(this.timer);

  // 清理资源
  delete this.count;
}

3. mounted

实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始。

此时，实例已经挂载到DOM上。

在mounted钩子中，你可以执行以下操作：

• 访问DOM元素
• 发送AJAX请求
• 初始化第三方库

mounted () {
  // 访问DOM元素
  console.log(this.$el);

  // 发送AJAX请求
  this.$http.get('/api/data').then((response) => {
    this.data = response.data;
  });

  // 初始化第三方库
  this.$toast('Hello, world!');
}

4. beforeUpdate

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

此时，数据已经更新，但DOM还没有被重新渲染。

在beforeUpdate钩子中，你可以执行以下操作：

• 在DOM更新之前执行一些操作
• 取消即将到来的DOM更新

beforeUpdate () {
  // 在DOM更新之前执行一些操作
  console.log('Data has been updated!');

  // 取消即将到来的DOM更新
  return false;
}

总结

Vue生命周期是一个非常重要的概念，它可以帮助你更好地理解Vue是如何工作的。

通过了解Vue生命周期，你可以更好地组织你的代码，并避免出现一些常见的错误。