Vue实例的生命周期全过程(图)
Vue实例的生命周期全过程(图)(这里的红边圆角矩形内的都是对应的Vue实例的钩子函数)在beforeCreate和created钩子函数间的生命周期在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件created钩子函数和beforeMount间的生命周期对于created钩子函数和befo
Vue实例的生命周期全过程(图)
(这里的红边圆角矩形内的都是对应的Vue实例的钩子函数)
在beforeCreate
和created
钩子函数间的生命周期
在beforeCreate
和created
之间,进行数据观测(data observer)
,也就是在这个时候开始监控data
中的数据变化了,同时初始化事件
created
钩子函数和beforeMount
间的生命周期
对于created
钩子函数和beforeMount
间可能会让人感到有些迷惑,下面我就来解释一下:
el选项的有无对生命周期过程的影响
首先系统会判断对象中有没有el选项
有el选项,则继续编译过程
没有el选项,则停止编译,也意味着暂时停止了生命周期,直到vm.$mount(el)
下面我展示一下:
new Vue({
el: '#app',
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo如下:
可以看到,在el选项填写且正确的时候,生命周期将正常进行
而当我们把el去掉:
new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo:
可以看到,生命周期的钩子函数执行到created
就结束了
而当我们不加el选项,但是手动执行vm.$mount(el)
方法的话,也能够使暂停的生命周期进行下去,例如:
var vm = new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
vm.$mount('#app')
demo如下,可以看到,这个时候虽然对象中没有el参数,但通过$mount(el)
动态添加的方式,也能够使生命周期顺利进行
template参数选项的有无对生命周期的影响
1.如果Vue实例对象中有template参数选项,则将其作为模板编译成render函数
2.如果没有template参数选项,则将外部的HTML作为模板编译(template),也就是说,template参数选项的优先级要比外部的HTML高
3.如果1,2条件都不具备,则报错
我们可以把模板写在template参数选项中:
new Vue({
el: '#app',
template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})
demo:
也可以把参数选项写在外部HTML中,像这样:
外部HTML:
<div id="app"><p>模板是在外部HTML中找到的~</p></div>
创建对象实例:
new Vue({
el: '#app'
})
demo:
更多推荐
所有评论(0)