初步探索vue3之 ref 和 reactive

vue3中 对不同类型的数据处理使用不同的函数方法 基本数据类型使用ref 复杂数据类型使用reacive

ref

在vue3 中ref 是处理数据 需要引入使用
ref 可以将 基本的数据类型 通过一定的方式（Object.defineProperty） 变为响应式的（引用实例对象【RefImpl】）
如果在js 中操作数据 要使用 .value
如果是 复杂数据类型将会使用reactive
需要注意的是 需要 return 出去才可以使用

import { ref ,reacive} from "vue";

export default {
	name: "HelloWorld",
	setup() {
		let name = ref("张三");
		let msg = ref("hello");
		function (){
			name.value = '李四'
		}
		return {
			name,
			msg,
		};
	},
};

reacive

定义一个复杂数据类型的数据 不推荐用来定义基本数据类型
会通过Proxy 将数据修改为 响应式数据
修改数据时 可直接修改

export default {
	name: "HelloWorld",
	
	setup() {
		let name = ref("张三");
		let msg = ref("hello");
		let obj = reactive({
			age: 18,
			b: {
				c: {
					d: 23,
				},
			},
		});
		return {
			name,
			obj,
			msg,
		};
	},
};

toRef 和 toRefs

toRefs 和 toRef 功能一致 但可以批量创建多个ref 对象 返回值是一个对象

setup(){
	let name = ref("张三");
		let msg = ref("hello");
		let obj = reactive({
			age: 18,
			b: {
				c: {
					d: 23,
				},
			},
		});
		return {
			toRef(obj.age),
			...toRefs(obj),
			msg,
		};
}

shallowReactive 与 shallowRef

shallowReactive 只处理对象最外层属性的响应式（浅响应）
enter

shallowRef 只处理基本数据类型的响应式 不进行复杂数据类型的响应式处理

readonly 与 shallowReadonly

readonly 让一个响应式数据变为只读的(深只读)
shallowReadonly 让一个响应式数据变为只读的(浅只读)

toRaw 与 markRaw

toRaw 将一个由reactive 生成的 响应式数据 转为 普通对象（如果改变数据不想引起页面变化的时候）
markRaw 标记一个对象使其永远不会再成为响应式对象（当渲染大量不可变数据时 跳过响应式可以提高性能）

customRef

自定义ref

官网案例