总结vue框架中的钩子函数
vue2.x生命周期钩子函数
组件的生命周期分为3个阶段:
- 挂载阶段:
beforeCreate、created、beforeMount、mounted, - 更新阶段:
beforeUpdate、updated, - 销毁阶段:
beforeDestroy、destroyed
beforeCreate
beforeCreate() {
// 初始化数据，并通过Object.defineProperty()和给组件实例配置watcher观察者实例（发布-订阅者模式），实现数据监测
// 该步骤可以用来检测vue是否开始实例化
// data中的数据与el还未初始化，无法通过Vue实例来访问data中的数据、computed、watch、methods等中的方法。
}
created
created() {
// 实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，可以访问data、computed、watch、methods上的方法和数据。但是，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空。
}
beforeMount
beforeMount() {
//页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
}
mounted
mounted() {
//页面呈现的是经过vue编译的dom，对dom的操作均有效，至此，初始化阶段全部完成，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。
}
beforeUpdate
beforeUpdate() {
//当数据发生变化，执行beforeUpdate钩子函数，此时，内存中数据是新的，但是页面是旧的，也就是在这个钩子函数中，页面和数据不同步
}
// beforeUpdate执行结束之后，重新生成一个新的虚拟dom(vnode),用它和原来的Vnode做比较(diff算法)patch指的就是这个比较的过程，更新render函数中的数据，之后之后将render函数渲染成真实dom，完成了 Model --> View 的更新
updated
updated() {
// 页面和数据保持同步
}
beforeDestory
beforeDestroy() {
// 在销毁前，在实例中所有的data,methods,computed,指令等，都处于可用状态；一般进行：关闭定时器，取消订阅消息解绑自定义事件等收尾工作。
}
destory
destoryed() {
// 当前实例，视图层和逻辑层的关系解绑
// 例如计时器，dom事件监听器或者与服务器的连接
}
父子组件钩子函数在三个阶段的代码执行顺序
挂载： 父亲created > 子created > 子mounted > 父亲mounted >
更新： 父亲beforeUpdate > 子beforeUpdated > 子updated > 父亲updated
销毁： 父亲beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed
========================================================
keep-alive组件的钩子函数
deactivated
deactivated() {
// 非激活
}
activated
activated() {
// 激活
}
// 保活的页面希望页面显示时立刻刷新页面的数据 比如购物车
// 保持活动，不会销毁，而是激活与非激活，点回去就是激活，点走就是非激活
使用场景：
// 1. 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选(或选中)状态
// 2. keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态
// 3. 使用keep-alive缓存组件本身是为了提高页面的性能，快速加载页面，但有时候在特定场景和条件中，比如在其他的组件对数据库中的数据发生更改，我们需要去更新当前组件的数据状态，而因为组件没有销毁，所以created和mounted钩子函数都不执行，deactivated和activated就是用来解决这个问题。
如何使用（触发）
当组件被keep - alive包裹时, 再次进入此组件, 此时组件是处于存活的情况下;
如果当前组件存在activated() 函数, 一进入组件activated() 立即触发;
这时我们就可以根据特定的条件去初始化组件数据。 当离开存在deactivated() 函数的组件时， 因为此时组件对象已经处于存活状态下， 所以一离开组件deactivated() 函数就触发(也可以根据特定的条件做一些事情)
========================================================
路由中的钩子函数(6个)
全局路由钩子函数:beforeEach afterEach
全局前置钩子beforeEach
// 在每一个路由改变的时候都要执行一遍
router.beforeEach((to, from, next) => {
// to 目标路由对象
// from 当前导航正要离开的路由对象
// next(Function函数)，一定要调用该方法来resolve这个钩子。调用方法：next(参数或者空) ***必须调用
// next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）
})
// 应用场景：
// 1. 进行一些页面跳转前的处理,例如跳转到的页面需要进行登录才可以访问时,就会做登录的跳转
// 2. 进入页面登录判断,管理员权限判断,浏览器判断
全局后置钩子afterEach
// afterEach 被调用时，路由已经跳转完成，所以不需要 next 函数
router.afterEach((to,from)=>{
})
单个的路由钩子函数:beforeEnter
// 路由独享的守卫beforeEnter
// 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的
beforeEnter((to, from, next) => {
.....
})
组件内的路由钩子函数:beforeRouteEnter beforeRouteLeave beforeRouteUpdate
- 使用场景：
- 消除组件中的定时器
- 当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
- 保存相关内到Vuex和Session中
beforeRouteEnter
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被confirm前调用
// 不能获取组件实例 this
// 因为当钩子执行时，组件实例还没有被创建
}
beforeRouteUpdate
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候。
// 由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
}
beforeRouteLeave
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
========================================================
组件自定义指令中的钩子函数direction（v2.x）
-
对普通dom元素进行底层操作
Vue.directive('指令名称', {}) -
bind: 指令被绑到元素上的时候使用, 只会执行一次Vue.directive('color', { bind: function(el) { //el就是被绑定的元素 el.style.color = "red" } }) -
inserted: 绑定指令的元素被添加到父元素上的时候使用, 只会执行一次Vue.directive('focus', { inserted: function(el) { el.focus() } }) -
update: 所在组建的VNode更新时调用， 但是可能发生在其子VNode更新之前, 也就是说元素更新, 但子元素尚未更新, 将调用此钩子(自定义指令所在组件更新时执行, 但是不保证更新完成)— > 和自定义所在组件有关Vue.directive('color', { update: function(el) { el.style.color = "blue" } }) -
componentUpdated: 组件和子级更新后执行(自定义指令所在组件更新完成, 且子组件也完成更新).Vue.directive('color', { componentUpdated: function(el) { el.style.color = "yellow" } }) -
unbind: 解绑(销毁) 自定义指令所在的dom销毁时执行, 只调用一次.
========================================================
组件自定义指令中的钩子函数direction（v3.x）
created- 自定义指令所在组件, 创建后beforeMount- 就是Vue2.x中的 bind, 自定义指令绑定到 DOM 后调用.只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成mounted- 就是Vue2.x中的 inserted, 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)beforeUpdate- 自定义指令所在 DOM, 更新之前调用updated- 就是Vue2.x中的 componentUpdatedbeforeUnmount- 销毁前unmounted- 销毁后
========================================================
vue3.x生命周期钩子函数 (函数式开发)
import {defineComponent,ref,toRefs,watch,computed,onUpdated....} from 'vue'
//setup函数替代了vuejs.2.x的beforeCreate和created钩子函数
1. onBeforeMount
onBeforeMount(()=>{
// 在组件被挂载之前被调用，当这个钩子被调用时，组件已经完成其响应式状态的设置，但还没有创建DOM节点，即将首次执行DOM渲染过程。
})
onMounted
onMounted(()=>{
// 在组件被挂载之前被调用，当这个钩子被调用时，组件已经完成其响应式状态的设置，但还没有创建DOM节点，即将首次执行DOM渲染过程。
})
onBeforeUpdate
onBeforeUpdate(()=>{
//在组件即将因为响应式状态变更而更新其DOM树之前调用，在beforeUpdate钩子函数执行时，组件的DOM还未更新，如果你想在组件更新前访问DOM，比如手动移除已添加的事件监听器，你可以注册这个钩子函数
})
onUpdated
onUpdated(()=>{
//在组件因为响应式状态变更而更新其DOM树之后调用，父组件的更新钩子将在其子组件的更新钩子之后使用。 某些逻辑，最好不要使用updated钩子函数而用计算属性或watcher取而代之，因为任何数据的变化导致的组件更新都会执行updated钩子函数。注意：不要在updated钩子函数中更新数据，因为这样会再次触发组件更新，导致无限递归更新。父组件的更新不一定会导致子组件的更新，因为更新粒度是组件级别的。
})
onBeforeUnmount
onBeforeUnmount(()=>{
// 在组件实例被卸载之前调用，当这个钩子被调用时，组件实列依然还保留全部的功能
})
onUnmount
onUnmounted(()=>{
// 在组件实列被卸载之后调用，其所有子组件都已经被卸载。可以在这个钩子中手动清理一些副作用，例如计时器，dom事件监听器或者与服务器的连接
})
onErrorCapture
onErrorCaptured(()=>{
// 注册一个钩子，在捕获了后代组件传递的错误时调用。
})