vue生命周期

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

<div @click="handleClickC">
    我是最外层
    <button @click="addCountClick()">add</button>
  </div>
const addCountClick = () =>{
  alert(0)
}
const handleClickC = () =>{
  alert(1)
}

最外层事件加上.capture,结果显示 ：先 1 后 0

<div @click.capture="handleClickC">