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 仅适用于docs/Programming/Language/JavaScript/syntax#对象|对象和docs/Programming/Language/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