通过这个视频学习的,讲的很清楚
视频地址
官网的生命周期图
new Vue()
创建一个vue实例,然后(Init Events & Lifecycle)初始化vue实例的事件和生命周期方法
创建阶段生命周期方法beforeCreate
在调用生命周期方法beforeCreate方法的时候,表示vue实例刚刚被创建出来,此时此刻还没有初始化Vue实例中的数据(data)和方法(methods)。所以此时此刻还不能访问Vue实例中保存的数据和方法。调用完beforeCreate的方法后,实例中的数据和方法开始初始化
var app = new Vue({
beforeCreate() {
console.log(this.name)
console.log(this.say)
},
el:"#app",
data() {
return {
name:"ndj"
}
},
methods: {
say(){
console.log('hello')
}
},
})
打印出来的是两个undefined
创建阶段生命周期方法created
在调用created的时候,是我们最早能够访问VUE实例中保存的数据和方法的地方
var app = new Vue({
created() {
console.log(this.name)
console.log(this.say)
},
el:"#app",
data() {
return {
name:"ndj"
}
},
methods: {
say(){
console.log('hello')
}
},
})
成功打印属性name和函数say()
开始编译模板阶段
上图这一阶段开始编译模板,根据data中的数据和指令生成HTML。注意此时还没有渲染到界面,仅存在内存中
创建阶段生命周期方法beforeMount
在调用beforeMount的时候,表示Vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上
因为还没有渲染到界面上,仅在内存,所以我们测试一下
<div id="app">
<p>{{name}}</p>
</div>
<script>
var app = new Vue({
beforeMount() {
console.log(document.querySelector('p').innerHTML)
console.log(document.querySelector('p').innerText)
},
el:"#app",
data() {
return {
name:"ndj"
}
},
methods: {
say(){
console.log('hello')
}
},
})
</script>
此时你打印 ‘p’
打印出来的是:
{{name}}
{{name}}
创建阶段生命周期方法mounted
在调用mounted的时候,表示Vue已经编译好了最终模板,表示我们已经可以拿到界面上渲染之后的内容了
var app = new Vue({
mounted() {
console.log(document.querySelector('p').innerHTML)
console.log(document.querySelector('p').innerText)
},
el:"#app",
data() {
return {
name:"ndj"
}
},
methods: {
say(){
console.log('hello')
}
},
})
打印了两个ndj
mounted实时监听data的变化,随时准备更新DOM
运行阶段的生命周期方法beforeUpdate
在调用beforeUpdate的时候,表示Vue实例中保存的数据被修改了,只有保存的数据被修改了才会调用beforeUpdate,否则不会调用。
注意:在调用beforeUpdate的时候,数据已经更新了,但是界面还没有更新
运行阶段的生命周期方法Updated
也同步在调用uodated的时候,表示Vue实例中保存的数据被修改了,并且界面也同步了修改的数据了,也就是说数据和界面都同步更新之后就会调用updated
销毁期间的生命周期方法beforeDestroy
可以通过v-if来测试,因为v-if是创建和销毁组件
在调用beforeDestroy的时候,表示当前组件即将被销毁了,只要组件不被销毁,那么beforeDestroy就不会调用,beforeDestroy函数是我们最后能够访问到组件数据和方法的函数
销毁期间的生命周期方法destroyed
在调用destroyed的时候,表示当前组件已经被销毁了
注意:只要组件不被销毁,那么destroyed就不会被调用,不要再这个生命周期再去操作数据和方法