一、组件生命周期概述
组件生命周期指的是，一个组件从创建到销毁整个过程所经历的各个阶段。Vue.js 框架、React 框架和uniapp框架都有生命周期。掌握组件生命周期是理解组件工作原理的关键。组件的生命周期可以分为四个阶段：创建、挂载、更新和销毁，每个阶段都有对应的生命周期函数，可以在特定阶段进行特定的操作。
<script>
export default {
name: 'myComponent',
created() {
console.log('组件创建')
},
mounted() {
console.log('组件挂载')
},
updated() {
console.log('组件更新')
},
destroyed() {
console.log('组件销毁')
}
}
</script>
在上面的代码中，我们定义了一个组件名为“myComponent”，并实现了该组件的四个生命周期函数，分别是创建阶段的created、挂载阶段的mounted、更新阶段的updated和销毁阶段的destroyed。每个生命周期钩子都有相应的方法，可以在特定的阶段做出响应。
二、uni-app组件生命周期钩子函数
1. 创建阶段
在组件创建阶段，会依次调用以下函数：
- beforeCreate：该函数在实例创建之前调用，此时实例的属性和方法均未初始化。这个阶段实例和元素都不存在。
- created：该函数在实例创建之后调用，此时实例的属性和方法已经被创建、但是元素还没有被渲染。这个阶段实例已经存在，但是 DOM 元素还没有，也就是你通过 this 或是 $el 还无法看到 html 结构。
<template>
<div>{{message}}</div>
</template>
<script>
export default {
beforeCreate() {
console.log("组件尚未创建")
},
created() {
console.log("组件已创建")
},
data() {
return {
message: 'Hello World!'
}
}
}
</script>
在上面这个例子中，我们定义了组件的模板和脚本。在beforeCreate函数中打印出"组件尚未创建"，在created函数中打印出"组件已创建"。因此，在beforeCreate函数中，组件和实例甚至此时都尚未创建，所以无法访问变量和方法。
2. 挂载阶段
在组件挂载阶段，会依次调用以下函数：
- beforeMount: 此函数在挂载开始之前被调用，并且所有的 render 函数和渲染的子组件已被首次调用或被更新。这个阶段可以访问到运行时生成的虚拟 DOM树。但是，这时的结构还没有被渲染成真正的 DOM 结构。
- mounted: 此函数在挂载完成后被调用，这时 DOM 元素已经挂载并渲染完毕。因此，在这个函数中可以访问到 DOM 元素，也可以进行一些 DOM 操作。
<template>
<div ref="box"></div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.box instanceof HTMLElement) // true
this.$refs.box.style.width = "100px"
}
}
</script>
在上面的代码中，我们定义了一个空的<div>元素，并通过 $refs 获取到 DOM 节点。在 mounted 函数中，我们利用 $refs.box 修改了该元素的 width 属性。
3. 更新阶段
在组件更新阶段，会依次调用以下函数：
- beforeUpdate: 此时组件数据已经完成更新，但是 DOM 尚未更新，因此在此阶段中可以进行更新前的数据操作。
- updated: 在此时组件的数据和渲染的 DOM 结构都已经完成了更新。
<template>
<button @click="counter++">{{ counter }}</button>
</template>
<script>
export default {
data() {
return { counter: 0 }
},
updated() {
console.log('更新后的计数器值为：' + this.counter)
}
}
</script>
在上面的代码中，我们定义了一个计数器按钮，每次点击都会让计数器的值加1.在 updated 函数中，即可得到更新后的计数器值。
4. 销毁阶段
在组件销毁阶段，会依次调用以下函数：
- beforeDestroy: 此时组件即将被销毁，但是 DOM 结构仍然存在。
- destroyed: 此时组件已经被销毁，并且 DOM 结构也不存在了。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return { message: 'Hello World!' }
},
destroyed() {
console.log('组件已被销毁')
}
}
</script>
在上面的代码中，我们定义了一个显示"Hello World!"的 <div> 元素。在 destroyed 函数中打印出组件已被销毁的信息。
三、uni-app组件生命周期实例
1. 创建阶段
<template>
<div>组件创建阶段</div>
</template>
<script>
export default {
beforeCreate() {
console.log('组件即将创建')
},
created() {
console.log('组件已经创建')
}
}
</script>
2. 挂载阶段
<template>
<div>组件挂载阶段</div>
</template>
<script>
export default {
beforeMount() {
console.log('组件即将挂载')
},
mounted() {
console.log('组件已经挂载')
}
}
</script>
3. 更新阶段
<template>
<button @click="counter++">{{ counter }}</button>
</template>
<script>
export default {
data() {
return { counter: 0 }
},
beforeUpdate() {
console.log("即将更新计数器")
},
updated() {
console.log("计数器已经更新")
}
}
</script>
4. 销毁阶段
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return { message: 'Hello World!' }
},
beforeDestroy() {
console.log('组件即将被销毁')
},
destroyed() {
console.log('组件已经被销毁')
}
}
</script>
总结
本文通过详细讲解uni-app组件的生命周期，从创建到销毁完全掌握了组件的整个生命周期。组件的钩子函数能够让我们在组件的生命周期中进行一些操作，比如在created函数中初始化数据，在mounted函数中访问DOM元素等。掌握uni-app组件的生命周期，有助于我们更好地理解组件的工作原理，并能够更好地应用uni-app框架进行开发。
