uniapp5组件的使用、组件的生命周期

在主目录下创建components ，记得要和pages同级哦！

然后直接右键创建组件，把它引入到你想引入的页面

注意：创建组件时，不要用uniapp定义的组件名，比如text,view,image等

组件引入完成。

组件的生命周期 

uni-app 组件支持的生命周期与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

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

 在组件页面写组件的生命周期

注意：微信小程序中没有 document.getElementById('myview')

<template>
	<view>
		这是test组件··
		<view id="myview">
			给它引入到通讯录中{{num}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "test",
		data() {
			return {
				num: 3,
				dingshiqi: null
			};
		},
		// 实例已经开始初始化了，但是数据还没有初始化完成，包括页面也没有开始渲染
		beforeCreate() {
			console.log('实例已经开始初始化了')
			console.log(this.num) //undefined		
		},
		// 可以拿到数据，包括被定义的方法
		created() {
			console.log('实例已经创建完成了')
			console.log(this.num) //3	
			// 给定时器赋值为空组件在销毁时，就不会再执行定时器
			this.dingshiqi = setInterval(() => {
				console.log('1秒钟执行一次定时器')
			}, 1000)
		},
		// 数据能够渲染在页面上，组件还没有
		beforeMount() {
			// console.log('beforeMount', document.getElementById('myview'))
			console.log(this.num) //3	
		},
		// 组件渲染到页面上
		mounted() {
			// console.log('mounted', document.getElementById('myview'))
			console.log(this.num) //3	
		},
		destroyed() {
			console.log('destroyed组件销毁')
			// 在组件销毁时，清除定时器
			clearInterval(this.dingshiqi)
		}
	}
</script>

<style>

</style>

 在引入组件的页面

<template>
	<view>
		<test v-if="flag"></test>
		<button type="primary" @click="qiehuan" v-if="!flag">显示test组件</button>
		<button type="primary" @click="qiehuan2" v-if="flag">隐藏test组件</button>
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				flag:true
			}
		},
		components:{test},
		methods: {
			qiehuan(){
			 this.flag=true
			},
			qiehuan2(){
				this.flag=false
			}
		}
	}
</script>

<style>

</style>