1、vue生命周期
vue生命周期： Vue实例从创建到销毁的整个过程。
钩子函数： 在生命周期的不同阶段调用对应的钩子函数，来实现组件数据管理和DOM渲染两大重要功能。即钩子就是在某个阶段给你一个做某些处理的机会。
生命周期图示：
2、钩子函数
| 钩子 | 说明 |
|---|---|
| beforeCreate | 创建实例对象之前执行（初始化显示） |
| created | 创建实例对象之后执行（初始化显示） |
| beforeMount | 页面挂载成功之前执行（初始化显示） |
| mounted | 页面挂载成功之后执行（初始化显示） |
| beforeUpdate | 数据更新之前执行（更新状态） |
| updated | 数据更新之后执行（更新状态） |
| beforeDestroy | 实例销毁之前执行（销毁vue实例） |
| destroyed | 实例销毁之后执行（销毁vue实例） |
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>关注微信公众号【程序员战羽】</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 关注微信公众号【程序员战羽】，获取更多技术文章 -->
<div id="app" :x="message">
<h2>当前的message值是：{{message}}</h2>
<input type="text" v-model="message"><br><br>
<ul>
<li v-for="item in nameList">{{item}}</li>
</ul><br><br>
<button @click="destroyVue">销毁vue实例</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const app = new Vue({
el: '#app',
data: {
message: '程序员战羽',
nameList: ['微信公众号【程序员战羽】1', '微信公众号【程序员战羽】2', '微信公众号【程序员战羽】3']
},
methods: {
destroyVue() {
console.log('destroyVue...')
this.$destroy()
}
},
watch: {
message() {
console.log('message变了')
}
},
beforeCreate() {
console.log('实例创建之前,调用beforeCreate')
console.log(this.$data.message)
},
created() {
console.log('实例创建之后,调用created')
console.log(this.$data.message)
console.log('created--li数量：',document.getElementsByTagName('li').length);
},
beforeMount() {
console.log('挂载之前，调用beforeMount')
console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
console.log('beforeMount--li数量：',document.getElementsByTagName('li').length);
},
mounted() {
console.log('挂载之后，调用mounted')
console.log(this.$el.innerHTML)
console.log('mounted--li数量：',document.getElementsByTagName('li').length);
},
beforeUpdate() {
console.log('更新之前，调用beforeUpdate')
console.log(this.message)
},
updated() {
console.log('更新之后，调用updated')
console.log(this.message)
},
beforeDestroy() {
console.log('销毁之前，调用beforeDestroy')
console.log(this.message)
console.log(app)
},
destroyed() {
console.log('销毁之后，调用destroyed')
console.log(this.message)
console.log(app)
},
})
</script>
</html>
总结：
1、创建前/后：在beforeCreate阶段，data和methods中的数据和方法还未初始化，created完成数据初始化。
2、挂载前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载的是虚拟的dom节点， 页面还是旧的。在mounted阶段，vue实例挂载完成，页面成功渲染。
3、更新前/后：当data变化时，会触发beforeUpdate和updated方法。
4、销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。