Vue生命周期钩子简介[每日前端夜话0x8A]
在本文中,我们来学习可用于 Vue JS 工作流程中的所有hooks。
Vue
Vue JS 是一个非常先进的 JavaScript 框架,由尤雨溪和 Vue 核心团队创建,超过 230 个开源社区爱好者贡献了代码。 Vue 的用户超过 870,000 人,并且已经 在 GitHub 上得到了140,000 个star 。它由一个仅关注视图层的核心库和对其提供支持的生态系统组成,可帮助你解决大型单页应用程序的复杂性问题。
在本文中,你将了解 Vue 实例从创建到销毁的整个生命周期。
在开始之前的准备工作
本文适用于所有使用 Vue JS 的开发人员,包括初学者。在阅读本文之前,你应该具备一些前提条件。
你将需要以下环境:
- 安装 Node.js v10.x 或更高版本。你可以通过在终端中运行以下命令来验证是否需要进行升级:
1node -v
安装 node package manager 6.7 或更高版本(NPM)
强烈建议使用代码编辑器:Visual Studio Code
把 Vue 的最新版本全局安装在你的计算机上
- 在你的计算机上安装 Vue CLI 3.0。安装前请先卸载旧的CLI版本:
1npm uninstall -g vue-cli
然后安装新的:
1npm install -g @vue/cli
下载 Vue Mixins 入门项目,在这里
解压缩下载的项目
- 切换到解压缩的文件目录并运行命令以使所有依赖项保持最新:
1npm install
Vue 实例
Vue 程序由用 new Vue 创建的根 Vue 实例组成,并组织成嵌套的可重用组件树。无论何时创建新的 Vue 项目,默认都会通过以下代码在 main.js 文件中激活Vue实例:
1new Vue({2 render: h => h(App),3 }).$mount(‘#app’)
这段代码表示包含应用程序组件的 Vue 实例,此语法与单文件应用等变体略有不同。
生命周期钩子
每个 Vue 实例都经过一系列初始化步骤。从创建时设置数据到编译模板,将实例装载到DOM,最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期,在默认情况下,当它们经历创建和更新 DOM 的过程中,会在其中运行一些函数,在这些函数内部创建并声明 Vue 组件,这些函数称为生命周期钩子。
来自Vue文档的生命周期图
Vue 有八种生命周期方法:
1.Before create
2.Created
3.Before mount
4.Mounted
5.Before update
6.Updated
7.Before destroy
8.Destroyed
在本文中,你将了解所有的这些钩子,并学习其每个阶段的案例。
本文将使用测试组件,它位于 src 文件夹内的 components 文件夹中。它应该看起来像这样:
1// src/components/Test.vue 2<template> 3 <div> 4 </div> 5</template> 6<script> 7export default { 8 name: ‘Test’, 9 props: {10 msg: String11 }12}13</script>14<! — Add “scoped” attribute to limit CSS to this component only →15<style scoped>1617h3 {18 margin: 40px 0 0;19}20ul {21 list-style-type: none;22 padding: 0;23}24li {25 display: inline-block;26 margin: 0 10px;27}28a {29 color: #42b983;30}31</style>
在本教程中,脚本部分将单独用于各种钩子案例。
beforeCreate()
这是在 Vue.js 中调用的第一个生命周期钩子,它在 Vue 实例初始化后立即被调用。
1<script>2export default {3 name: 'Test',4 beforeCreate() {5 alert('beforCreate hook has been called');6 console.log('beforCreate hook has been called');7 }8}9</script>
你可以在开发环境中运行程序来检查界面。
1npm run serve
将输出以下界面:
img
注意,在加载组件之前,首先执行的是在生命周期钩子中写入的 alert 语句。这正是函数在 Vue 引擎创建应用程序组件之前调用的表现。此时正处在 beforeCreate 阶段,尚未设置计算属性、观察者、事件、数据属性和操作等内容。
created()
正如你所猜测的那样,这是在 beforeCreated 钩子之后立即调用的第二个生命周期钩子。在这个阶段,Vue 实例已经初始化,并且已经激活了计算属性、观察者、事件、数据属性和随之而来的操作。
1<script> 2export default { 3 name: 'Test', 4 data() { 5 return { 6 books: 0 7 } 8 }, 9 created() {10 alert('Created hook has been called');11 console.log(`books is of type ${typeof this.books}`);12 }13}14</script>
如果你运行该程序,你将会发现现在可以显示数据类型。着在 beforeCreated 阶段是不可能的,因为这时发生的激活还没有发生。但是 Vue 实例在此阶段尚未安装,因此你无法在此处操作 DOM,元素属性尚不可用。
beforeMount()
这是在 DOM 上挂载实例之前的那一刻,模板和作用域样式都在这里编译,但是你仍然无法操作DOM、元素属性仍然不可用。
1<script>2export default {3 beforeMount() {4 alert('beforeMount is called')5 }6}7</script>
mounted()
这是在 beforeMounted 之后调用的下一个生命周期钩子。在安装实例后会立即调用它。现在 app 组件或项目中的其他组件都可以使用了。现在可以进行数据适合模板、DOM元素替换为数据填充元素之类的操作了,元素属性现在也可以使用了。
1<script>2export default {3 mounted() {4 alert('mounted has been called'); 5 }6}7</script>
这是使用 Vue CLI 创建的项目的默认位置,因为正如我们在开头看到的那样,已经在 main.js 文件中完成了安装。这就是你有可能无法使用其他挂钩的原因,因为默认情况下已经为你安装了实例。
beforeUpdate()
在这里对需要更新 DOM 的数据进行更改。在进行删除事件侦听器之类的更改之前,此阶段适合任何逻辑。
1<template> 2 <div> {{hello}} 3 </div> 4</template> 5<script> 6 export default { 7 name: 'Test', 8 data() { 9 return {10 books: 0,11 hello: 'welcome to Vue JS'12 }13 },14beforeUpdate(){15 alert('beforeUpdate hook has been called');16},17mounted(){18 this.$data.hello= 'lalalalallalalalalaalal';19 }20}21</script>
最初在 DOM 上有一个欢迎注释,但是在挂载阶段(可以操作DOM的地方),数据会发生变化,因此beforeUpdate 的 alert 会在更改之前出现。
updated()
在对 DOM 更新之后立即调用此生命周期钩子,它在调用 beforeUpdate 挂钩之后执行。可以在此处执行与 DOM 相关的操作,但不建议更改此钩子内的状态,因为 Vue 已经专门为此提供了平台。
1<template> 2 <div> {{hello}} 3 </div> 4</template> 5<script> 6 export default { 7 name: 'Test', 8 data() { 9 return {10 books: 0,11 hello: 'welcome to Vue JS'12 }13 },14beforeUpdate(){15 alert('beforeUpdate hook has been called');16},17updated(){18 alert('Updated hook has been called');19},20mounted(){21 this.$data.hello= 'lalalalallalalalalaalal';22 }23}24</script>
beforeDestroy()
调用此 Vue 生命周期钩子的时机是在 Vue 实例被销毁之前,实例和所有函数仍然完好无损并在此处工作。在这个阶段你可以执行资源管理、删除变量和清理组件。
1<script> 2export default { 3name: 'Test', 4 data() { 5 return { 6 books: 0 7 } 8 }, 9 beforeDestroy() {10 this.books = null11 delete this.books12 }13}14</script>
destroyed()
这是 Vue 生命周期的最后阶段,其中所有的子 Vue 实例都已被销毁,事件监听器和所有指令之类的东西在此阶段已被解除绑定。在对象上运行 destroy 之后调用它。
1<script>2export default {3 destroyed() {4 this.$destroy() 5 console.log(this)6 }7}8</script>
当你运行程序并查看控制台时,将看不到任何内容。
结论
你已经了解了 Vue JS 中的八个生命周期钩子以及在何时怎样使用它们。现在,你可以使用生命周期钩子在 Vue 实例生命周期的不同阶段添加我们的自定义逻辑,从而控制从创建到销毁的流程。这将加深你对 Vue JS 中常用功能背后的原理的理解。
原文:https://blog.logrocket.com/introduction-to-vue-lifecycle-hooks/
©著作权归作者所有:来自51CTO博客作者mb5ff980b461ced的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- 注册中心 Eureka源码解析 —— 应用实例注册发现 (九)之岁月是把萌
- 注册中心 Eureka 源码解析 —— 应用实例注册发现(一)之注册
- 注册中心 Eureka 源码解析 —— 应用实例注册发现(七)之增量获取
- 注册中心 Eureka 源码解析 —— 应用实例注册发现(六)之全量获取
- 注册中心 Eureka 源码解析 —— 应用实例注册发现 (四)之自我保护
- 注册中心 Eureka 源码解析 —— 应用实例注册发现 (三)之下线
- 数据会说谎的真实例子有哪些