vue得toRef,toRaw,toRefs

toRef

如果原始对象是非响应式的就不会更新视图 数据是会变的

toRefs

批量创建ref对象主要是方便我们解构使用

toRaw

将响应式对象转化为普通对象

<template>
  <div>
    oldValue：{{ oldValue }} newValue:{{ newValue }}
    <button @click="changetoRef()">改变changetoRef</button>
    oldValue：{{ oldRef }} --newValue:{{ lName }}{{ lage }} --toRowValue:{{toRowValue}}
    <button @click="changetoRefs()">改变changetoRefs</button>
    <button @click="changetoRow()">改变toRow</button>
  </div>
</template>
<script>
import {
  ref,
  shallowReactive,
  shallowRef,
  triggerRef,
  customRef,
  reactive,
  readonly,
  toRef,
  toRefs,
  toRaw,
} from "vue";
export default {
  setup() {
    //改变Reactive
    let oldValue = {
      name: "乌瑟尔",
      age: 18,
    };
    let newValue = toRef(oldValue, "age");
    function changetoRef() {
      newValue.value = 14;
      console.log(oldValue);
      console.log(newValue);
    }

    let oldRef = reactive({
      name: "罗大佑",
      age: 65,
    });
    let { name: lName, age: lage } = toRefs(oldRef);
    let changetoRefs = () => {
      oldRef.age = 14;
      console.log(oldRef);
      console.log(lName.value, lage.value);
    };
    let toRowValue = toRaw(oldRef);
    let changetoRow = () => {
      toRowValue.age = 49;
      toRowValue.name = "李宗盛";
      console.log(oldRef);
      console.log(toRowValue);
    };
    return {
      oldValue,
      newValue,
      changetoRef,
      changetoRefs,
      oldRef,
      lName,
      lage,
      changetoRow,
      toRowValue
    };
  },
};
</script>