vue文档细读：Refs

度过了神奇的几天，我又回来了

ref:

• 官网

• 作用：将一个值变成响应式的，在model(数据层)中将数据的值进行改变的同时，view（视图层）中的数据也会改变

• 使用：（采用ts）

  1.定义：
    方式一： import { Ref, ref} from 'vue';
  		  let 变量名:Ref<string> = ref(变量);
    方式二： import { ref} from 'vue';
  		  let 变量名 = ref<string>(变量);
  2.修改值：
    变量名.value = 修改值
  

• 示例：
  当触发bindTap之后，控制台中message和text都发生了改变，但是浏览器界面上，message仍为false，而text改为桃子

  <script setup lang="ts">
       import { Ref, ref, unref } from 'vue';
       let message: boolean = false;
       let text:Ref<string> = ref('西瓜');
       const bindTap = () => {
         text.value = '桃子'
         message = true
       }
  </script>
  

isRef：

• 作用：判断当前值是否为ref类型
• 示例：

  <script setup lang="ts">
  	  import { Ref, ref, isRef } from 'vue';
  	  let message: boolean = false;
  	  let text:Ref<string> = ref('西瓜');
  	  console.log(isRef(message)) // false
  	  console.log(isRef(text)) // true
  </script>
  

unref

• 官网
• 作用：获取值的语法糖；由于ref返回的是一个对象，获取值只能通过value属性获取，因此当不确定值是否使用ref创建时，取值需要使用val = isRef(val) ? val.value : val获取,而unref就相当于它的语法糖
• 使用：

  	val  = unref(val);
  	//相当于：val = isRef(val) ? val.value : val
  

• 扩展：什么是语法糖？
  代码的简便写法，并不会影响代码的运行，但是对于开发人员来讲更易于阅读，提高代码可读性和开发效率，降低出错率；常见的语法糖有map，foreach，箭头函数，解构赋值，模板字符串、扩展运算符等
  好家伙居然搜到了奇怪的东西

toRef 和 toRefs

• 链接

• 作用：对源响应式对象进行ref复制（类似浅拷贝），获取元素的值以及元素对象的属性，当对新的对象值进行修改时，原来的值也会产生响应的变化

• 区别：

  1. toRef:对单独的一个属性值进行ref复制，修改其生成的属性原来的值也会修改
  2. toRefs:打破源响应式对象结构，生成的对象不再是ref对象，但是对对象内的值一一进行ref复制；因此如果对生成的属性直接修改，原来的值是不会有改变的
  

• 示例：

  输出结果为：
  	33，33
  	44，44，44
  	false, true, true
  

  <script setup lang="ts">
    import { Ref, ref, toRef, unref, reactive, toRefs, isRef } from 'vue';
    let obj = reactive({
      haha:'11',
      huhu: 22
    })
    const copyHaha = toRef(obj, 'haha');
    const copyObj = toRefs(obj); 
    const bindTap = () => {
      copyHaha.value = '33' 
      console.log(copyHaha.value, obj.haha);
      copyObj.haha.value = '44';
      console.log(copyObj.haha.value, copyHaha.value, obj.haha);
      //判断是否为ref类型
      console.log(isRef(copyObj), isRef(copyObj.haha),  isRef(copyHaha))
    }
  </script>
  

• 扩展：什么是源响应式对象？

shallowRef：

• 链接
• 说明：修改其属性是非响应式的这样是不会改变的，也就是说修改foo视图会发生变化，修改foo.对象视图不会发生变化
  
• 示例：修改了后控制台值已被修改，但原来的值并没有被修改

	let obj = reactive({
	  haha: "11",
	  huhu: 22,
	});
	let shallowCopyObj = shallowRef(obj)
	const bindTap = () => {
	  shallowCopyObj.value.haha = 'cc' 
	  console.log(shallowCopyObj.value, obj);
      //{haha: 'cc', huhu: 0} {haha: '11', huhu: 22}
	};

• 扩展：

1. 也并不是修改了属性值视图都不会改变？
   由于在修改非响应式的属性值得同时，也修改了响应数据，视图发生了更新（和triggerRef调用相同的函数）不知道算不算一个bug，有点小坑其实

   const bindTap = () => {
     //==================shallowCopyObj是响应的
     shallowCopyObj.value = { haha: '11', huhu: 0 }
     console.log(shallowCopyObj.value, obj);
     //{haha: '11', huhu: 0} {haha: '11', huhu: 22}
     shallowCopyObj.value.haha = 'cc' 
     console.log(shallowCopyObj.value, obj);
     //{haha: 'cc', huhu: 0} {haha: '11', huhu: 22}
   };
   

2. 并不会修改原对象值？看上面的例子打印

triggerRef:

• 链接：
• 大概就是强制刷新的意思吧。适用于，当使用了shallowRef修改属性值时，又希望页面可以响应；或者单纯是页面不知什么情况不响应，直接调用强制刷新
  

customRef

链接

1. 作用：通过set和get对数据的修改和获取进行自定义拦截
2. 示例：实现点击增1， 值为10的时候不再增加

   <script setup lang="ts">
   	import {
   	  Ref,
   	  ref,
   	  customRef,
   	} from "vue";
   	const bindTap = () => {
   	  handleValue.value ++ 
   	};
   	function handleFunction<T> (value: T){
   	  return customRef((track, trigger) => {
   	    return {
   	      get() {
   	        track();
   	        return value;
   	      },
   	      set(newVal: T) {
   	        if(typeof newVal == 'number' && newVal < 11){
   	          value = newVal
   	           trigger();
   	        }else{
   	          alert('so big');
   	        }
   	      },
   	    };
   	  });
   	}
   	//初始值为1
   	const handleValue = handleFunction<number>(1);
   </script>
   

toRaw：

• 链接

• 获取ref响应式对象的普通对象
  

哇整了好久！但是好像有点明白看懂了vue2和vue3的一个数据监听
shallowRef有点小坑，没看清楚的回去看!
英语角：
reactive：响应式
Syntactic sugar：[sɪnˈtæktɪk ˈʃʊɡər] 语法糖