vue的生命周期钩子函数怎么应用

发布时间:2022-03-16 11:03:57 作者:iii
来源:亿速云 阅读:235

本篇内容介绍了“vue的生命周期钩子函数怎么应用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在vue中,生命周期钩子函数指的是当生命周期经历创建和更新DOM的过程中,会在其中运行的一些函数;在这些函数内部可以创建和声明vue组件。

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。

什么是vue的生命周期钩子函数

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

Vue 有八种生命周期方法:

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

// 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>
h4 {
 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 实例初始化后立即被调用。

<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 实例已经初始化,并且已经激活了计算属性、观察者、事件、数据属性和随之而来的操作。

<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、元素属性仍然不可用。

<script>
export default {
  beforeMount() {
    alert('beforeMount is called')
  }
}
</script>

mounted()

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

<script>
export default {
  mounted() {
    alert('mounted has been called'); 
   }
}
</script>

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

beforeUpdate()

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

<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 已经专门为此提供了平台。

<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 实例被销毁之前,实例和所有函数仍然完好无损并在此处工作。在这个阶段你可以执行资源管理、删除变量和清理组件。

<script>
export default {
name: 'Test',
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

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

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

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

“vue的生命周期钩子函数怎么应用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. Vue生命周期钩子函数
  2. Vue的钩子函数[路由导航、keep-alive、生命周期钩子]

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue3.0中的h函数是什么意思

下一篇:php涉及的CSS英文单词有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》