Vue 的生命周期

生命周期执行的函数叫法有三种:

• 生命周期钩子

• 生命周期函数

• 钩子函数

生命周期钩子概念:

在vue实例的生命周期的各个过程中 提供函数写逻辑代码 vue实例内部会在各对应的过程调起该函数

生命周期钩子执行顺序：

创建到挂载的过程：

1.  new Vue(); 

        ↓

2.  读取所有的生命周期钩子（没有调用）

        ↓

3.  执行beforeCreate生命周期钩子函数。（数据观测,事件,监听,都还不起作用）

        ↓

4.  读取所有的属性和方法，监听，计算属性  (此时Vue实例中的配置全部生效)

        ↓

5.  执行created 生命周期钩子函数             

  (请求后台数据,ajax请求之类的，在这个函数执行之后，就可以添加数据的监听)

        ↓

6.  判断是否有el配置项，如果没有，等待$mount()执行。如果不执行就终止生命周期(但之前的钩子还是有效的)

    // 也可以 进行动态挂载

    // vm.$mount('#app');  //等价于el配置项

        ↓

7.  渲染 template 模版

        ↓

8.  查找有没有对应的dom结构

        ↓

9.  有对应的dom结构，读取出来内部的dom，进行渲染 (意思就是说内部渲染出虚拟 dom结构)

        ↓

10.  执行beforeMount生命周期钩子函数 (挂载数据和渲染出真实 dom之前调用的函数)

        ↓

11.  内部渲染完成虚拟dom，并插入属性对应的数据 ,替换到el作用的真实dom中

        ↓

12.执行mounted生命周期钩子函数   

(此时可以操作dom结构了，因为真实dom已经被渲染完成，不建议使用document操作。应该使用$refs操作dom)

更新的过程(由于数据已经发生了变化，需要重新渲染dom结构。更新是虚拟dom结构的更新):

12. 当数据（data）发生变化后

        ↓

13.  执行beforeUpdate生命周期钩子函数（数据已经变化了，虚拟dom没有更新）

        ↓

14.  将数据更新渲染到dom中去  (虚拟dom的重新渲染改变数据 , 然后转变为 真实dom )

        ↓

15.  执行updated生命周期钩子函数  (此时真实dom已经完全修改，之后可以调用$nextTick())

销毁的过程:

  动态销毁 vm.$destroy() / 内部配置中调用this.$destroy()

            ↓

16.  执行beforeDestroy生命周期钩子函数 -- 将要移除事件监听(所有watch)

            ↓

17.  移除vue实例的事件监听，子组件的事件监听。

            ↓

18.  执行destroyed生命周期钩子函数

最后总结一下注意的点：

• 当全部数据变化时

事件执行的顺序：watch -> beforeUpdate -> updated -> $nextTick()

此时要进行 dom的操作时：

只能在  updated / $nextTick() 函数中进行操作

因为watch / beforeUpdate 时，真实的dom还未进行渲染出来

• 当某个数据变化时，执行dom操作

    methods: {

        changedata(){

            this.data = 'xxxxx';

            // 得到变化后的结果

            /*

            $nextTick()需要提供一个回调函数作为参数

            当指定数据（data）发生变化后，dom结构执行更新后

            回调函数再执行。

            必须写在数据变化后的第一行代码。中间除注释外不能有任何的代码

            */

            this.$nextTick(()=>{

                console.log('nextTick调用了');

            })

        }

    },