vue3基础-响应式 API 之 unref、toRef、toRefs、isRef

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身。

toRef

将对象的某个属性转为响应式，修改值时原始值也会改变，但是值改变不会更新视图

使用示例：

<template>
  <div class="home">
    <div>{{userInfo.name}}</div>
    <div>{{userInfo.age}}</div>
    <button @click="changeUserName">修改名称</button>
    <button @click="changeUserAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, ref, reactive, toRef, toRefs,
} from 'vue';

export default defineComponent({
  name: 'Home',
  setup(props, context) {

    const userInfo ={
      name: '张三',
      age: 18,
    };
    // 第一个参数为源对象，第二个参数为源对象中的属性名，值改变不会更新视图
    const toRefData = toRef(userInfo, 'age');
    setTimeout(() => {
    // 通过 value 直接修改上面的 age 值
       toRefData.value = 20;
    }, 1000);

    function changeUserName() {
      userInfo.name = '李四';
    }
    function changeUserAge() {
      userInfo.age = 100;
    }

    return {
      userInfo,
      changeUserName,
      changeUserAge,
    };
  },
});
</script>

toRefs

将对象的全部属性转换为响应式，修改值时原始值也会改变，但是值改变不会更新视图

示例

<template>
  <div class="home">
    <div>{{userInfo.name}}</div>
    <div>{{userInfo.age}}</div>
    <button @click="changeUserName">修改名称</button>
    <button @click="changeUserAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, ref, reactive, toRef, toRefs,
} from 'vue';

export default defineComponent({
  name: 'Home',
  setup(props, context) {

    const userInfo = {
      name: '张三',
      age: 18,
    };

    const toRefsData = toRefs(userInfo);
    setTimeout(() => {
    // 通过 属性.value 修改值
      toRefsData.age.value = 20;
    }, 1000);
    console.log('toRefsData', toRefsData);

    function changeUserName() {
      userInfo.name = '李四';
    }
    function changeUserAge() {
      userInfo.age = 100;
    }

    return {
      userInfo,
      changeUserName,
      changeUserAge,
    };
  },
});
</script>

isRef

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