👏每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
以上是vue官网给出的生命周期过程图
1.创建阶段:
- 1.new Vue(); 新建vue实例
- 2.读取配置项,加载生命周期方法
- 3.调用beforeCreate();
- 4.设置data,methods,computed,components,watch。。。。
- 5.调用created()
2.挂载阶段:
- 6.判断是否有template配置项
有:传入render函数,编译template
没有:把el对应的outerHTML当成template传入render函数编译 - 7.调用beforeMount()
- 8.使用编译后结果替换el的作用的dom
- 9.调用mounted()
3.更新阶段:
- 只有数据变化,并且dom使用了该数据,dom才会更新,此时才执行更新的生命周期方法:
更新前和更新后不是数据更新的状态,而是dom更新前和dom更新后 - 10.当数据发生变化
- 11.调用beforeUpdate()
- 12.重新渲染dom
- 13.调用updated()
4.销毁阶段:
- 14.执行vm.$destroy()销毁实例
- 15.调用beforeDestroy()
- 16.实例移出methods,data,…
- 17.调用destroy()
补充:
el、template、render区别
首先看看这个
html代码:
<div class="vapp-1">{{ info }}</div>
<div class="vapp-2">{{ info }}</div>
<div class="vapp-3">{{ info }}</div>
js代码
new Vue({
el: '.vapp-1',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
},
template: '<div>这是template属性模板渲染。</div>',
render: function(h){
return h('div', {}, '这是render属性方式渲染。')
}
})
new Vue({
el: '.vapp-2',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
},
template: '<div>这是template属性模板渲染。</div>'
})
new Vue({
el: '.vapp-3',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
}
})
最后编译为:
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。
由上可知优先级 el<template<render
你也许可以只有el,那么就会用el的outerHTML编译与渲染
或者 有el和template两者,就会用template里的内容替换el的outHTML
或者 有el、template、render三者,就会使用render函数的内容,因为它的优先级高。
render函数就是让你发挥 JavaScript 最大的编程能力。