vue钩子函数有哪些含义（vue2钩子函数）



• 挂载阶段:、、、,
• 更新阶段:、,
• 销毁阶段:、

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestory

destory

父子组件钩子函数在三个阶段的代码执行顺序

========================================================

deactivated

activated

使用场景：

// 1. 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选(或选中)状态
// 2. keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态
// 3. 使用keep-alive缓存组件本身是为了提高页面的性能，快速加载页面，但有时候在特定场景和条件中，比如在其他的组件对数据库中的数据发生更改，我们需要去更新当前组件的数据状态，而因为组件没有销毁，所以created和mounted钩子函数都不执行，deactivated和activated就是用来解决这个问题。

如何使用（触发）

当组件被keep - alive包裹时, 再次进入此组件, 此时组件是处于存活的情况下;
如果当前组件存在activated() 函数, 一进入组件activated() 立即触发;
这时我们就可以根据特定的条件去初始化组件数据。 当离开存在deactivated() 函数的组件时， 因为此时组件对象已经处于存活状态下， 所以一离开组件deactivated() 函数就触发(也可以根据特定的条件做一些事情)

========================================================

全局前置钩子beforeEach

全局后置钩子afterEach

• 使用场景：
  • 消除组件中的定时器
  • 当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
  • 保存相关内到Vuex和Session中

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

========================================================

• 对普通dom元素进行底层操作
• : 指令被绑到元素上的时候使用, 只会执行一次

• : 绑定指令的元素被添加到父元素上的时候使用, 只会执行一次

• : 所在组建的VNode更新时调用， 但是可能发生在其子VNode更新之前, 也就是说元素更新, 但子元素尚未更新, 将调用此钩子(自定义指令所在组件更新时执行, 但是不保证更新完成)— > 和自定义所在组件有关

• : 组件和子级更新后执行(自定义指令所在组件更新完成, 且子组件也完成更新).

• : 解绑(销毁) 自定义指令所在的dom销毁时执行, 只调用一次.

========================================================

• - 自定义指令所在组件, 创建后
• - 就是Vue2.x中的 bind, 自定义指令绑定到 DOM 后调用.只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成
• - 就是Vue2.x中的 inserted, 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)
• - 自定义指令所在 DOM, 更新之前调用
• - 就是Vue2.x中的 componentUpdated
• - 销毁前
• - 销毁后

========================================================

onMounted

onBeforeUpdate

onUpdated

onBeforeUnmount

onUnmount

onErrorCapture

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/31272.html