引出生命周期

1、生命周期：生命周期又名回调函数、生命周期函数、生命周期钩子；

2、是什么？Vue在关进时刻帮我们调用的一些特殊名称的函数；

3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的；

4、生命周期函数中的this指向是vm 或组件实例对象；

案例：

    <body>
     <!--准备好一个容器-->
     <div id="root">
	<h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
     </div>
    </body>
	
    <script>
        new Vue({
          el:'#root',
          data:{
            a:false,
            opacity:1
          },
          mounted(){
            console.log('mounted',this)
            setInterval(() => {
              this.opacity -= 0.01
              if(this.opacity <= 0) this.opacity = 1
            },16)
          }
        })
    </script>

分析生命周期

生命周期.png

1、8个生命周期钩子（4对）：

beforeCreate函数：数据代理、数据监测之前，无法访问data中的数据，无法访问methods
created函数：完成了数据代理、数据监测，可以访问data中的数据，可以访问methods

beforeMounted函数：挂载开始之前被调用，相关的render函数首次被调用，完成了el和data的初始化；页面呈现的是未经编译的DOM结构；所有对DOM的操作都不奏效；
mounted函数：此时呈现的是经过Vue编译的DOM；一般再次进行：开启定时器、发送网络请求（ajax）、订阅消息、绑定自定义事件、等初始化操作。

beforeUpdate函数：数据已经更新，但页面未更新（即数据与页面不同步）
updated函数：数据已经更新，页面也已经更新

beforeDestory函数：实例销毁之前，可以通过this获取实例，这一步一般进行清除定时器、清除监听DOM事件等操作；
destory函数：vm实例被销毁

2、关于销毁Vue实例：

（1）销毁后借助Vue开发者工具看不到任何信息；

（2）销毁后自定义事件会失效，但原生DOM事件依然有效；

（3）一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了；

Vue2--Vue生命周期

引出生命周期

分析生命周期