uniapp-vue3

• uniapp项目弊端：如果换文件夹或者重新导入uniapp项目不会自动识别为uniapp项目，需要右键文件夹重新识别项目类型

• 使用组合式+单文件组件+vue3来实现

ref

• ref参数一般是基本数据类型，亦可以是对象类型
• 参数是对象类型，本质还是reactive，系统会自动将ref转换为reactive，如 ref(1) ==> reactive({value:1})
• 在模板中访问ref中的数据，系统会自动添加.value,在JS中访问ref中的数据，需要手动添加.value
• ref的底层原理同reactive一样，都是Proxy
• ref中可以使用数组的reduce等方法

reactive

• reactive的参数一般是对象或者数组，能够使复杂数据变为响应式数据
• reactive的响应式是深层次的，底层本质是将传入的数据转换为Proxy对象
• 在JS中访问ref的值需要手动添加.value，访问reactive不需要

watch

• watch(name, (curVal, preVal)=>{ // 业务处理 }, options)
• name：需要帧听的属性
• (curVal,preVal)=>{ //业务处理 } 箭头函数，是监听到的最新值和本次修改之前的值，此处进行逻辑处理。
• options：配置项，对监听器的配置，如：是否深度监听。
• 监听多个响应式数据：watch([count,obj],()=>{})
• 监听对象中的某个属性的变化：watch(()=>obj.name,()=> {})
• 深度监听deep、默认执行immediate：watch(name,()=>{},{deep:true,immediate:true})

watchEffect

• 侦听器、副作用函数
• 监听引用数据类型的所有属性，一旦运行就会立即监听，组件卸载的时候会停止监听
• 在一些情况下，可以显式调用返回值以停止侦听
• 侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参，用来注册清理失效时的回调。
• 副作用即将重新执行时，失效回调会被触发
• 侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect，则在组件卸载时)，失效回调会被触发
• 如果要操作“更新之后的DOM”，就要配置 flush: ‘post’。

<script setup>	
	import { ref，watchEffect, computed, reactive, watch } from 'vue'
	// 定义一个变量，使用ref来存取变量的值
	const message = ref('Hello World!')
	//在js中通过.value来获取meaasge在ref中的值，并进行操作来更改message的值
	const isRed = ref(false)
	
	// reactive
	const stats = reactive({})
	
	// 定义props
	const props = defineProps({
		data: Array,
		title: String
		...
	})
	
	// emit
	const emit = defineEmits(['click'])
	
	// methods
	const add = () => {
		emit('click')
	}
	
	// 使用计算属性
	const output = computed(() => marked(input.value))
	
	// 该effect会立即运行，并且在变量更改时重新运行,可以加async变成异步的
	watchEffect(async () => {})

	// watch,要明确指明依赖的是那个变量，如count
	watch(count, (newValue) => {
		anotherCount.value = newValue - 1
	})
	
	// 生命周期， setup里面用on开头的生命周期函数
</script>

<template>
	// 在模板中直接使用变量名即可，不需要写.value,因为在模板中ref自动解包
	<view>{{message}}</view>
	
	// Attribute绑定 :名称
	对象中，变量名(值)与属性名(键)相同的话可以简写，只写其中一个
	对象中，类名可以通过布尔值来判断是否显示
	<view :class="{ red: isRed }" :style="{ color }" @click="可以放置函数名或简单表达式"></view>
	
	// 循环判断
	<ul v-if="">
		<li v-for="item in 列表" :key="index">{{item}}</li>
	</ul>
	<p v-else></p>
</template>