Vue 响应式 API

2024-02-20

[[Vue]] 响应式 API 笔记。

ref()

ref 允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

1
// `ref` API 的 TS 类型
2
function ref<T>(value: T): Ref<UnwrapRef<T>>;
3


4
// `ref` API 的返回值的 TS 类型
5
interface Ref<T> {
6
  value: T;
7
}

定义

1
// 显式指定 `msg.value` 是 `string` 类型
2
const msg = ref<string>('Hello World!')
3
// 自动推导
4
const msg = ref('Hello World!)
5
// 初始化时如果不赋值，会自动添加 undefined 类型
6
const msg = ref<string>() // msg.value 为 undefined

computed()

只要原始数据没有改变，会立即返回之前的计算结果。可以优先考虑使用 computed，而不是 [[#watch()]]。

定义

1
// 只读
2
function computed<T>(
3
  getter: (oldValue: T | undefined) => T,
4
  debuggerOptions?: DebuggerOptions
5
): Readonly<Ref<Readonly<T>>>;
6


7
// 可写的
8
function computed<T>(
9
  options: {
10
    get: (oldValue: T | undefined) => T;
11
    set: (value: T) => void;
12
  },
13
  debuggerOptions?: DebuggerOptions
14
): Ref<T>;

示例

只读：

1
const count = ref(1);
2
const plusOne = computed(() => count.value + 1);
3


4
console.log(plusOne.value); // 2
5
plusOne.value++; // 提示无法为 value 赋值，因为它是只读属性

reactive()

相对于 [[ref]]，reactive 仅适用于[[JavaScript/syntax]]和[[JavaScript/syntax]]。

1
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;

定义

1
import { reactive } from "vue";
2


3
// 对象
4
const myObj = reactive({ count: 0 }); // 定义
5
console.log(myObj.count); // 读取
6
myObj.count = 42; // 修改
7


8
// 定义数组
9
let myNumber = reactive([1, 2, 3, 42]);
10
myNumber.length = 0; // 重置
11
myNumber = []; // 重置（在 reactive 中可能存在问题）

toRef()

创建一个新的 Ref 变量，转换 Reactive 对象和数组的某个字段/值为 Ref 变量。

1
import { reactive, toRef } from "vue";
2


3
const myObj = reactive({ count: 42 });
4
// 第一个参数是 Reactive 对象，第二个参数是要转换的 key
5
const myObjRef = toRef(myObj, "count"); // 转换 count 字段为 Ref
6


7
// 数组
8
const myNumber = reactive([1, 2, 3, 42]);
9
const myNumberRef = toRef(myNumber, 3);
10
console.log(myNumberRef.value); // 返回 42

toRefs()

创建一个新的对象，它的每个字段都是 Reactive 对象各个字段的 Ref 变量。

1
import { reactive, toRef } from "vue";
2


3
// 对象转换
4
const myObj = reactive({ count: 42 });
5
const myObjRefs = toRefs(myObj);
6


7
// 数组转换
8
const myNumber = reactive([1, 2, 3, 42]);
9
const myNumberRefs = toRefs(myNumber);

isReactive()

检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

1
import { reactive, isReactive } from "vue";
2


3
const myObj = reactive({ count: 0 }); // 定义
4
console.log(isReactive(myObj)); // 返回 true

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

1
import { watch } from 'vue'
2


3
watch(
4
  source, // 必传，要侦听的数据源
5
  callback, // 必传，侦听到变化后要执行的回调函数
6
  options? // 可选，一些侦听选项
7
)
  • source
    • 一个函数，返回一个值
    • ref
    • 响应式对象
  • callback
1
// 单个来源
2
function watch<T>(
3
  source: WatchSource<T>,
4
  callback: WatchCallback<T>,
5
  options?: WatchOptions
6
): StopHandle;
7


8
// 多个来源
9
function watch<T>(
10
  sources: WatchSource<T>[],
11
  callback: WatchCallback<T[]>,
12
  options?: WatchOptions
13
): StopHandle;
# Vue
# API
# core