初步探索vue3之 ref 和 reactive

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

ref

import { ref ,reacive} from "vue";

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

reacive

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

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

readonly 与 shallowReadonly

toRaw 与 markRaw

customRef

官网案例