ref，toRef ，toRefs，isref，unref，shallowRef，triggerRef，customRef以及ref与reactive的区别

ref(argu)：

以参数argu作为初始内部值生成一个ref对象,该对象只有一个指向其内部值的value属性。

let  ref1=ref(1);
let refText=ref('text');
ref1.value=2；
console.log(ref1); //refImpl类型的对象。
console.log(ref1.value);//2 

toRef():

将对象的某个属性转换为ref对象。

let obj={name:'john'，age:20};
let ref1=toRef(obj,'name');
ref1.value="jack";
console.log(obj.name);//jack

toRefs():

将响应式对象的每个属性转换为独立的ref对象。

toRefs用来把响应式对象转换成普通对象，并把对象中的每一个属性，转换成ref对象。

//片段1
let react1=reactive({name:'petter',age:50});
let refs1=toRefs(react1);
refs1.name.value="elwin";
refs1.age.value=20;
console.log(refs1);

//片段2
<script>
  import { reactive, toRefs } from 'vue';
   export default{
   setup(){
     let user = reactive({
        name: 'Echo',
        age: 26,
      });
      let { name, age} = toRefs(info);
      const update = () => {
        name.value = 'Julie';
        age.value = 33;
      }; 
       return {user,name,age}
   }
}
</script>
<template>
  <div id="app">
    <div>user.name：{{ user.name }}</div>
    <div>user.age：{{ user.age }}</div>
    <div>name：{{ name }}</div>
    <div>age：{{ age }}</div>
    <button @click="update">update</button>
  </div>
</template>

isRef：

判断一个值是否是ref对象，这意味着  isRef  可以被用作类型守卫：

let foo: unknown
if (isRef(foo)) {
  // foo 的类型被收窄为了 Ref<unknown>
  foo.value
}

let ref1=ref(12);
let map={cursor:12,tab="tab"};
let react1=reactive(map);
console.log(isRef(ref1));//true
console.log(isRef(react1));//false

unref() ​

如果参数是 ref对象，则返回内部值，否则返回参数本身的值。这是

val = isRef(val) ? val.value : val 计算的一个语法糖。

let ref1=ref(12);
let map={cursor:12,tab="tab"};
let react1=reactive(map);
console.log(unref(ref1));//12
console.log(unref(12));//12
console.log(unref(react1));//Proxy

shallowRef:

ref()的浅层转换模式。

和 ref() 的区别; 浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

const state = shallowRef({ count: 1 })
// 不触发
state.value.count = 2
// 会触发
state.value = { count: 2 }

triggerRef() ​

触发依赖于一个浅层的副作用，这通常在对浅引用的内部值进行深度变更后使用。

const shallow = shallowRef({
  data: 'Any way'
})

//添加副作用
watchEffect(() => {
  console.log(shallow.value.data)
})
// 该副作用第一次触发打印 "Any way"


// 浅层的 ref不触发副作用
shallow.value.greet = 'any thing'
//triggerRef强制触发,打印 "any thing"
triggerRef(shallow)