Vue.js:基础概念与生命周期

2023-05-17 12:55:39

Vue.js:基础概念与生命周期

Vue.js是一个流行的JavaScript框架,用于构建交互式用户界面(UI)。Vue.js的核心库仅关注视图层,但它可以轻松地与其他库或已有项目集成。

在Vue.js中,每个组件都具有其自己的生命周期钩子。在组件的生命周期中,Vue.js会在不同的时间点自动调用这些钩子函数。以下是关于Vue.js中生命周期的基础概念。

1.创建阶段(初始化阶段)
创建阶段中的钩子函数包括:beforeCreate(),created()。

2.挂载阶段
挂载阶段中的钩子函数包括:beforeMount(),mounted()。

3.更新阶段
更新阶段中的钩子函数包括:beforeUpdate(),updated()。

4.卸载阶段
卸载阶段中的钩子函数包括:beforeDestroy(),destroyed()。

Vue.js在组件被创建、挂载、更新和卸载的不同时间点调用这些钩子函数。这些函数提供了一个机会来对组件状态进行调整、查询和更新。深入了解这些钩子函数是构建高质量Vue.js组件的关键之一。

以下是一个示例组件,并展示了上述钩子函数的执行顺序:


<template>
<div>
{{ message }}
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
beforeCreate() {
console.log('组件实例创建前')
},
created() {
console.log('组件实例已创建')
},
beforeMount() {
console.log('挂载前')
},
mounted() {
console.log('已挂载')
},
beforeUpdate() {
console.log('更新前')
},
updated() {
console.log('已更新')
},
beforeDestroy() {
console.log('销毁前')
},
destroyed() {
console.log('已销毁')
}
}
</script>
  • 作者:
  • 原文链接:
    更新时间:2023-05-17 12:55:39