vue基础(五)：生命周期

生命周期

 挂载流程
 new Vue()
 init Events & Lifecycle 初始化:生命周期 事件  但数据代理还未开始
 调用 beforeCreate : 
     无法通过vm访问到data中的数据 methods中的方法
 init injections & reactivity 初始化: 数据监测 数据代理
 调用 created : 
     可以通过vm访问到data中的数据 methonds中配置的方法
 Vue解析模板 生成虚拟DOM(内存中),页面还不能显示解析好的内容
 调用 beforeMount : 
     1.页面呈现的是未经Vue编译的DOM结构 
     2.所有对DOM的操作 最终都不奏效 (不要在这操作dom)
 Create vm.$el and replace "el" with it 将内存中 虚拟DOM转为 真实DOM 插入页面 (所以不在beforeMount操作dom)
调用 mounted : (常用)
     1.页面呈现的是经过Vue编译的DOM 
     2.对DOM的操作均有效(尽可能避免)至此初始化过程结束 一般在此进行: 发送ajax请求 开启定时器 绑定自定义事件 发送网络请求 订阅消息  等初始化操作
 
更新流程
 
Mounted 
     Virtual DOM re-render and patch 根据新数据 生成新的虚拟DOM 随后与旧的虚拟DOM进行比较 最终完成页面更新 即Model => View的更新
     调用 beforeUpdate : 此时数据是新的但是页面是旧的 页面尚未和数据保持同步
     调用 updated : 此时数据的新的页面也是新的 页面和数据保持同步
销毁流程
 Teardown warchers.child components and event Listeners
     移除事件监听
调用 beforeDestroy : (常用)
     销毁之前
     1.此时 vm中 所有的 data methods 指令等 都处于可用状态 
     2.马上要执行销毁过程 一般在此进行: 关闭定时器 取消订阅消息 解绑自定义事件 等收尾操作
调用 destroyed 
     销毁完毕
关于销毁Vue实例
     1.销毁后借助Vue开发者工具看不到任何信息
     2.销毁后自定义事件会失效，但原生DOM事件依然有效
     3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

 <div id="demo">
   <div class="box" :style="{opacity}">123</div>
   <button @click="opacity = 1">透明度设置为1</button>
   <button @click="stop">点我停止变换</button>
 </div>
 <script type="text/javascript">
   //阻止vue在启动时生成生产提示
   Vue.config.productionTip = false;
   //创建Vue实例
   new Vue({
     el: "#demo",
     data: {
       opacity: 1,
     },
     methods: {
       stop() {
         this.$destroy();// 触发beforeDestroy()
       },
     },
     // vue完成模板的解析 并把初始的真实dom元素放入页面后(挂载完毕)mounted
     mounted() {
       console.log("mounted");
       setInterval(() => {
         this.opacity -= 0.01;
         if (this.opacity <= 0) this.opacity = 1;
       }, 100);
     },
     beforeDestroy() {
       clearInterval(this.timer);
       console.log("vm即将驾鹤西游了");
     },
   });
 </script>