生命周期流程图
生命钩子函数/周期函数
图中红色标红的函数
created() {
}
mounted() {
}
复制代码
生命周期函数中的this默认绑定到该vue实例,所以不要使用箭头函数,会出现this绑定错误。
生命周期各个阶段
beforeCreate
<div id="app">hello world</div>
var vm=new Vue({
el:'#app',
template:'<div>hello vue</div>'
data:{
a:1
},
beforeCreate() {
console.log('beforeCreate') // beforeCreate
console.log(this) // Vue$3
console.log(this.$el) // undefined
console.log(this.a) // undefined
}
})
复制代码
beforeCreate(): 可获取vue实例,data数据未绑定,el未挂载。所以不要在此函数内对数据做任何修改,因为数据undefined。
created
<div id="app">hello world</div>
var vm=new Vue({
el:'#app',
template:'<div>hello vue</div>'
data:{
a:1
},
created() {
console.log('created') // created
console.log(this) //Vue$3
console.log(this.$el) // undefined
console.log(this.a) // 1
}
})
复制代码
created(): 数据已挂载,el未挂载,适合初始化数据。
beforeMount
- 没有
el
属性
当没有el属性时,该函数不会被调用,只有当调用$mount函数时才会被调用。
var vm=new Vue({
data:{
a:1
},
beforeMount() {
console.log('beforeMount') // 没有任何输出
}
})
vm.$mount('#app')
// beforeMount
复制代码
- 没有
template
属性
没有template属性时,el外部的html被当成template进行渲染
var vm=new Vue({
el:'#app',
data:{
a:1
},
beforeMount() {
console.log('beforeMount') // beforeMount
console.log(this) // Vue$3
console.log(this.$el) // <div id="app">hello world</div>
console.log(this.a) // 1
}
})
复制代码
3. 有
template
属性
var vm=new Vue({
el:'#app',
template:'<div>hello vue</div>'
data:{
a:1
},
beforeMount() {
console.log('beforeMount') // beforeMount
console.log(this.$el) // 注意!! <div id="app">hello world</div>
}
})
复制代码
beforeMount: 渲染template,但el仍未挂载
mounted
var vm=new Vue({
el:'#app',
template:'<div>hello vue</div>'
data:{
a:1
},
mounted() {
console.log('mounted') // mounted
console.log(this.$el) // 注意!! <div>hello vue</div>
}
})
复制代码
mounted(): 挂载el,将el标识的dom元素整个替换成template渲染成的dom元素。
beforeUpdate/updated
当绑定的数据变化时,先调用beforeUpdate函数,任何更新虚拟dom,重新渲染,然后调用updated。注意:只有绑定在模板里渲染的数据变动才会调用这两个函数。
var vm=new Vue({
el:'#app',
template:'<div>hello vue</div>',
data:{
a:1
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
}
})
vm.a=2 // 没有任何输出
var vm=new Vue({
el:'#app',
template:'<div>hello vue!!!{{a}}</div>',
data:{
a:1
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
}
})
vm.a=2 // beforeUpdate updated
复制代码