VUE 生命周期
vm的一生：
将要创建 => 调用beforeCreate函数。
创建完毕 => 调用create函数。
将要挂载 => 调用beforeMount函数
*挂在完毕 => 调用mounted函数
将要更新 => 调用beforeUpdate函数
更新完毕 => 调用updated函数
*将要销毁 => 调用beforDestroy函数
销毁完毕 => 调用distroyed函数
最基本的生命周期
从创建（数据代理）->
将要挂在（生成虚拟 dom 为编译dom结构）->
挂在完毕（虚拟dom转为真实dom 并且存到vm.$el）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<h2>当前的n:{{n}}</h2>
</div>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../../vue.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
new Vue({
el:"#root",
data:{
opacity:1,
n:1
},
methods:{
add(){
// console.log(this)
n++;
}
},
//1.初始化：生命周期 事件 但是data还没拿到
//2.beforeCreate 数据代理还没开始 方法还没进入
beforeCreate() {
console.log('此时还拿不到data 和方法')
// debugger;//添加断点
},
//3.初始化：数据监测 数据代理
//4.数据监测 数据代理完成
created() {
console.log("数据监测 数据代理完成")
//可以访问到data了
// debugger;
},
/*
//开始解析模板 生成虚拟DOM（内存中），但是页面还不能显示解析好的内容
//5.el 配置项是否有
//6.有没有template （如果没有）
//7.开始编译
*/
//8.beforeMoubt 未编译dom结构
beforeMount() {
console.log('vue已经解析完了 但是还没放上去')
// debugger
//所有对dom的操作最终都是无效的
},
//9.虚拟dom转成真是dom存到vm.$el上去
//10.vue 实例（不是组件）挂在挂载完毕
mounted() {
//初始化操作 经过vue操作的
console.log('mouted vue虚拟dom替换成真实dom',this.$el)
//此时尽可能避免操作dom
//至此初始化过程结束 一般在这个阶段开启定时器 发送网络请求 订阅消息 绑定自定义事件 等初始化操作
}
})
</script>
</body>
</html>
更新生命周期
当数据更新时调用（不更新不会调用，一开始也不会）
1.beforeUpdate 数据和页面未保持同步，（面试可能问）数据已经发生更新
2.完成更新并且与旧数据进行对比
3.updated数据更新完毕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<h2>{{n}}</h2>
<button type="button" @click="n++">继续学</button>
</div>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../../vue.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
new Vue({
el:"#root",
data:{
opacity:1,
n:1
},
methods:{
death(){
console.log(this)
}
},
//vue 实例（不是组件）挂在挂载完毕
mounted() {
},
//当数据更新世
beforeUpdate() {
console.log('数据开始更新')
//页面和数据还没保持同步
//数据改了但是还没弄到界面上
},
//这里会完成更新 然后新的旧的进行对比
updated() {
//数据更新完毕
}
})
</script>
</body>
</html>
销毁生命周期
**调用 vm.$destroy() 进行销毁。
1.beforeDestroy 此时vm中的 data 等都是可用状态 马上销毁过程，在此阶段关闭定时器 取消订阅消息。对数据发生的所有的变化都不会更新了。
2.destroyed销毁了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">{{n}}</h2>
<button type="button" @click="n++">继续学</button>
<button type="button" @click="bye()">点我销毁vm</button>
</div>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../../vue.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
new Vue({
el:"#root",
data:{
opacity:1,
n:1
},
methods:{
death(){
console.log(this)
},
bye(){
console.log("销毁vm")
this.$destroy()
//解绑vm事件和监听 但是以前的成功保留
}
},
beforeDestroy() {
//此时vm中的 data 等都是可用状态 马上销毁过程
//在此阶段关闭定时器 取消订阅消息
console.log("被销毁前夕")
//但是页面数据不会再发生变化
//对数据发生的所有的变化都不会更新了
},
destroyed() {
console.log('被销毁了！')
}
})
</script>
</body>
</html>
