vue生命周期 (创建阶段 | 挂载阶段 | 更新阶段 | 销毁阶段 )
Vue的生命周期是指一个Vue组件从创建、挂载、更新到销毁的过程。在这个过程中，Vue提供了一系列的生命周期钩子函数,允许开发者在组件的特定阶段执行自定义的逻辑。
在Vue 2中，生命周期钩子函数通常是在组件选项中以方法的形式定义的。主要包括以下几个阶段：
创建阶段：
beforeCreate：在实例初始化之后，数据观测（data和props的初始化）之前被调用。此时无法访问data、computed、methods等属性。
created：在实例创建完成后被调用，此时组件实例已完成数据观测，但是DOM元素还未生成，因此无法访问到$el。适合执行一些初始化操作，如异步请求数据、对数据的进一步处理，或者在组件创建完成后进行一些操作，如设置定时器、监听事件等。
<div id="app">
<div>{{msg}}</div>
<input type="button" value="更新" @click="update" />
<input type="button" value="销毁" @click="destroy" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {
update: function() {
this.msg = 'hello';
console.log('更新');
},
destroy: function() {
this.$distroy;
console.log('销毁');
}
},
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>
## 挂载阶段：
beforeMount：在挂载开始之前被调用，相关的render函数首次被调用，但此时还未生成DOM。
mounted：在挂载完成后被调用，此时组件的DOM已经渲染完成，可以安全地访问DOM元素和进行DOM操作。
<div id="app">
<div>{{msg}}</div>
<input type="button" value="更新" @click="update" />
<input type="button" value="销毁" @click="destroy" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {
update: function() {
this.msg = 'hello';
console.log('更新');
},
destroy: function() {
this.$distroy;
console.log('销毁');
}
},
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>
## 更新阶段：
beforeUpdate：在组件即将因为一个响应式状态变更而更新其DOM树之前调用。这个钩子可以用来在Vue更新DOM之前访问DOM状态。
updated：在组件因为一个响应式状态变更而更新其DOM树之后调用。这个钩子通常用于执行依赖于DOM的更新操作。
<div id="app">
<div>{{msg}}</div>
<input type="button" value="更新" @click="update" />
<input type="button" value="销毁" @click="destroy" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {
update: function() {
this.msg = 'hello';
console.log('更新');
},
},
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');
}
})
销毁阶段：
beforeDestroy：在组件实例被销毁之前调用。此时，组件实例仍然保有全部功能，但即将被销毁。可以在这个钩子中进行一些清理操作，如取消事件监听器和定时器。
destroyed：在组件实例被销毁之后调用。此时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。可以在这个钩子中进行最终的清理工作。
此外，Vue 2还提供了keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行activated钩子函数。
methods: {
destroy: function() {
this.$destroy();
console.log('销毁');
}