uni-app中组件的创建和生命周期

uni-app中组件的创建

  在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

1.创建test组件，在项目中创建components目录，然后新建test.vue文件

<template>
	<view id="myView">
		这是test组件
	</view>

</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				name: 'test哦哦',
				testInteral: null, //test组件定时器
			};
		},
		beforeCreate() {
			console.log('beforeCreate', this.name);
		},
		created() {
			console.log('created', this.name);
			this.testInteral = setInterval(()=>{
				console.log('1');
			}, 1000)
		},
		beforeMount() {
			console.log('beforeMount', document.getElementById('myView'))
		},
		mounted() {
			console.log('mounted', document.getElementById('myView'))
		},
		destroyed() {
			console.log('组件被销毁了')
			clearInterval(this.testInteral);
		}
	}
</script>

<style>

</style>

2.在其他组件中导入该组件并注册

	import test from '../../components/test.vue'

3.注册组件

	components:{
			test
		}

4.使用组件

 <test v-if="flag"/>

5.组件的生命周期函数

  组件的生命周期函数和vue一样

beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

  查看test组件的生命周期：这里我们没有写beforeUpdate ，updated ，beforeDestroy ，主要是常用的生命周期函数。

  点击控制test组件显示隐藏按钮，打印如下：