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不会对 对象类型数据做响应式

• readonly : 只读【将响应式数据保护起来，只读不可修改,深层只读】

...
<script>
import {ref,reactive,readonly,shallowReadonly} from 'vue'
export default {
	setup(){
		let person = reactive({
			name:'张三',
			age:12,
			a:{
				b:'测试'
			}
		})
		// 通过readonly把person保护起来，不允许修改
		person = readonly(person)	
		return {
			person
		}
		// 浅层保护，只保护name，age不被修改
		person = shallowReadonly(person)
	}
}
</script>

• shallowReadonly：【浅层只读保护】,即只保护第一层，如上面的person对象，只保护 name，age不可修改

• toRow：将reactive生成的响应式对象逆转为普通对象。【数据可修改，但不再是响应式，不会被监听到】

• markRow：标记一个对象，使其永远不会成为响应式。

使用场景：
1、有些值不应该被修改，例如有些第三方库
 2、当渲染变有不可变数据源的大列表数据时，可以提高性能

• customRef()：自定义ref

规定customRef接收一个函数回调，并且必须指定两个参数 trick，trigger