总结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等中的方法。
}

1
2
3
4
5
6
7

created

created() {
	// 实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，可以访问data、computed、watch、methods上的方法和数据。但是，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空。
}

1
2
3
4
5

beforeMount

beforeMount() {
	//页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
}

1
2
3
4
5

mounted

mounted() {
	//页面呈现的是经过vue编译的dom，对dom的操作均有效，至此，初始化阶段全部完成，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。
}

1
2
3
4
5

beforeUpdate

beforeUpdate() {
	//当数据发生变化，执行beforeUpdate钩子函数，此时，内存中数据是新的，但是页面是旧的，也就是在这个钩子函数中，页面和数据不同步
}

   // beforeUpdate执行结束之后，重新生成一个新的虚拟dom(vnode),用它和原来的Vnode做比较(diff算法)patch指的就是这个比较的过程，更新render函数中的数据，之后之后将render函数渲染成真实dom，完成了 Model --> View 的更新
   
1
2
3
4
5
6
7

updated

updated() {
	// 页面和数据保持同步
}

1
2
3
4
5

beforeDestory

beforeDestroy() {
	// 在销毁前，在实例中所有的data,methods,computed,指令等，都处于可用状态；一般进行：关闭定时器，取消订阅消息解绑自定义事件等收尾工作。
}

1
2
3
4
5

destory

destoryed() {
	// 当前实例，视图层和逻辑层的关系解绑
	// 例如计时器，dom事件监听器或者与服务器的连接
}

1
2
3
4
5
6

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

挂载： 父亲created > 子created > 子mounted > 父亲mounted >
更新： 父亲beforeUpdate > 子beforeUpdated > 子updated > 父亲updated
销毁： 父亲beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

1
2
3
4
5

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

keep-alive组件的钩子函数

deactivated

deactivated() {
	// 非激活
}

1
2
3
4
5

activated

activated() {
	// 激活 
}
// 保活的页面希望页面显示时立刻刷新页面的数据  比如购物车
// 保持活动，不会销毁，而是激活与非激活，点回去就是激活，点走就是非激活

1
2
3
4
5
6
7

使用场景：

// 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. 进入页面登录判断,管理员权限判断,浏览器判断


1
2
3
4
5
6
7
8
9
10
11
12
13

全局后置钩子afterEach

//  afterEach 被调用时，路由已经跳转完成，所以不需要 next 函数

router.afterEach((to,from)=>{
	
})

1
2
3
4
5
6
7

单个的路由钩子函数:beforeEnter

// 路由独享的守卫beforeEnter
// 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的
beforeEnter((to, from, next) => {
	.....
})

1
2
3
4
5
6
7

组件内的路由钩子函数:beforeRouteEnter beforeRouteLeave beforeRouteUpdate

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

beforeRouteEnter

beforeRouteEnter(to, from, next) {
	// 在渲染该组件的对应路由被confirm前调用
	// 不能获取组件实例 this
	// 因为当钩子执行时，组件实例还没有被创建
}

1
2
3
4
5
6
7

beforeRouteUpdate

beforeRouteUpdate(to, from, next) {
	// 在当前路由改变，但是组件被复用时调用
	// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候。
	// 由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	// 可以访问组件实例 this

}

1
2
3
4
5
6
7
8
9

beforeRouteLeave

beforeRouteLeave(to, from, next) {
	// 导航离开该组件的对应路由时调用
	// 可以访问组件实例 this
}

1
2
3
4
5
6

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

组件自定义指令中的钩子函数direction（v2.x）

• 对普通dom元素进行底层操作 Vue.directive('指令名称', {})

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

  
      Vue.directive('color', {
   	bind: function(el) { //el就是被绑定的元素
   		el.style.color = "red"
   	}
   })
  
  1
  2
  3
  4
  5
  6
  7

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

  
      Vue.directive('focus', {
   	inserted: function(el) {
   		el.focus()
   	}
   })
   
  1
  2
  3
  4
  5
  6
  7

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

  
        Vue.directive('color', {
   		update: function(el) {
   			el.style.color = "blue"
   		}
   })
   
  1
  2
  3
  4
  5
  6
  7

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

      Vue.directive('color', {
   	componentUpdated: function(el) {
   		el.style.color = "yellow"
   	}
   })
  1
  2
  3
  4
  5

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

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

组件自定义指令中的钩子函数direction（v3.x）

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

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

vue3.x生命周期钩子函数 (函数式开发)

import {defineComponent,ref,toRefs,watch,computed,onUpdated....} from 'vue'
//setup函数替代了vuejs.2.x的beforeCreate和created钩子函数
1. onBeforeMount
onBeforeMount(()=>{
	// 在组件被挂载之前被调用，当这个钩子被调用时，组件已经完成其响应式状态的设置，但还没有创建DOM节点，即将首次执行DOM渲染过程。
	 
})  

1
2
3
4
5
6
7
8
9

onMounted

onMounted(()=>{
	// 在组件被挂载之前被调用，当这个钩子被调用时，组件已经完成其响应式状态的设置，但还没有创建DOM节点，即将首次执行DOM渲染过程。
	 
})

1
2
3
4
5
6

onBeforeUpdate

onBeforeUpdate(()=>{
	//在组件即将因为响应式状态变更而更新其DOM树之前调用，在beforeUpdate钩子函数执行时，组件的DOM还未更新，如果你想在组件更新前访问DOM，比如手动移除已添加的事件监听器，你可以注册这个钩子函数
})

1
2
3
4
5

onUpdated

onUpdated(()=>{
	//在组件因为响应式状态变更而更新其DOM树之后调用，父组件的更新钩子将在其子组件的更新钩子之后使用。 某些逻辑，最好不要使用updated钩子函数而用计算属性或watcher取而代之，因为任何数据的变化导致的组件更新都会执行updated钩子函数。注意：不要在updated钩子函数中更新数据，因为这样会再次触发组件更新，导致无限递归更新。父组件的更新不一定会导致子组件的更新，因为更新粒度是组件级别的。
})

1
2
3
4
5

onBeforeUnmount

onBeforeUnmount(()=>{
	// 在组件实例被卸载之前调用，当这个钩子被调用时，组件实列依然还保留全部的功能
})


1
2
3
4
5
6

onUnmount

onUnmounted(()=>{
   // 在组件实列被卸载之后调用，其所有子组件都已经被卸载。可以在这个钩子中手动清理一些副作用，例如计时器，dom事件监听器或者与服务器的连接
})

1
2
3
4
5

onErrorCapture

onErrorCaptured(()=>{
	// 注册一个钩子，在捕获了后代组件传递的错误时调用。
}) 

 
1
2
3
4
5
6