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" }