通过与 Jira 对比,让您更全面了解 PingCode

  • 首页
  • 需求与产品管理
  • 项目管理
  • 测试与缺陷管理
  • 知识管理
  • 效能度量
        • 更多产品

          客户为中心的产品管理工具

          专业的软件研发项目管理工具

          简单易用的团队知识库管理

          可量化的研发效能度量工具

          测试用例维护与计划执行

          以团队为中心的协作沟通

          研发工作流自动化工具

          账号认证与安全管理工具

          Why PingCode
          为什么选择 PingCode ?

          6000+企业信赖之选,为研发团队降本增效

        • 行业解决方案
          先进制造(即将上线)
        • 解决方案1
        • 解决方案2
  • Jira替代方案

25人以下免费

目录

vue的生命周期函数(钩子函数)

在vue中,生命周期钩子函数指的是当生命周期经历创建和更新DOM的过程中,会在其中运行的一些函数;在这些函数内部可以创建和声明vue组件。每个 Vue 实例都经过一系列初始化步骤。

一、vue的生命周期函数(钩子函数)

在vue中,生命周期钩子函数指的是当生命周期经历创建和更新DOM的过程中,会在其中运行的一些函数;在这些函数内部可以创建和声明vue组件。每个 Vue 实例都经过一系列初始化步骤。

从创建时设置数据到编译模板,将实例装载到DOM,最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期,在默认情况下,当它们经历创建和更新 DOM 的过程中,会在其中运行一些函数,在这些函数内部创建并声明 Vue 组件,这些函数称为生命周期钩子。

Vue 有八种生命周期方法:

  • Before create
  • Created
  • Before mount
  • Mounted
  • Before update
  • Updated
  • Before destroy
  • Destroyed

在本文中,你将了解所有的这些钩子,并学习其每个阶段的案例。

本文将使用测试组件,它位于 src 文件夹内的 components 文件夹中。它应该看起来像这样:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // src/components/Test.vue <template>  <div>  </div> </template> <script> export default {  name: ‘Test’,  props: {   msg: String  } } </script> <! — Add “scoped” attribute to limit CSS to this component only → <style scoped> h3 {  margin: 40px 0 0; } ul {  list-style-type: none;  padding: 0; } li {  display: inline-block;  margin: 0 10px; } a {  color: #42b983; } </style>

在本教程中,脚本部分将单独用于各种钩子案例。

beforeCreate()

这是在 Vue.js 中调用的名列前茅个生命周期钩子,它在 Vue 实例初始化后立即被调用。

1 2 3 4 5 6 7 8 9 <script> export default {   name: ‘Test’,   beforeCreate() {     alert(‘beforCreate hook has been called’);     console.log(‘beforCreate hook has been called’);   } } </script>

你可以在开发环境中运行程序来检查界面。

npm run serve

注意,在加载组件之前,首先执行的是在生命周期钩子中写入的 alert 语句。这正是函数在 Vue 引擎创建应用程序组件之前调用的表现。此时正处在 beforeCreate 阶段,尚未设置计算属性、观察者、事件、数据属性和操作等内容。

created()

正如你所猜测的那样,这是在 beforeCreated 钩子之后立即调用的第二个生命周期钩子。在这个阶段,Vue 实例已经初始化,并且已经激活了计算属性、观察者、事件、数据属性和随之而来的操作。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> export default {   name: ‘Test’,   data() {     return {       books: 0     }     },   created() {     alert(‘Created hook has been called’);     console.log(`books is of type ${typeof this.books}`);   } } </script>

如果你运行该程序,你将会发现现在可以显示数据类型。着在 beforeCreated 阶段是不可能的,因为这时发生的激活还没有发生。但是 Vue 实例在此阶段尚未安装,因此你无法在此处操作 DOM,元素属性尚不可用。

beforeMount()

这是在 DOM 上挂载实例之前的那一刻,模板和作用域样式都在这里编译,但是你仍然无法操作DOM、元素属性仍然不可用。

1 2 3 4 5 6 7 <script> export default {   beforeMount() {     alert(‘beforeMount is called’)   } } </script>

mounted()

这是在 beforeMounted 之后调用的下一个生命周期钩子。在安装实例后会立即调用它。现在 app 组件或项目中的其他组件都可以使用了。现在可以进行数据适合模板、DOM元素替换为数据填充元素之类的操作了,元素属性现在也可以使用了。

1 2 3 4 5 6 7 <script> export default {   mounted() {     alert(‘mounted has been called’);    } } </script>

这是使用 Vue CLI 创建的项目的默认位置,因为正如我们在开头看到的那样,已经在 main.js 文件中完成了安装。这就是你有可能无法使用其他挂钩的原因,因为默认情况下已经为你安装了实例。

beforeUpdate()

在这里对需要更新 DOM 的数据进行更改。在进行删除事件侦听器之类的更改之前,此阶段适合任何逻辑。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <template>  <div> {{hello}}  </div> </template> <script>  export default {   name: ‘Test’,   data() {    return {     books: 0,     hello: ‘welcome to Vue JS’    }  }, beforeUpdate(){  alert(‘beforeUpdate hook has been called’); }, mounted(){  this.$data.hello= ‘lalalalallalalalalaalal’;  } } </script>

最初在 DOM 上有一个欢迎注释,但是在挂载阶段(可以操作DOM的地方),数据会发生变化,因此beforeUpdate 的 alert 会在更改之前出现。

updated()

在对 DOM 更新之后立即调用此生命周期钩子,它在调用 beforeUpdate 挂钩之后执行。可以在此处执行与 DOM 相关的操作,但不建议更改此钩子内的状态,因为 Vue 已经专门为此提供了平台。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <template>  <div> {{hello}}  </div> </template> <script>  export default {   name: ‘Test’,   data() {    return {     books: 0,     hello: ‘welcome to Vue JS’    }   }, beforeUpdate(){  alert(‘beforeUpdate hook has been called’); }, updated(){  alert(‘Updated hook has been called’); }, mounted(){  this.$data.hello= ‘lalalalallalalalalaalal’;  } } </script>

beforeDestroy()

调用此 Vue 生命周期钩子的时机是在 Vue 实例被销毁之前,实例和所有函数仍然完好无损并在此处工作。在这个阶段你可以执行资源管理、删除变量和清理组件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> export default { name: ‘Test’,  data() {     return {       books: 0     }   },   beforeDestroy() {     this.books = null     delete this.books   } } </script>

destroyed()

这是 Vue 生命周期的最后阶段,其中所有的子 Vue 实例都已被销毁,事件监听器和所有指令之类的东西在此阶段已被解除绑定。在对象上运行 destroy 之后调用它。

1 2 3 4 5 6 7 8 <script> export default {   destroyed() {     this.$destroy()     console.log(this)   } } </script>

当你运行程序并查看控制台时,将看不到任何内容。

延伸阅读:

二、vue动态路由是什么意思

动态路由的理解

动态路由就是把匹配某种模式下的路由映射到同个组件中,其实本质就是通过url进行传参

比如说:有一个商品Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就需要用到动态路由了。

动态路由的配置

可以通过两种方式来传递动态参数:
(1)、params
(2)、query

注意:以下代码的演示都是在history的路由模式下

params方式的传参

配置路由的方式:使用冒号:绑定动态参数。

1 2 3 4 //index.js中配置路由信息 const routes = [{     path: ‘/goods/:id’,     component: Goods}]
相关文章