Vue3 ref属性

最新推荐文章于 2025-11-30 13:34:06 发布

原创最新推荐文章于 2025-11-30 13:34:06 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

详细信息

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。
如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。
若要避免这种深层次的转换，请使用 shallowRef() 来替代。

示例

import { ref, defineComponent } from 'vue';
export default defineComponent ({
  setup () {
    const valueNumber = ref(0);
    const valueString = ref('hello world!');
    const valueBoolean = ref(true);
    const valueNull = ref(null);
    const valueUndefined = ref(undefined);

    console.log(valueNumber.value) // 0
    valueNumber.value++
    console.log(valueNumber.value) // 1

    return {
      valueNumber,
      valueString,
      valueBoolean,
      valueNull,
      valueUndefined
    };
  }
});

在template中访问ref创建的响应式数据

import { ref } from 'vue';
export default {
  setup () {
    const value = ref(1);

    return {
      value,
      msg: 'hello world!'
    };
  }
};

<template>
  <p>
    {
  { value }} {
  { msg }}
  </p>
</template>

为ref()标注类型

ref 会根据初始化时的值推导其类型：

import { ref } from 'vue'

// 推导出的类型：Ref<number>
const year = ref(2020)

// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'

有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用 Ref 这个类型：

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')

year.value = 2020 // 成功！

或者，在调用 ref() 时传入一个泛型参数，来覆盖默认的推导行为：

// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')

year.value = 2020 // 成功！

如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：

// 推导得到的类型：Ref<number | undefined>
const n = ref<number>()

作为程序员，持续学习和充电非常重要，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域，让我们拭目以待，它将给前端世界带来怎样的变革，推荐一个低代码工具。

应用地址： https://www.jnpfsoft.com
开发语言：Java/.net

这是一个基于Flowable引擎(支持java、.NET)，已支持MySQL、SqlServer、Oracle、PostgreSQL、DM（达梦）、 KingbaseES（人大金仓）6个数据库，支持私有化部署，前后端封装了上千个常用类，方便扩展，框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用。

至少包含表单建模、流程设计、报表可视化、代码生成器、系统管理、前端 UI 等组件，这种情况下我们避免了重复造轮子，已内置大量的成熟组件，选择合适的组件进行集成或二次开发复杂功能，即可自主开发一个属于自己的应用系统。