vue-生命周期函数

一、生命周期的含义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期图示：

vue生命周期.jpg

二、生命周期的过程

生命周期钩子的 this 上下文指向调用它的 Vue 实例。
注意：在生命周期函数中不要使用箭头函数

1、beforeCreate 创建之前(数据初始化之前)

beforeCreate生命周期函数，一般在开发中很少使用，除非要设置Vue实例的内容。
在beforeCreate的时候，Vue实例身上的数据还没有初始化完成。
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

// 创建之前（数据初始化之前）
  <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            // 指定挂载的容器
            el:'#app',
            data:{
                name:'张三',
                age:20
             },
           // 创建之前（数据初始化之前）
            beforeCreate(){
                console.log('-----------beforeCreate---------')
                // 这个生命周期函数，基本上不用，除非要设置Vue实例
                this.__proto__.fn = function () { 
                    alert('哈哈！')
                 }
                // Vue实例，已经创建完成
                console.log(this)
                // Vue实例身上的数据还没有初始化完成
                console.log(this.name+''+this.age);
            },
        })
  </script>

2、created 数据初始化完成

（1）created 生命周期函数
在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
created 生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里

            // 创建完成（数据初始化完成）
            created(){ 
                console.log('-------------created----------');
                // 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
                console.log(this);
                console.log(this.name+''+this.age);
            },
       })

（2）el选项和template选项
el的使用：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用vm. $el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用vm.$ mount() 手动开启编译。
template的使用：
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。如果 Vue 选项中包含渲染函数，该模板将被忽略。

    <div id="app">
        <h2 id="name">{{name}}</h2>
        <h2 id="age">{{age}}</h2>
    </div>

通过vue实例的 $mount方法，手动挂载容器通过el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面$ mount方法的好处是，可以自行选择挂载的时机

<script>
        Vue.config.productionTip = false
        let vm = new Vue({
            // 指定挂载的容器
            el:'#app',
            // 指定模板（如果有模板，vue会渲染整个模板;如果没有模板，vue会将el里面的所有内容当成模板使用）
           // template:"<div><h2>{{name}}</h2><h2>{{age}}</h2></div>",
            data:{
                name:'张三',
                age:20
             },
            // 创建完成（数据初始化完成）
            created(){ 
                console.log('-------------created----------');
                // 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
                console.log(this);
                console.log(this.name+''+this.age);
            },
       })
        setTimeout(() => {
            // 通过vue实例的$mount方法，手动挂载容器
            // 通过el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
            // $mount方法的好处是，可以自行选择挂载的时机
            vm.$mount('#app')
        }, 1000);
</script>

3、beforeMount 挂载之前

模板已经成功渲染，但是还没有将内容挂载到页面中。
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

beforeMount() {
                console.log('----------beforeMount----------');
                //这个生命周期函数，基本用不上
                console.log(this.$el);
               //可以修改数据，但是内容没有挂载到页面，并且后续内容会被真正的数据替换掉。
                document.querySelector('#name').innerHTML = '哈哈'
            },

4、mounted 挂载完成

mounted 生命周期函数，通常用于对DOM的重新改动
模板已经渲染成功，并且已经将内容挂载到了页面中

mounted() {
                console.log('------------mounted-----------')
                // 这个生命周期，通常用于对DOM的重新改动
                console.log(this.$el);
               //可以修改数据，并且重新渲染到页面
                document.querySelector('#name').innerHTML = '呵呵'
            },

5、beforeUpdate 数据更新之前

数据已经改了，只是还没有重新挂载页面

<div id="app">
        <h2 id="name">{{name}}</h2>
        <h2 id="age">{{age}}</h2>
        <button @click="name='李四'">修改姓名</button>
        <button @click="age=35">修改年龄</button>
    </div>

beforeUpdate() {
                console.log('-------------beforeUpdate----------');
                console.log(this.name+''+this.age);
                console.log(this.$el);
            },

6、updated 数据更新完成

数据已经改了，且已经挂载到页面
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watch 取而代之。

        // 修改完成（数据已经改了，且已经挂载到页面）
        updated() {
                console.log('-------------updated----------');
                console.log(this.name+''+this.age);
                console.log(this.$el);             
         },

7、beforeDestroy 销毁之前

在beforeDestroy阶段，对数据做任何的修改，都不会重新渲染到页面。该阶段，实例仍然完全可用，我们通常会在这个生命周期函数中做一些收尾的工作。比如：停掉开启的定时器，初始化一些数据等等。

<div id="app">
        <h2 id="name">{{name}}</h2>
        <h2 id="age">{{age}}</h2>
        <!-- 点击按钮调用销毁Vue实例的方法 -->
        <button @click="destroy">不过了</button>
    </div>

beforeDestroy() {
                console.log('-------------beforeDestroy----------');
                // 这个生命周期函数，会用的多一些
                console.log(this);
                // 对数据做任何的修改，都不会重新渲染到页面
                this.name = "王五"
            },

8、destroyed 销毁完成

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
destroyed 生命周期基本不用

<div id="app">
        <h2 id="name">{{name}}</h2>
        <h2 id="age">{{age}}</h2>
        <!-- 点击按钮调用销毁Vue实例的方法 -->
        <button @click="destroy">不过了</button>
    </div>

<script>
        Vue.config.productionTip = false
        let vm = new Vue({
            // 指定挂载的容器
            el:'#app',
            data:{
                name:'张三',
                age:20
             },
             //方法
             methods: {
                 destroy(){
                     this.$destroy()
                 }
             },
             destroyed() {
                 console.log('-------------destroyed----------');
                 // 这个生命周期，基本不用
                 console.log(this);
                 this.name = "王五"
             },
         })
</script>