Vue.js 的实例生命周期指的是 Vue 实例在创建、更新和销毁过程中的一系列事件和钩子函数,允许在不同阶段执行自定义操作。Vue 实例的生命周期可以分为以下阶段:
- 创建(Creation):
beforeCreate
:在实例初始化之后,数据观测和事件配置之前调用。created
:实例已经创建完成,数据观测和事件配置都已完成,但虚拟 DOM 尚未创建,不能访问$el
。
- 挂载(Mounting):
beforeMount
:在挂载开始之前被调用,可以访问$el
。mounted
:在实例被挂载后调用,可以访问$el
,此时实例已经成为 DOM 树上的一个节点。
- 更新(Updating):
beforeUpdate
:在数据更新时调用,但在 DOM 重新渲染之前。updated
:在数据更新并且 DOM 重新渲染后调用。
- 销毁(Destroying):
beforeDestroy
:在实例销毁之前调用,可以进行一些清理工作。destroyed
:在实例销毁后调用,可以访问实例的数据,但不再能访问$el
。
new Vue({ data: { message: 'Hello, Vue!' }, beforeCreate() { console.log('beforeCreate: The message is ' + this.message); }, created() { console.log('created: The message is ' + this.message); }, beforeMount() { console.log('beforeMount: The message is ' + this.message); }, mounted() { console.log('mounted: The message is ' + this.message); }, beforeUpdate() { console.log('beforeUpdate: The message is ' + this.message); }, updated() { console.log('updated: The message is ' + this.message); }, beforeDestroy() { console.log('beforeDestroy: The message is ' + this.message); }, destroyed() { console.log('destroyed: The message is ' + this.message); }, methods: { changeMessage() { this.message = 'Vue is awesome!'; }, destroyInstance() { this.$destroy(); } } });