ref&shallowRef&customRef&toRef&toRefs&reactive理解

这里写自定义目录标题

      • 1.Ref 和ShallowRef的区别
        • 1.1Ref是深层次的响应原理,ShallowRef是浅层次的响应原理只监听一层;
        • 1.2 customRef的例子

1.Ref 和ShallowRef的区别

1.1Ref是深层次的响应原理,ShallowRef是浅层次的响应原理只监听一层;
		 import { ref, isRef, shallowRef, customRef, reactive, readonly } from "vue";
		 import type { Ref } from "vue";
		 type M = {
		   name: string;
		 };
		const Man3 = { name: 1 };
		const Man: Ref<M> = ref({ name: "小曼" });
		const sMan: Ref<M> = shallowRef({ name: "s小曼" });
		//shallowRef 浅层次的响应,只影响到.value
		//shallowRef若需要监听到第二层需要这么写:
		 sMan.value = {
		   name: "s阿曼",
		 }; //这样才有效果
		//ref深层次的响应
		//ref和shallowref不能一起写 不然会造成shallowref的更新(因为triggerRef()方法的影响)
		//ref 支持所有类型,reactive仅支持引用类型 object array map等
		//ref取值赋值都需要加.value 而reactive不需要加.value
		//reactive proxy 不能直接赋值 会破坏响应式对象的
		//解决方案 1.数组:使用push+解构;
		//toRef 只能修改响应式对象的值,非响应式的毫无变化
	
1.2 customRef的例子
				 function Myref<T>(value: T) {
					   return customRef((track, trigger) => {
					     return {
					       get() {
					         track();
					         return value;
					       },
					       set(newval) {
					         value = newval;
					         trigger();
					       },
					     };
					   });
				 }
				 const obj = Myref<string>("小曼");

你可能感兴趣的:(javascript,前端,typescript)