Vue3 composition API

• ref : 将基本类型包装为响应式(refImp对象，底层基于Object.definePropertype)
• reactive：将对象类型包装为响应式(基于Proxy)
• watch：监听
• watchEffect：全部监听（会自动监听函数体内用到的所有响应式变量）
• toRef(对象,对象属性)： 将一个非响应式变为响应式
  常用示例

<template>
	<div>
		<div>姓名:{{person.name}}</div>
		<div>年龄:{{person.age}}</div>
	</div>
</template>
<script>
export default {
	setup(){
		let person = reactive({
			name:'张三',
			age:18
		})
		//我们需要借助toRef
		let name = toRef(person,'name')
		let age = roRef(person,'age')
		return {
			/* 正常来说，我们需要如下导入时，上面模板字符串则应该写为person.name */
			// 下面的方式会导致数据失去响应式
			// person.name,
			// person.age
			// 此时我们就需要借助 toRef
			name,
			age
		}
		
	}
}
</script>

• toRefs(对象)：无需指定对象属性，自动将该对象的每个属性变成响应式，但只是一层

<template>
	<div>
		<div>姓名:{{person.name}}</div>
		<div>年龄:{{person.age}}</div>
	</div>
</template>
<script>
export default {
	setup(){
		let person = reactive({
			name:'张三',
			age:18
		})
		//我们需要借助toRef
		let name = toRef(person,'name')
		let age = roRef(person,'age')
		return {
			/* 正常来说，我们需要如下导入时，上面模板字符串则应该写为person.name */
			// 下面的方式会导致数据失去响应式
			// person.name,
			// person.age
			// 此时我们就需要借助 toRef
			name,
			age
		}
		
	}
}
</script>

• computed 计算属性
• shallowReactive : 浅层次的响应式对象，只处理对象的第一层，不常用。reactive是深层次的响应式对象
• shallowRef：不对对象类型的数据做响应式处理，不常用

ref 和 shallowRef的区别在于: 如果ref对 对象类型数据做响应式处理时，底层会借助reactive去完成响应式。但shallowRef不会对 对象类型数据做响应式