Vue
beforeCreate: //在实例生成之前会自动执行的函数
created: // 在实例生成之后会自动执行的函数
beforeMount://在模版渲染完成之前(实例挂载)执行
mounted: //在模版渲染完成之后(实例挂载)执行
beforeUpdate: //当data中数据变化时自动执行
updated: //当data中数据变化之后自动执行
beforeDestroy(销毁前)
destroyed(销毁后)
vue3生命周期
包括创建阶段的setup()和onBeforeMount(),挂载阶段的onMounted()和onBeforeUpdate(),更新阶段的onUpdated()和onDeactivated(),以及销毁阶段的onUnmounted()
创建阶段: setup()和onBeforeMount()
setup()函数的使用方式与Vue2.x中的data和methods类似,我们可以在setup()函数中声明组件需要使用的数据和方法
onBeforeMount():与Vue2.x中的beforeMount()类似,表示组件在挂载到DOM之前的事件,它会在setup()函数执行之后执行。
挂载阶段: onMounted()和onBeforeUpdate()
onMounted()与Vue2.x中的mounted()类似,表示组件挂载到DOM后的事件,它会在setup()函数执行之后执行。
onBeforeUpdate()与Vue2.x中的beforeUpdate()类似.表示组件在更新之前的事件,它会在组件的状态发生改变之后、视图开始重新渲染之前执行。
更新阶段: onUpdated()和onDeactivated()。
onUpdated()与Vue2.x中的updated()类似,表示组件在更新之后的事件,它会在组件的状态发生改变之后、视图重新渲染之后执行。
onDeactivated()与Vue2.x中的deactivated()类似,表示组件被激活后的事件,它会在组件从激活状态切换到非激活状态时执行。
销毁阶段 :onUnmounted()。
onUnmounted()与Vue2.x中的beforeDestroy()类似,表示组件销毁的事件,它会在组件被销毁之前执行。
beforeUnmount : //卸载之前
unmounted: //卸载之后,DOM完全销毁后
修饰符:prevent 、capture、once、passive、self
capture:捕获模式,
结果:先 0 后 1
javascript"><div @click="handleClickC">我是最外层<button @click="addCountClick()">add</button></div>
const addCountClick = () =>{alert(0)
}
const handleClickC = () =>{alert(1)
}
最外层事件加上.capture,结果显示 :先 1 后 0
javascript"><div @click.capture="handleClickC">