响应性基础 API2——ref系列

ref

接受一个内部值（任何值）并返回一个响应式且可变的 ref 对象。ref 对象仅有一个.value属性，指向该内部值。
如果传入的值为一个对象，则他的所有属性值采用reactive进行响应式转换，也就是说使用ref进行响应式转换后的数据时，只需要对最外层的对象使用一次.value即可。

<script setup>
  import { ref } from 'vue'
  let obj = ref({name: 'fufu', info: {age: 20}})
  console.log(obj.value.info.age); // 20
</script>

注意：直接替换整个ref声明的对象会丢失响应。

unref

如果参数是一个 ref，则返回内部值（.value的值），否则返回参数本身。
这是val = isRef(val) ? val.value : val的语法糖函数。

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

<script setup>
  import { toRef, reactive } from 'vue'
  let obj = reactive ({name: 'fufu', info: {age: 20}})
  let nameRef = toRef(obj, 'name')
  console.log(nameRef.value); // fufu
  nameRef.value = 'dandan'
  console.log(nameRef.value, obj.name); // dandan  dandan
</script>

注意该方法不能进行深层属性的创建

<script setup>
  import { toRef, reactive } from 'vue'
  let obj = reactive ({name: 'fufu', info: {age: 20}})
  let ageRef = toRef(obj, 'age')
  console.log(ageRef.value); // undefined
</script>

想要对ref封装的对象使用该方法时，参数一应为.value的值

<script setup>
  import { toRef, reactive, ref } from 'vue'
  let obj = ref({name: 'fufu', info: {age: 20}})
  let nameRef = toRef(obj.value, 'name')
  console.log(nameRef.value); // fufu
</script>

toRefs

批量创建ref类型的数据，相当于给对象的每个属性创建ref类型数据。
不会进行深层创建。

isRef

检查值是否为一个 ref 对象。

shallowRef

创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。
也就是说直接修改属性.value是响应式的，对对象里面的具体属性进行修改是非响应的。

triggerRef

手动执行与 shallowRef 关联的任何作用。