学习：入门uniapp Vue3组合式API版本（6）

1.侦听器 | Vue.js

vue3中computed计算属性和watch监听的异同点_vue3计算属性和监听属性的区别-CSDN博客

<script setup>
	import {
		ref,
		watch,
		watchEffect
	} from 'vue';

	const person = ref({
		name: "张三",
		age: 23
	})

	// watch(() => person.value.name, (newValue) => {
	// 	console.log(newValue)
	// })

	// 深度
	watch(person, (newValue) => {
		console.log(newValue);
	}, {
		deep: true,
		immediate: true
	})
	
	const firstName = ref("ABC")
	const lastName = ref("EF")
	const fullName = ref()
	// 监听两个
	// watch([firstName, lastName], ([NfirstName, NlastName], [OfirstName, OlastName]) => {
	// console.log(NfirstName, NlastName)
	// })
	//分开监听（建议
	// watch(firstName, (NfirstName, OfirstName) => {
	// 	console.log(NfirstName)
	// })
	watchEffect(()=>{
		console.log(firstName.value,lastName.value)
	})
</script>
<template>
	<view class="out">
		<input type="text" v-model="person.name" />
	</view>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入名..." />
		<input type="text" v-model="lastName" placeholder="请输入姓..." />
	</view>
</template>
<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative; //相对定位

		input {
			border: 1px solid #000000;
			height: 40px;
			background-color: white;
			position: relative;
			z-index: 2; //层级为2，高
			padding: 0 10px;
			margin-top: 10px;
		}
	}
</style>

展示：

2. 

HbuilderX配置Git插件并导入项目和上传代码_hbuilderx仓库怎么上传-CSDN博客

 uniappV3Demo1

2. 组件基础 | Vue.js

uni-app官网

 对比

传递props 

Props | Vue.js

props校验与props默认值

index.vue 

<template>
	<view class="userinfo">
		<!-- 		<image :src="avatar" mode="" class="avatar"></image>
		<view class="username">{{username}}</view> -->
		<image :src="obj.avatar" mode="" class="avatar"></image>
		<view>{{obj.name}}</view>
	</view>
</template>
<script setup>
	import {
		computed
	} from "vue";
	// const props = defineProps(['username', 'avatar'])
	//从父接收值
	//第二种写法格式
	// const props = defineProps({
	// 	username: {
	// 		type: String,
	// 		default: "匿名",
	// 	},
	// 	avatar: {
	// 		type:String,
	// 		default: "../../static/logo.png",
	// 	}
	// })

	// console.log(props.username)
	// const myname=computed(()=>props.username + "@")
	// const props = 
	defineProps({
		obj: {
			type: Object,
			default () {
				return {
					name: "匿名",
					avater: "../../static/logo.png"
				}
			}
		}
	})
</script>
<style lang="scss" scoped>
	.userinfo {
		width: 100%;
		height: 200px;
		background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}

		.usename {
			padding: 10px;
			font-size: 20px;
		}
	}
</style>

UserInfo.vue

<template>
	<view class="content">
		<!-- 	<UserInfo username="张三" avatar="../../static/pic1.webp"></UserInfo>
		<UserInfo  avatar="../../static/pic2.jpg"></UserInfo>
		<UserInfo :username="name" ></UserInfo> -->

		<!-- <UserInfo :obj="{a:1,b:2}"></UserInfo> -->
		<!-- <UserInfo :obj="userinfo"></UserInfo> -->
		
		<UserInfo v-for="(item,index) in userinfo" :key="index" :obj="item"></UserInfo>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	// const name = ref("王五")
	const userinfo = ref([{
		name: "张三",
		avatar: "../../static/pic1.webp"
	}, {
		name: "李四",
		avatar: "../../static/pic2.jpg"
	}, {
		name: "王五",
		avatar: "../../static/pic3.png"
	}])
</script>
<style lang="scss" scoped>

</style>

展示：

3.插槽 Slots | Vue.js

demo1

<script setup>
</script>
<template>
	<view>
		<layout>
			<!-- <view class="row" v-for="item in 20">每一行{{item}}</view> -->
			<template v-slot:header>
				头部
			</template>
			<template #main>
				中间
			</template>
		</layout>
	</view>
</template>
<style lang="scss" scoped>
</style>

layout

<script setup>

</script>
<template>
	<view class="layout">

		<view class="header">
			<slot name="header"></slot>
		</view>
		<view class="main">
			<slot name="main"></slot>
		</view>
		<view class="footer">
			footer区域
		</view>

	</view>
</template>
<style lang="scss" scoped>
	.layout {
		.header {
			height: 100px;
			background-color: #cfcfcf;
		}

		.main {
			min-height: 200px;

		}

		.footer {
			height: 120px;
			background-color: orange;
		}
	}
</style>

展示：

4. 组件事件 | Vue.js

demo3

