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

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>