生命周期
- 什么是生命周期?
一个实例从创建到销毁的一个过程。
- vue初始化做了什么?
创建vue实例后,调用init方法,做了以下事情:
// 初始化生命周期
//
initLifecycle(vm)
// 初始化事件中心
initEvents(vm)
// 初始化渲染
initRender(vm)
callHook(vm, 'beforeCreate')
// 初始化注入
initInjections(vm) // resolve injections before data/props
// 初始化状态
// 初始化 props、data、methods、watch、computed 等属性
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
// 在初始化最后,如果检测到有el属性,则调用函数挂载vm
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
- 有哪些生命周期?分别做了什么?生命周期的执行过程?
--> 首先创建一个vue实例,Vue(),然后执行初始化init()函数,初始化生命周期、事件中心、渲染;
--> 然后调用beforeCreate:这里拿不到任何数据,数据观察(dataobserver)和事件配置(event/watcher)都没有准备好,没有数据,没有dom
--> 初始化data数据,实现监听,初始化vue内部事件,进行属性和方法的计算。
--> 初始化完成,调用created:这里可以调用methods中的方法,修改data数据, 并且可触发computed重新计算,watch变更等。但是dom还没有挂载,无法访问$el。
--> 然后进行模板编译:将data的数据,和vue的模板语法编译成html,这里会分两种情况,1.是实例内部有模板属性,直接调用,然后用render函数渲染,2.是没有模板属性调用外部html
--> 模板编译完成后,调用beforeMount:这里也可以拿到data数据,可以拿到el,且成功关联到了dom,但是此时的data,并没有渲染到页面中。
--> 然后执行render函数,将渲染的内容挂载到dom节点上
--> 挂载完毕,调用mounted:在这里,dom挂载完毕,data也已经渲染到页面中。mounted仅执行一次。
--> 数据发生变化,调用beforeUpdate:当检测到我们要修改数据的时候,就会触发beforeUpdate的钩子
--> 然后Vue会利用diff算法重新比较新的虚拟dom和旧的虚拟dom,对页面重新渲染。
--> 更新完成,执行updated:当修改vue的data时,vue会自动帮我们更新渲染视图,此时页面上是最新的数据,
避免在这期间更改状态,可能会导致无限循环 钩子不常用,一般用computed,watch
--> 在销毁之前触发,beforeDestroy:所有实例都可以用
--> 然后解除绑定,销毁子组件,事件监听器
--> 销毁完毕,调用destroyed:销毁之后,所有的事件监听器会被移除,所有的子实例也都会被销毁
子组件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='js/jquery.min.js'></script>
</head>
<body>
<div id="app">
<v-sss></v-sss>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name:0
// someName:'zheli',
},
components:{
'v-sss':{
'template':`<div>子组件</div>`,
beforeCreate(){
console.log('子-->beforeCreate')
},
created() {
console.log('子-->created')
},
beforeMount(){
console.log('子-->beforeMount')
},
mounted(){
console.log('子-->mounted')
},
beforeUpdate(){
console.log('子-->beforeUpdate')
},
updated(){
console.log('子-->updated')
},
beforeDestroy(){
console.log('子-->beforeDestroy')
},
destroyed(){
console.log('子-->destroyed')
}
}
},
beforeCreate(){
console.log('父-->beforeCreate')
},
created() {
console.log('父-->created')
},
beforeMount(){
console.log('父-->beforeMount')
},
mounted(){
console.log('父-->mounted')
},
beforeUpdate(){
console.log('父-->beforeUpdate')
},
updated(){
console.log('父-->updated')
},
beforeDestroy(){
console.log('父-->beforeDestroy')
},
destroyed(){
console.log('父-->destroyed')
}
})
</script>
</body>
</html>
- 没有显示和隐藏的情况下
第一种情况:
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> mounted
-
有v-if控制子组件的显示和隐藏。
- v-if初始值为true,顺序同第一种情况
- v-if初始值为false,且一直不为true,子组件的生命周期不会触发。
- v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况
- v-if初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第二种情况:
父 --> beforeCreate
父 --> created
父 --> beforemount
父 --> mounted
父 --> beforeUpdate
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> updated
-
有v-show控制子组件的显示和隐藏。
- v-show初始值为true,顺序同第一种情况。
- v-show初始值为false,且一直不为true,顺序同第一种情况。
- v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
- v-show初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第三种情况
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
子 --> mounted
父 --> mounted
父 --> beforeUpdate
父 --> updated
孙组件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='js/jquery.min.js'></script>
</head>
<body>
<div id="app">
<v-sss v-show="isActive"></v-sss>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isActive:false
// someName:'zheli',
}
},
components:{
'v-sss':{
'template':`<div>子组件<v-sonson></v-sonson></div>`,
components:{
'v-sonson':{
'template':`<div>孙儿组件</div>`,
beforeCreate(){
console.log('孙-->beforeCreate')
},
created() {
console.log('孙-->created')
},
beforeMount(){
console.log('孙-->beforeMount')
},
mounted(){
console.log('孙-->mounted')
},
beforeUpdate(){
console.log('孙-->beforeUpdate')
},
updated(){
console.log('孙-->updated')
},
beforeDestroy(){
console.log('孙-->beforeDestroy')
},
destroyed(){
console.log('孙-->destroyed')
}
}
},
beforeCreate(){
console.log('子-->beforeCreate')
},
created() {
console.log('子-->created')
},
beforeMount(){
console.log('子-->beforeMount')
},
mounted(){
console.log('子-->mounted')
},
beforeUpdate(){
console.log('子-->beforeUpdate')
},
updated(){
console.log('子-->updated')
},
beforeDestroy(){
console.log('子-->beforeDestroy')
},
destroyed(){
console.log('子-->destroyed')
}
}
},
beforeCreate(){
console.log('父-->beforeCreate')
},
created() {
console.log('父-->created')
},
beforeMount(){
console.log('父-->beforeMount')
},
mounted(){
console.log('父-->mounted')
this.isActive = true
},
beforeUpdate(){
console.log('父-->beforeUpdate')
},
updated(){
console.log('父-->updated')
},
beforeDestroy(){
console.log('父-->beforeDestroy')
},
destroyed(){
console.log('父-->destroyed')
}
})
</script>
</body>
</html>
- 没有显示和隐藏的情况下,子组件和孙组件都不隐藏
第一种情况:
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> mounted
-
子组件由v-if控制,孙组件无控制
- v-if初始值为true,顺序同第一种情况
- v-if初始值为false,且一直不为true,子组件和孙组件的生命周期不会触发。
- v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
- v-if初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第二种情况:
父 --> beforeCreate
父 --> created
父 --> beforemount
父 --> mounted
父 --> beforeUpdate
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> updated
-
子组件由v-show控制,孙组件无控制。
- v-show初始值为true,顺序同第一种情况。
- v-show初始值为false,且一直不为true,顺序同第一种情况。
- v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
- v-show初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第三种情况
父 --> beforeCreate
父 --> created
父 --> beforemount
子 --> beforeCreate
子 --> created
子 --> beforeMount
孙 --> beforeCreate
孙 --> created
孙 --> beforeMount
孙 --> mounted
子 --> mounted
父 --> mounted
父 --> beforeUpdate
父 --> updated
其实从上面看,就可以总结出来子孙组件的生命周期。
-
如果子组件被v-if控制,且初始值为false,那么子组件一开始就不会被渲染,没有执行生命周期。
-
如果子组件被v-if控制,且初始值为true,或者子组件被v-show控制,不论初始值,或者,子组件在父组件的created,beforemount阶段显示值为true,那么,子组件总是会在父组件beforemount之后开始执行生命周期。
-
如果子组件在父组件的mounted阶段被渲染出来,这里会分两种情况,
-
第一种是v-show,因为v-show无论为true还是false,它都会存在dom节点,在父组件生命周期的beforemount之后,子组件已经开始执行自己的生命周期,直到父组件mounted阶段之后,这一轮生命周期已经完成,data已经有了,页面也已经渲染完毕。所以,当v-show的子组件变为true显示后,会触发父组件的更新函数。
-
第二种是v-if,因为v-if如果为false,是不会存在节点的,也就一开始不会显示,也就不会执行生命周期,所以,当v-if的子组件被渲染显示后,也会触发父组件的更新函数,不同的是,v-if子组件会在父组件的beforeupdate之后开始执行它的生命周期。
-
引申提问:
- Vue的beforeCreate钩子函数意义在哪里?我们可以在里面实现哪些特殊效果?
1.可以加载一些在页面渲染前出现的内容,比如loading动画
2.可以做页面拦截,和重定向。