<script setup>
	import {
		ref
	} from 'vue';

	const num = ref()
	const color = ref('#fff')
	const onAdd = function(e) {
		console.log(e);
		num.value = e
		color.value = '#' + String(e).substring(3, 7)
	}
	
		const size = ref(12)
	const onChange = function(e) {
		 size.value=e;
	}

</script>
<template>
	<view>
		<uni-icon @add="onAdd" @change="onChange"></uni-icon>
		<view class="box" :style="{background:color,fontSize:size+'px'}">number:{{num}}</view>
	</view>

</template>
<style lang="scss" scoped>
	.box {
		width: 200px;
		height: 200px;
	}
</style>

 uni-icon

<template>
	<view>
		子组件
		<!-- 1 -->
		<button @click="$emit('add',Math.random())">按钮</button>

		<!-- 2 -->
		<button @click="onClick">按钮</button>


		<input type="text" @input="onInput" />
	</view>
</template>

<script setup>
	const emit = defineEmits(["add", "change"])

	function onClick() {
		emit("add", Math.random())
	}




	function onInput(e) {
		emit("change", e.detail.value)
	}
</script>

<style lang="scss">
	input {
		border: 1px solid #cfcfcf;
		height: 40px;
	}
</style>

展示： 

5. 生命周期钩子 | Vue.js

demo4

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const show = ref(true)
	const scroll = ref(null)
	onMounted(() => {
		console.log(scroll.value)
	})
	setTimeout(() => {
		show.value = false
	}, 2000)
</script>
<template>
	<view class="layou">
		<scroll-view scroll-y="true" class="scroll" ref="scroll">
			<view></view>
		</scroll-view>
		<life-demo v-if="show"></life-demo>
	</view>
</template>
<style lang="scss" scoped>

</style>

life-demo

<template>
	<view>
		子组件
	</view>
</template>

<script setup>
	import {
		onUnmounted
	} from 'vue';

	onUnmounted(() => {
		console.log("子组件被卸载了");
	})
</script>

<style lang="scss" scoped>

</style>

 展示：

6. <script setup> | Vue.js

defineExpose() 

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。 

 demo5

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	const child = ref(null);
	
	const update = function() {
		child.value.updateCount()
	}

	onMounted(() => {
		console.log(child.value);
	})
</script>
<template>
	<view class="">
		<demo-child ref="child"></demo-child>
		<view>-------------</view>
		<button @click="update"> 点击修改子元素的子值</button>
	</view>
</template>
<style lang="scss" scoped>

</style>

demo-child

<script setup>
	import {
		ref
	} from 'vue';

	const count = ref(100)
	const updateCount = function() {
		count.value++
	}
	defineExpose({
		count,
		str: "abc",
		updateCount
	})
</script>
<template>
	<view class="out">
		子组件count值：{{count}}
	</view>
</template>
<style lang="scss" scoped>
.out{
	padding: 20px;
	background-color: #eee;
}
</style>

展示：

7. 页面onLoad | uni-app官网

<script setup>
	</script>
<template>
	<view class="">
		<navigator url="/pages/demo6/demo6?name=王五&age=20">跳转到demo6</navigator>
	</view>
</template>
<style lang="scss" scoped>
</style>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,onReady
	} from "@dcloudio/uni-app"
	const name = ref("张三")
	const age =ref(18)
	const scroll=ref(null)
	onLoad((e) => {
		name.value = "李四";
		console.log("onload函数")
		console.log(e)
		console.log(scroll.value)
		name.value = e.name
		age.value=e.age
	})
	onReady((e)=>{
		console.log(scroll.value);
		console.log(e)
	})
		
	
</script>
<template>
	<view class="">
		姓名： {{name}}-{{age}}
	</view>
</template>
<style lang="scss" scoped>

</style>

展示：

 JavaScript 计时事件 | 菜鸟教程

setInterval()方法 间隔指定的毫秒数不停地执行指定的代码

<script setup>
	import {
		onBeforeMount,
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
	} from "@dcloudio/uni-app"
	const name = ref("张三")
	const age = ref(18)
	const scroll = ref(null)
	const count = ref(0)
	onLoad((e) => {
		name.value = "李四";
		console.log("onload函数")
		console.log(e)
		name.value = e.name
		age.value = e.age
	})
	onReady((e) => {
		console.log("onReady函数")
	})
	onShow(() => {
		console.log("onShow函数")
		time = setInterval(() => {
			count.value++;
		}, 50)
	})
	onHide(() => {
		console.log("onHide函数")
		clearInterval(time)
	})
	onMounted(() => {
		console.log("onMounted函数")
	})
	onBeforeMount(() => {
		console.log("onBeforeMount函数")
	})
	let time = setInterval(() => {
		count.value++;
	}, 50)
</script>
<template>
	<view class="">
		姓名： {{name}}-{{age}}
	</view>
	<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
	<view>--------</view>
	<view>计数：{{count}}</view>
</template>
<style lang="scss" scoped>

</style>

展示：