Vue生命周期

Vue2 - 生命周期

Vue2 的生命周期钩子函数用于在组件生命周期的不同阶段执行特定的逻辑。

以下是 Vue2 生命周期的详细说明和示例。

• beforeCreate

  • 在实例被创建之前调用。此时实例的属性和方法都不能被访问。

new Vue({
  beforeCreate: function() {
    // 在此阶段不可以访问实例的属性和方法
    console.log("beforeCreate");
  }
});

• created

  • 在实例创建后调用。此时实例的属性和方法已经被创建，但还未挂载到 DOM 上。

new Vue({
  created: function() {
    // 可以访问实例的属性和方法
    console.log("created");
  }
});

• beforeMount

  • 在实例被挂载到 DOM 前调用。

new Vue({
  beforeMount: function() {
    // 此时实例的模板已经编译成了渲染函数
    console.log("beforeMount");
  }
});

• mounted

  • 实例被挂载到 DOM 后调用。

new Vue({
  mounted: function() {
    // 可以访问实例的 DOM 元素
    console.log("mounted");
  }
});

• beforeUpdate

  • 在实例数据更新前调用。

new Vue({
  beforeUpdate: function() {
    console.log("beforeUpdate");
  }
});

• updated

  • 在实例数据更新后调用。

new Vue({
  updated: function() {
    console.log("updated");
  }
});

• beforeDestroy

  • 在实例销毁前调用。

new Vue({
  beforeDestroy: function() {
    // 可以执行一些清理工作，如清除定时器或取消订阅
    console.log("beforeDestroy");
  }
});

• destroyed

  • 在实例销毁后调用。

new Vue({
  destroyed: function() {
    console.log("destroyed");
  }
});

示例

下面是一个完整的示例，展示了 Vue 2 生命周期的各个阶段。

<div id="app">
  <p>{{message}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    beforeCreate: function() {
      console.log("beforeCreate");
    },
    created: function() {
      console.log("created");
    },
    beforeMount: function() {
      console.log("beforeMount");
    },
    mounted: function() {
      console.log("mounted");
    },
    beforeUpdate: function() {
      console.log("beforeUpdate");
    },
    updated: function() {
      console.log("updated");
    },
    beforeDestroy: function() {
      console.log("beforeDestroy");
    },
    destroyed: function() {
      console.log("destroyed");
    }
  })
</script>

Vue3 生命周期

相较于 Vue2 ，Vue3提供了一些新的生命周期钩子函数以及对原有生命周期钩子函数的改动

• beforeCreate

  • 在实例初始化之后，数据观测和事件配置之前被调用。在该钩子函数中，实例的属性和方法尚未初始化。

export default {
  /* Vue3 beforeCreate 生命周期钩子 */
  beforeCreate() {
    console.log('beforeCreate');
    console.log(this.$data); // undefined
    console.log(this.$el); // undefined
  },
  /* Vue2 created 生命周期钩子 */
  created() {
    console.log('created');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // undefined
  }
}

• created

  • 在实例创建完成后被立即调用。在该钩子函数中，实例的属性和方法已经初始化完成。

export default {
  /* Vue3 created 生命周期钩子 */
  created() {
    console.log('created');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // undefined
  },
  /* Vue2 mounted 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // <div>...</div> (已挂载)
  }
}

• beforeMount

  • 在挂载开始之前被调用。在该钩子函数中，模板编译尚未完成。

export default {
  /* Vue3 beforeMount 生命周期钩子 */
  beforeMount() {
    console.log('beforeMount');
    console.log(this.$el); // undefined
  },
  /* Vue2 beforeMount 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$el); // <div>...</div> (已挂载)
  }
}

• mounted

  • 在实例挂载之后被调用。在该钩子函数中，实例已经被挂载到DOM中。

export default {
  /* Vue3 mounted 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$el); // <div>...</div> (已挂载)
  },
  /* Vue2 beforeUpdate 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  }
}

• beforeUpdate

  • 在响应式数据更新之前被调用。在该钩子函数中，数据可能被改变，但DOM尚未更新。

export default {
  /* Vue3 beforeUpdate 生命周期钩子 */
  beforeUpdate() {
    console.log('beforeUpdate');
    console.log(this.$el); // <div>...</div> (旧的DOM)
  },
  /* Vue2 beforeUpdate 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  }
}

• updated

  • 在响应式数据更新并且DOM重新渲染之后被调用。

export default {
  /* Vue3 updated 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  },
  /* Vue2 beforeUnmount 生命周期钩子 */
  beforeUnmount() {
    console.log('beforeUnmount');
    console.log(this.$el); // <div>...</div> (将要被卸载)
  }
}

• beforeUnmount

  • 在卸载开始之前被调用。在该钩子函数中，实例尚未被卸载。

export default {
  /* Vue3 beforeUnmount 生命周期钩子 */
  beforeUnmount() {
    console.log('beforeUnmount);
    console.log(this.$el); // <div>...</div> (将要被卸载)
  },
  /* Vue2 destroyed 生命周期钩子 */
  destroyed() {
    console.log('destroyed');
    console.log(this.$el); // undefined
  }
}

activated 、 deactivated 、 errorCaptured 等。这些钩子函数在 Vue3 中已经废弃或替代。

总结: Vue3 引入了新的生命周期钩子函数，并对原有的部分钩子函数进行了更名和改动。使用新的生命周期钩子函数能够更好地管理组件的生命周期和实现更细粒度的控制。