Vue生命周期学习笔记

正在学习Vue生命周期，进行一下笔记整理，方便以后温习！

---

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

vue 实例的生命周期钩子函数，可以把它理解为：vue实例在某一个时间点会自动执行的函数。

Vue 实例的生命周期函数（官方11个）：

• beforeCreate：在实例部分（事件/生命周期）初始化完成之后调用。
• created：在完成外部的注入/双向的绑定等的初始化之后调用。
• beforeMount：在页面渲染之前执行。
• mounted：dom 元素在挂载到页面之后执行。

首次加载页面时，不会走下面这两个钩子，只有当数据发生改变时才会执行

• beforeUpdate：数据改变，还没重新渲染之前执行。
• updated：渲染数据完成之后执行。

执行销毁需要调用：vm.$destroy()

• beforeDestroy：实例销毁之前执行。
• destroyed：实例销毁之后执行。

beforeCreate， created:

首先这是测试代码

    <div id="app">hello world</div>
<script>
    var vm = new Vue({
        el: "#app",
        beforeCreate: function () {
            console.log('beforeCreate');
            console.log(this.$el,this.$data);
        },
        created: function () {
            console.log("created");
            console.log(this.$el,this.$data);
        }
    })

控制台输出的结果为

beforeCreate函数在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。Created函数在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
接着，我们往下看，如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。如果没有template选项，则将外部HTML作为模板编译。可以看到template中的模板优先级要高于outer HTML的优先级。
在代码中添加template：

    var vm = new Vue({
        el: "#app",
        template: '<div>this is template</div>',
        beforeCreate: function () {
            console.log('beforeCreate');
            console.log(this.$el,this.$data);
        },
        created: function () {
            console.log("created");
            console.log(this.$el,this.$data);
        }
    })

在浏览器打开，
可以看到template中的模板优先级要高于outer HTML的优先级。

beforeMouted， mounted:

    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello world'
        },
        template: '<div>{{msg}}</div>',
        beforeCreate: function () {
            console.log('beforeCreate');
            console.log(this.$el,this.$data);
        },
        created: function () {
            console.log("created");
            console.log(this.$el,this.$data);
        },
        beforeMount: function () {
            console.log("beforeMounted");
            console.log(this.$el,this.$data);
        },
        mounted: function () {
            console.log("mounted");
            console.log(this.$el,this.$data);
        }
    })

beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。Mounted：

el 被新创建的 vm.$el 替换，
并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。


结合这三个图可以看出在mounted之前div中还是通过{{msg}}进行占位的，因为此时挂到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到div中的内容发生了变化。

beforeUpdate，updated

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
我们先添加以下代码：

        beforeUpdate: function () {
            console.log("beforeUpdate");
            console.log(this.$el,this.msg,this.$data);           
        },
        updated: function () {
            console.log("updated");
            console.log(this.$el,this.msg,this.$data);  
        }

然后再开控制台输入

vm.msg=‘abc’

beforeUpdate： 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated： 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

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

beforeDestroy和destroyed

beforeDestroy： 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed： Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。