vue 生命周期
生命周期
1、分类
2、4个事件8个钩子
主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)：
- 创建 create---- 在组建创建时执行
- 挂载 mount---- DOM被挂载时执行
- 更新 update---- 当响应数据被修改时执行
- 销毁 destory---- 在元素被销毁之前立即执行
3、调用方式
options API 和composition API的区别
例子：点击按钮使 h1 标签的值加1
- options API
<template> <h1>{{ counter }}</h1> <button @click="incrCounter">Click Me</button> </template> <script> export default { data() { return { counter: 0 } }, methods: { incrCounter: function() { this.counter += 1; } } } </script> - composition API
<template> <h1>{{ counter }}</h1> <button @click="incrCounter">Click Me</button> </template> <script setup> import { ref } from 'vue' let counter = ref(0); const incrCounter = function() { counter.value += 1; } </script>
你会注意到一些不同之处。
- 我们导入了一个叫做ref 的东西–这让我们可以创建反应式变量
- 当我们增加计数器时，我们实际上增加了counter.value ，因为ref 返回一个对象。
- 我们避免使用整个原型，而只是有一个单一的incrCounter 函数 ```
（1）在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。
使用 选项API，生命周期钩子是被暴露 Vue实例上的选项。我们不需要导入任何东西，只需要调用这个方法并为这个生命周期钩子编写代码。
// 选项 API
<script>
export default {
mounted() {
console.log('mounted!')
},
updated() {
console.log('updated!')
}
}
</script>
（2） 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。
// 组合 API
<script>
import { onMounted } from 'vue'
export default {
setup () {
onMounted(() => {
console.log('mounted in the composition api!')
})
}
}
</script>
在这里，beforecreate和created被setup方法本身所替代，我们在在setup中将会访问到9个生命周期：
- onBeforeMount：在挂载之前被调用，渲染函数render首次被调用
- onMounted：组件挂载时调用
- onBeforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
- onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用
- onBeforeUnmount：在卸载组件实例之前调用，此阶段的实例依旧是正常的。
- onActivated：被keep-alive缓存的组件激活时调用
- onDeactivated：被keep-alive缓存的组件停用时调用
- onErrorCaptured：当捕获一个来自子孙组件的错误时被调用，有三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串；此钩子会返回false来阻止改错误继续向上传播。
在组合API中，使用setup()方法替换了beforeCreate和created，那么在这两个生命周期中的方法将放在setup中执行
4、使用例子
【1】beforeMount()和onBeforeMount()
在组件DOM实际渲染之前调用，此时根元素还不存在，在选项API中，可使用this.$el来 访问；在组合API中，想访问的话就必须在根元素上使用ref。
//选项API
beforeMount(){
console.log('beforeMount',this.$el)
}
//组合API
<template>
<div ref="root">
Hello~
</div>
</template>
import {ref,onBeforeMount} from 'vue'
export default{
setup(){
const root = ref(null)
onBeforeMount(()=>{
console.log('onBeforeMount',root.value)
})
return {
root
}
},
beforeMount() {
console.log('beforeMount',this.$el)
}
}
【2】mounted()和onMounted()
在组件的第一次渲染后调用，此时元素可用，允许直接DOM访问。
import { ref, onMounted } from 'vue'
export default {
// 组合 API
setup() {
const root = ref(null)
onMounted(() => {
console.log(root.value)
})
return {
root
}
},
// 选项 API
mounted() {
console.log(this.$el)
}
}
【3】beforeUpdate()和onBeforeUpdate()
数据更新时调用，发生在虚拟DOM打补丁之前。
beforeUpdate对于跟踪对组件的编辑次数，甚至跟踪创建撤销功能的操作很有用。
【4】updated()和onUpdated()
DOM更新后，updated的方法就会调用
【5】beforeUnmount()和onBeforeUnmounted()
在卸载组件实例之前调用
//选项API
export default{
mounted(){
console.log('mounted')
},
beforeUnmount(){
console.log('unmount')
}
}
//组合API
import { onMounted,onBeforeUnmount } from 'vue'
export default {
setup(){
onMounted(()=>{
console.log('mount')
})
onBeforeUnmount(()=>{
console.log('unmount')
})
}
}
【6】unmounted()和onUnmounted()
卸载组件实例后调用，调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
import { onUnmouted } from 'vue'
export default {
//组合API
setup(){
onUnmounted(()=>{
console.log('unmounted')
})
},
//选项API
unmounted(){
console.log('unmounted')
}
}
【7】actived()和onActivated()
被keep-alive缓存的组件激活时调用
【8】deactivated()和onDeactivated()
被keep-alive缓存的组件停用时调用。
【9】vue3还提供了两个可用于调试目的的钩子
onRenderTracked
onRenderTriggered
这两个事件都带有一个debugger event，该事件会告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
export default {
onRenderTriggered(e) {
debugger
// 检测什么依赖造成了组件的重新渲染
}
}