vue3 | isRef、unref、toRef、toRefs

isRef

检查某个值是否是ref。是返回true，否则返回false。

const num = ref(10);

const num1 = 20;

const num2 = reactive({ data: 30 });

console.log(isRef(num)); //true

console.log(isRef(num1)); //false

console.log(isRef(num2)); //false

unref()

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

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

console.log(unref(num));

console.log(unref(num1));

console.log(unref(num2));

toRef

介绍

基于响应式对象上的某个属性，创建一个对应的 ref。创建出来的 ref 会跟源属性保持同步：更改了 ref 的值就会更改源属性的值，反之亦然。

参数一：操作对象
参数二：对象属性

const val = reactive({

  num: 1,

});

const numRef = toRef(val, "num");

// 更改该 ref 会更新源属性

numRef.value++;

console.log(val.num); // 2

// 更改源属性也会更新该 ref

val.num++;

console.log(numRef.value); // 3

使用场景

toRef() 这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用当我们向组件传递 props 数据时，如果想要某个数据同父组件同步更新。当 toRef 与组件 props 结合使用时，关于禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props，这是不允许的。在这种场景下，可以使用watch去监听我们定义ref()对象。

<template>

  <n-modal :show="props.visible">

    <n-card

      style="width: 600px"

      title="编辑"

      :bordered="false"

      size="huge"

      role="dialog"

      aria-modal="true"

    >

      <n-input v-model:value="inputValue"></n-input>

      <template #footer>

        <n-el class="flex justify-end">

          <n-space>

            <n-button @click="emits('cancel')">取消</n-button>

            <n-button @click="emits('save', inputValue)">确定</n-button>

          </n-space>

        </n-el>

      </template>

    </n-card>

  </n-modal>

</template>

<script lang="ts" setup>

  import { toRef, watch, ref } from 'vue'

  const props = defineProps<{

    visible: boolean

    value: string

  }>()

  const emits = defineEmits<{

    (e: 'save', data: string): void

    (e: 'cancel'): void

  }>()

  const valueToRef = toRef(props, 'value')

  const inputValue = ref(props.value)

  watch(

    () => valueToRef.value,

    (v) => (inputValue.value = v)

  )

</script>

<style></style>

  const visible = ref(true)

  const inputValue = ref('哈哈哈哈')

  const handleSave = (v: string) => {

    console.log('v', v)

  }

  const handleCancel = () => {

    visible.value = false

  }

  <Demo :value="inputValue" :visible="visible" @save="handleSave" @cancel="handleCancel" />

注：视图更新的问题

参考： https://www.cnblogs.com/web-learn/p/16725393.html

toRefs()

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都指向源对象相应的属性的ref。每个单独的ref都是使用toRef()创建的。

const val = reactive({

  num: 1,

});

const numRef = toRefs(val);

// 更改该 ref 会更新源属性

numRef.num.value++;

console.log(val.num); // 2

// 更改源属性也会更新该 ref

val.num++;

console.log(numRef.num.value); // 3

toRefs()解构出来的对象不会失去响应性。

如下：

const obj = reactive({

  num: 10,

  num2: 20,

});

const { num1, num2 } = toRefs(obj);

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef。

巴特西