Vue 执行流程

       

 

              

{{message + '---这是在outer HTML中的'}}

       

new Vue({

        el:"#app",

        data:{

                message:'vue 生命周期'

        },

        template:"

{{message +'---这是在template中的'}}

"，

        render: function (createElement) {

                return createElement('h1', 'This is createElement.');

        }

})

 

1.beforeCreate

        进入本页面都会开始以下周期

        初始化vue生命周期，初始化事件event，进行数据的观测，未实例挂载el dom 对象，未进行data属性数据绑定。

打印el 和data 都是undefined

2.created

        初始化节点注入和响应数据，判断是否存在el挂载节点选项和template模板设置选项，但并未实例挂载el节点对象，此阶段进行数据和 data 属性的绑定。打印el是undefined，可以打印data绑定的数据。

3.beforeMount

        如果在created中判断对象有 el 选项（option）和template 设置选项则进行这个周期的编译。如果没有el选项则停止编译，停止vue生命周期，直到在该 Vue 实例上调用 vm.$mount(el)，如果没有 template 选项，则将外部 HTML（outerHTML）作为模板编译。还有一个render函数选项，按照 render 函数选项 > template 选项 > outerHTML 优先级渲染使用模板，在此周期内，el和data都可以正常打印。

4.mounted

        将JavaScript 中的虚拟 DOM 形式替换掉vue实例化的挂载的 DOM 元素。在此周期显示出实际挂载的内容，如下

        

{{message}}

   =>   

vue生命周期

5.beforeUpdate

        当 vue 中的数据发生改变，会触发对应组件的重新渲染（re-render），view层先后调用 beforeUpdate 和 updated 钩子函数。我们设置vm.message = '触发组件更新'​​​​​​​。

         beforeUpdate 发生在 view 层的改变之前，也就是页面还没有重新渲染，此时页面仍然显示 “Vue的生命周期”

6.update

         updated 是发生在 view 层改变之后，也就是此时的页面已经重新渲染为 “触发组件更新”

7.beforeDestroy

         当离开本页面会调用beforedestroy和destroyed周期，销毁实例

         在实例被销毁之前调用，在这一步，实例仍然完全可以调用。

8.destroyed

         在实例被销毁之后调用，此时 vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。