2020-10-04

Vue中的钩子函数都有哪些？

1：生命周期钩子函数

（1）初始化级阶段：

  beforeCreate   获取不到数据，没有真实DOM
  created        获取到数据，没有真实DOM
  beforeMount    获取到数据，真实DOM马上生成
  mounted        获取到数据，真实DOM生成

（2）运行阶段：

  beforeUpdate   数据更新时调用，获取到的是更新之前的数据
  Updated        数据更新是调动，获取到的是更新之后的数据

（3）销毁阶段：

  beforeDestroy  销毁前，一般在这里做一些善后工作，例如清除计时器、清除非     指令绑定的事件等等
  destroyed      已经销毁了，生命周期结束了 停止监听

2：keep-alive动态组件钩子函数

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

3：自定义指令钩子函数

  bind               只调用一次，指令第一次绑定到元素时调用，这个钩子函数可以定义一个在绑定是执行一次的初始化动作
  
  inserted           被绑定元素插入父节点时调用（父节点存在即可调用）。
  
  update             所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前，指令的值可能发生改变了，也可能没有，
                     但是你可以通过对比更新前后的值来忽略不必要的模板更新
                     
  componentUpdated   指令所在组件的 VNode 及其子 VNode 全部更新后调用
  
  unbind             只调用一次，指令与元素解绑时调用

4：路由守卫钩子函数

（1）全局路由钩子：

	//全局的前置路由守卫
		router.beforeEach((to,from,next) => {
		  //会在任意路由跳转前执行，next一定要记得执行，不然路由不能跳转了
		console.log("beforeEach")
		console.log(to,from)
		next()
   })

	//全局后置路由守卫
		router.afterEach((to,from) => {
			//会在任意路由跳转后执行
			console.log("afterEach")
		})

（2）单个路由钩子：

     只有beforeEnter，在进入前执行，to参数就是当前路由

	routes:[
		{
			path:'/foo',
			component:Foo,
			beforeEnter:(to,from,next) => {
			//.......
			}
		}
	]

（3）路由组件钩子：

   beforeRouteEnter(to,from,next){
   	//在渲染该组件的对应路由被  confirm 前调用
   	//不能  获取组件实例 "this"
   	//因为当守卫执行前，组件实例还没被创建
   },
   beforeRouteUpdate(to,from.next){
   	//在当前路由改变，但是该组件被复用时调用
   	//举例来说，对于一个带有动态参数的路径，/foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候，
   	//由于会渲染同样的Foo 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用
   	//可以访问组件实例 "this"
   },
   beforeRouteLeave(to,from,next){
   	//导航离开该组件的对应路由时调用
   	//可以访问组件实例  "this"
   }