<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
- 挂载阶段:、、、,
- 更新阶段:、,
- 销毁阶段:、
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
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/208198.html