VUE 钩子函数_vue八个钩子函数

“Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数。”

引用知乎 SpiritTracks  作者的话 “ 就是在生命周期执行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数，很形象的，钩子钩子，挂载我们自己的东西”   我感觉说的很道理

那么vue的 钩子函数都有那些呢

一、生命周期钩子函数

　　（1）beforeCreate（）       实例创建前触发

　　（2）created（）                实例创建完成，

　　（3）beforeMount（）        模板渲染前，可以访问数据，模板编译完成，虚拟DOM已经存在

　　（4）mounted（）              模板渲染完成，可以拿到DOM节点和数据

　　（5）beforeUpdate（）      更新前

　　（6）updated（）               更新完成

　　（7）activated（）         　 激活前

　　（8）deactivated（）         激活后

　　（9）beforeDestroy（）　 销毁前

　　（10）destroyed（）　　  销毁后

二、自定义指令directives的钩子函数

　　（1）bind（）         绑定指令到元素上，只执行一次。

　　（2）inserted（）   绑定了指令的元素插入到页面中展示时调用，很常用。

　　（3）update（）　 所有组件节点更新时调用

　　（4）componentUpdated    指令所在的节点及其子节点全部更新完成后调用。

　　（5）unbind（）    解除指令和元素的绑定，只执行一次。

三、路由导航 / 路由守卫  钩子函数

　　（1）全局守卫

　　　　①前置：router.beforeEach（(to,from,next)=>{  }）

　　　　②后置：router.afterEach（(to,from)=>{  }）

　　（2）路由独享守卫

　　　　beforeEnter:（to,from,next)=>{   }

　　（3）导航守卫

　　　　①beforeRouteEnter（to,from,next）{   }

　　　　②beforeRouteLeave（to,from,next）{  }

广义上来说，watch、computed这些也属于钩子函数，watch是在监控的数据变化时就会自动执行对应的方法，而computed是在数据变化时再次计算数据。

引用： vue的钩子函数 – kangyouwei – 博客园 (cnblogs.com)

今天的文章VUE 钩子函数_vue八个钩子函数分享到此就结束了，感谢您的阅读。