Vue3 isRef

最新推荐文章于 2024-05-09 11:54:54 发布

＊且听风吟

最新推荐文章于 2024-05-09 11:54:54 发布

阅读量1k

点赞数

分类专栏： # Vue 3 文章标签：前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/124251909

版权

Vue 3 专栏收录该内容

32 篇文章 11 订阅

订阅专栏

本文通过一个 Vue 单文件组件（SFC）示例，展示了如何使用 `ref` 和 `reactive` 函数创建响应式属性，并利用 `isRef` 函数检查对象是否为 `ref` 包装。`ref` 用于创建响应式引用，而 `reactive` 则用于使整个对象变得响应式。在模板中，`isRef` 被用来判断 `count` 和 `val` 是否为 `ref` 对象，从而在页面上展示相应的结果。

摘要由CSDN通过智能技术生成

isRef：检查一个对象是否为 ref 包装过的对象。

实例：

<template>
  <p>The count.num is：{{ count.num}}</p>
  <p>Is the count isRef：{{ isResult }}</p>
  <p>The val is：{{ val}}</p>
  <p>Is the val isRef：{{ isRes }}</p>
</template>

<script lang="ts">
import { ref, reactive, isRef } from 'vue'
export default {
  setup() {
    const val = ref(3)
    const count = reactive({
      num: 5,
    })
    const isRes = isRef(val)
    const isResult = isRef(count)
    return {
      val,
      count,
      isRes,
      isResult,
    }
  },
}
</script>