Vue2过渡/动画的入场钩子函数和出场钩子函数分别有哪些?
时间: 2024-01-30 07:02:06 浏览: 34
Vue2过渡/动画的入场钩子函数和出场钩子函数如下:
入场钩子函数:
- beforeEnter(el)
- enter(el, done)
- afterEnter(el)
- enterCancelled(el)
出场钩子函数:
- beforeLeave(el)
- leave(el, done)
- afterLeave(el)
- leaveCancelled(el)
相关问题
vue 自定义指令?里面有哪些钩子函数?
Vue 自定义指令可以通过 `Vue.directive` 方法来注册,其中需要传入指令名称和一个对象作为指令选项。指令选项中包含了一些钩子函数,用于在指令的不同生命周期中执行相关操作。
常用的指令钩子函数有以下几个:
- `bind`:指令绑定时调用,可以进行一些初始化操作。
- `inserted`:被绑定元素插入父节点时调用,可以进行一些 DOM 操作。
- `update`:被绑定元素所在的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
- `componentUpdated`:被绑定元素所在的 VNode 及其子 VNode 全部更新后调用。
- `unbind`:指令与元素解绑时调用,可以进行一些清理操作。
除了上述钩子函数外,还有一些其他钩子函数可供使用。详细的指令钩子函数可以参考 Vue 官方文档。
vue2和vue3的钩子函数执行顺序
Vue2和Vue3的钩子函数执行顺序有一些不同,下面是它们的执行顺序:
Vue2的钩子函数执行顺序:
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed
Vue3的钩子函数执行顺序:
1. beforeCreate
2. created
3. onBeforeMount
4. onMounted
5. onBeforeUpdate
6. onUpdated
7. onBeforeUnmount
8. onUnmounted
可以看到,Vue3增加了两个新的钩子函数,分别是`onBeforeUnmount`和`onUnmounted`,用来替代Vue2中的`beforeDestroy`和`destroyed`。同时,Vue3将`beforeMount`和`mounted`拆分成了两个独立的钩子函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)