Vue钩子函数
🌰 setup(): <- beforeCreate、created
开始创建组件之前,创建data和method,在beforeCreate之后和created之前执行。
1、setup接受两个参数props、context
2、⚠️在setup中没有this,也无法使用 data 和 methods
3、context 是一个 JavaScript 对象,context.attrs, context.slots, context.emit
//setup中的props是响应式的
export default {
props: {
name: String
},
setup(props,context) {
console.log(props.name)
}
}
❌ props不能直接使用解构(如果非要使用,通过setup中的toRefs来使用)
import { toRefs } from 'vue'
setup(props) {
const { name } = toRefs(props)
console.log(name.value)
}
官网:因为 props 是响应式的,不能使用 ES6 解构,因为它会消除 prop 的响应性。
setup()使用例子
<template>
<div>{{age}}</div>
<p>{{plus10}}</p>
<button @click="onEdit">点这个按钮上面的数字会变</button>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const checked = ref(['a', 'b']);
// reactive 声明复杂数据类型
const currentContact = reactive({
name: '张三',
tel: '13000000000',
});
//定义一个age的响应式数据,并初始化值为1
const age = ref(1)
//定义一个函数,修改age
const onEdit = () => {
age.value++ //想改变值或获取值 必须.value
};
//计算属性×10
const plus10 = computed(() => age.value * 10);
// 暴露给模板
return {
checked,
currentContact,
age,
onEdit
}
},
}
</script>
🌰 onBeforeMount(): <- beforeMount
挂载前,组件挂载到节点上之前执行的函数。
🌰 onMounted() : <- mounted
挂载完成,组件挂载完成后执行的函数。
🌰 onBeforeUpdate(): <- beforeUpdate
组件更新前,组件更新之前执行的函数。
🌰 onUpdated(): <- updated
组件更新完成后,组件更新完成之后执行的函数。
🌰 onBeforeUnmount(): <- beforeDestroy
组件销毁前,组件卸载之前执行的函数。
🌰 onUnmounted(): <- destroyed
组件销毁完成后,组件卸载完成后执行的函数
🌰 onActivated(): <- activated
组件被激活时执行。被包含在中的组件,会多出两个生命周期钩子函数。
🌰 onDeactivated(): <- deactivated
组件切换时,比如从 A 组件,切换到 B 组件,A 组件消失时执行。
🌰 onErrorCaptured(): <- errorCaptured
捕获组件异常的函数。
👉新增了onRenderTracked、onRenderTriggered (两个钩子函数都接收一个 DebuggerEvent)(主要用于调试)
import { onRenderTracked,onRenderTriggered } from 'vue'
setup(){
//新增两个生命周期函数
onRenderTracked((e)=>{
console.log(e);
console.log("当一个reactive对象属性或一个ref被追踪时触发----onRenderTracked");
})
onRenderTriggered((e)=>{
console.log(e);
console.log("依赖项变更被触发时-----> onRenderTriggered");
})
}
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref
} from 'vue'
export default {
setup () {
// 其他的生命周期
onBeforeMount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
})
onMounted (() => {
console.log("App ===> 相当于 vue2.x 中 mounted")
})
// 注意,onBeforeUpdate 和 onUpdated 里面不要修改值
onBeforeUpdate (() => {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
})
onUpdated (() => {
console.log("App ===> 相当于 vue2.x 中 updated")
})
onBeforeUnmount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
})
onUnmounted (() => {
console.log("App ===> 相当于 vue2.x 中 destroyed")
})
return {
}
}
}
</script>