Vue3的基础API使用

前端小白一枚，由于没有vue3的项目开发，自己学习的vue3还总是忘记，所以特地整理一篇自用api使用，所有资料都来自于vue3的官网。

以下的ts语言都在setup语法糖中书写

Ref

创造一个由Ref对象处理后的响应式数据

	import { ref } from 'vue'
	let count = ref(0)
	// 涉及到ref的数据修改，都需要通过数据.value来更改
	count.value = 4
	// 如果需要ts类型限制像下面这样书写
	const age = ref<number>(22)

通常只用于基本数据类型，引用数据类型还是用reactive比较方便
也可以用ref获取html

	import { ref } from 'vue'
	const divHTML = ref<HTMLElement>(null)
	// 同样，如果你想获取数据，也需要用.value
	let text = divHTML.value.innerText()
	//-----------------------------------
	<div ref="divHTML">需要获取的ref</div>

Reactive

创造一个由Proxy对象处理的响应式数据

	import { reactive } from 'vue'
	const person = reactive({
		age: 22,
		name: '张三'
	})
	// 修改数据可以直接修改
	person.age = 24
	// 如需用ts类型限制
	interface Star {
		age: number,
		name: string
	}
	const star: Star = reactive({
		age: 22,
		name: 'cxk'
	})

defineProps

父向子传参的一种方式，数据同样是Proxy对象处理
在setup语法糖中，不需要去引入这个方法，define开头的api都不需要引入

	// 传参方式和vue2一样
	<sonComponent :age="13"></sonComponent>
	// 子组件接受
	defineProps({
		age: {
			type: Number,
			required: true,
		},
		name: {
			type: String,
			default: '暂无'
		}
	})
	// 使用直接age，name就可以了，也可以使用变量来接受
	// 如需使用ts类型限制，就很方便
	interface Props {
		age：number,
		name?: string
	}
	const props = defineProps<Props>()

当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决

export interface Props {
  	msg?: string
  	labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

每天补充点