持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情
在vue中生命周期可是至关重要,很多事需要在固定时候做出回应,而面试也是常问的问题
vue2与vue3的生命周期
vue2
- beforeCreated 在数据加载之前
- created 在数据加载之后
- beforeMount 在view挂载前
- mounted 在view挂载后
- beforeUpdate 在数据更新前
- update 在数据更新后
- beforeDestory 组件销毁前
- destoryed 组件销毁后
vue3
vue3中使用optionsApi,在setup中写入生命周期钩子,而beforeCreated,created就没法使用了,setup中写入的就相当于在beforeCreated,created生命周期钩子写入
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdate
- onBeforeUnmount
- onMounted
父子组件生命周期执行顺序
父组件中
<template>
<div>
<home/>
</div>
</template>
<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUnmounted} from "vue"
import Home from "./components/Home.vue"
export default {
components:{
Home
},
setup(){
console.log("父createed");
onBeforeMount(()=>{
console.log("父onBeforeMount");
})
onMounted(()=>{
console.log("父onMounted");
})
onBeforeUpdate(()=>{
console.log("父onBeforeUpdate");
})
onUnmounted(()=>{
console.log("父onUnmounted");
})
}
}
</script>
<style>
</style>
子组件中
<template>
<div></div>
</template>
<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUnmounted} from "vue"
export default {
setup(){
console.log("子createed");
onBeforeMount(()=>{
console.log("子onBeforeMount");
})
onMounted(()=>{
console.log("子onMounted");
})
onBeforeUpdate(()=>{
console.log("子onBeforeUpdate");
})
onUnmounted(()=>{
console.log("子onUnmounted");
})
}
}
</script>
<style>
</style>
在父子组件生命周期中分别打印一段数字,判断一下谁先执行
我们可以看到
- 加载父组件中的数据created,
- 然后再去中执行父组件挂载前的onBeforeMount
- 子组件中的数据加载
- 子组件中的挂载dom
- 再去父组件中挂载dom
也就是说vue是先挂载子组件在挂载父组件
数据更新肯定是谁更新加载谁
但是如果我们两个组件 都用同一个数据他会如何触发呢
我们在父组件定义一个变量,把他传给子组件,并且加个按钮设定方法修改它,看一看在父子组件update的执行顺序
父组件
<template>
<div>
父{{myName}}
<home :myName = "myName"/>
<button@click="changeName">changeName</button>
</div>
</template>
<script>
import {ref} from "vue"
import Home from "./components/Home.vue"
export default {
components:{
Home
},
setup(){
let myName = ref("scc")
const changeName = () => {
myName.value = "xb"
}
return {
myName,
changeName
}
}
}
子组件接收参数,并且渲染
我们看一下执行结果
可以明显看出先执行父组建的更新钩子,再去执行子组件的
结束
生命周期非常重要,不仅在面试上,在工作中同样如此