uni-app组件生命周期

其实学过vue和小程序的人再来看uni-app真的会非常简单 其实他就是两种语法的融合
uni-app新增了整个应用程序的生命周期
延用了小程序组件和单页面都有自己不同的生命周期的做法
但有延用了 vue 单个vue文件即为一个组件 也可以是单独页面的特性
页面生命周期更像是小程序的生命周期写法 而组件的生命周期则更像vue2的生命周期函数
小看单页面生命周期的可以阅读我之前的文章
https://blog.csdn.net/weixin_45966674/article/details/121668692?spm=1001.2014.3001.5502

那么我们先来建一个组件

在pages下新建一个文件夹用来存放组件 然后我们在这文件夹下建一个vue文件用来当组件
然后我们 在需要用这个组件的vue文件中通过导入的方法引进来

import text from "../assembly/assembly.vue"

和vue一样我们需要在components中声明该页面用的所有组件

components:{
    assembly: text
},

然后即可在页面中使用组件标签

<assembly></assembly>

下面我们来看一下uni-app组件的生命周期
第一个就是beforeCreate
实例开始初始化时执行 这是还拿不到data和页面元素 相对这个声明周期个人觉得并不是很常用
第二个则是created
页面初始化完成时会执行的声明周期函数 可以获取到data中的响应式数据，通常我们会在这里做请求数据和数据绑定的操作，但这个声明周期是不能获取页面元素的因为 组件还没开始挂在元素
第三个则是beforeMount
组件挂在在页面之前要执行的生命周期 老实说 用的比较少
第四个是mounted
组件挂在完成后执行的生命周期函数，相对做可视化之类比较常用的生命周期 因为这个函数是能获取到页面元素的
第五个是beforeUpdate
当data中的响应式数据发生变化时触发
第六个是updated
当数据发生变化后先触发beforeUpdate然后响应式数据会让页面重新渲染，然后渲染完成则执行updated
这两个生命周期挺实用的
第七个就是beforeDestroy
当组件开始销毁时触发的生命周期
最后一个就是destroyed
组件销毁完成后执行的生命周期

可以先在父组件中用v-if让组件销毁 听不懂的建议去vue官网好好看一下v-if
v-if在uni-app中也是非常常用的渲染判断语句
组件生命周期参考代码如下

<template>
	<view @click="setname">{{ name }}</view>
</template>

<script>
	export default {
		data() {
			return {
				name: 'uni-app组件应用'
			}
		},
		beforeCreate(){
			console.log('实例开始初始化');
		},
		created(){
			console.log('组件初始化完成');
		},
		beforeMount(){
			console.log('准备开始挂在页面元素');
		},
		mounted(){
			console.log('组件挂在完成');
		},
		beforeUpdate(){
			console.log('数据发生变化');
		},
		updated(){
			console.log('数据渲染完成');
		},
		beforeDestroy(){
			console.log('组件开始销毁')
		},
		destroyed(){
			console.log('组件已被销毁')
		},
		methods: {
			setname(){
				this.name = "数据修改渲染"
			}
		}
	}
</script>

<style>
</style>