typescript ref类型|极客笔记

typescript ref类型

简介

在 TypeScript 中，ref 是一种用于处理引用对象的类型。它允许我们将一个值封装在一个可变的容器中，并在整个应用程序中通过引用来传递和修改该值。在本文中，我们将详细介绍 ref 类型的用法和用例。

基本概念

在 TypeScript 中，ref 是由 @vue/ref 包提供的一种类型。这个包是 Vue.js 框架的一部分，但可以单独使用，无需使用整个 Vue.js 框架。

ref 类型用于创建一个可变的容器，该容器包装了一个值，并提供了一些方法，用于访问和修改该值。这个容器可以在整个应用程序中传递和操作，而不仅仅是传递和操作该值本身。

创建 `ref`

要创建一个 ref，我们首先需要在代码中导入 @vue/ref 包：

import { ref } from '@vue/ref'

然后，可以使用 ref 函数来创建一个 ref 容器，将一个初始值传递给它：

const count = ref(0)

上面的代码创建了一个 ref，将初始值 0 封装在 count 容器中。

使用 `ref`

一旦我们创建了一个 ref，我们就可以使用 value 属性来访问和修改该 ref 中的值。例如，要访问 count 中的值：

console.log(count.value) // 输出：0

要修改 count 中的值：

count.value = 10
console.log(count.value) // 输出：10

需要注意的是，直接访问 count 并赋值给一个变量是不会得到正确的结果的：

const currentCount = count
console.log(currentCount.value) // 输出：0

这是因为 ref 中的值是通过引用传递的，而不是直接进行值的复制。因此，我们需要使用 value 属性来访问和修改 ref 中的值。

监听 `ref`

ref 还提供了一种监听值变化的机制。我们可以使用 watch 函数来监听 ref 中的值，当值发生变化时执行回调函数。

watch(count, (newValue, oldValue) => {
  console.log(`count 值从  ${oldValue} 变为$ {newValue}`)
})

上述代码创建了一个监听器，当 count 的值发生变化时，会调用回调函数。回调函数的参数包括新值和旧值。

要停止监听，可以调用 stop 函数：

const stopWatching = watch(count, (newValue, oldValue) => {
  console.log(`count 值从  ${oldValue} 变为$ {newValue}`)
})

stopWatching() // 停止监听

计算属性

在 TypeScript 中，我们经常需要根据其他值的变化来计算一些衍生值。ref 也提供了一种计算属性的机制，用于根据其他 ref 的值计算新的值。

例如，我们有两个 ref：width 和 height，我们想要计算它们的乘积：

import { computed } from '@vue/ref'

const width = ref(10)
const height = ref(5)

const area = computed(() => {
  return width.value * height.value
})

console.log(area.value) // 输出：50

width.value = 20 // 修改 width 的值
console.log(area.value) // 输出：100

上述代码创建了一个计算属性 area，当 width 或 height 的值发生变化时，area 的值会自动更新。

其他操作

除了上述介绍的基本用法外，ref 还提供了一些其他的方法，用于操作 ref 类型。

unref()：返回 ref 中的实际值。如果 ref 是一个计算属性，它会返回计算后的结果。

const x = ref(10)
const y = computed(() => x.value * 2)

console.log(unref(x)) // 输出：10
console.log(unref(y)) // 输出：20

shallowRef(value: T)：与 ref 类似，但对于 Object 和 Array 类型的值，它会对值进行浅拷贝。

const obj = ref({ name: 'Alice', age: 20 })
const shallowObj = shallowRef({ name: 'Alice', age: 20 })

console.log(obj.value === shallowObj.value) // 输出：false

toRef() 和 toRefs()：用于创建一个指向另一个 ref 的引用。toRef() 会创建一个单一的引用，而 toRefs() 则会创建一个包含多个引用的对象。

const person = reactive({ name: 'Bob', age: 30 })
const nameRef = toRef(person, 'name')
const { name, age } = toRefs(person)

console.log(name.value) // 输出：Bob
console.log(age.value) // 输出：30

示例代码

下面是一个使用 ref 的完整示例代码：

import { ref, watch } from '@vue/ref'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count 值从  ${oldValue} 变为$ {newValue}`)
})

count.value = 10 // 输出：count 值从 0 变为 10

代码运行结果：