vue3 中的toRef函数和toRefs函数的基本使用

那我来详细讲解一下“Vue3中的toRef函数和toRefs函数的基本使用”的完整攻略。

什么是toRef函数和toRefs函数

在Vue3中，我们可以使用toRef函数和toRefs函数来创建响应式数据。它们的作用是：

• toRef: 将一个普通的数据变成一个响应式的引用，当该数据更新时，组件也会相应地重新渲染。
• toRefs: 将一个响应式对象中的所有属性变成响应式引用，方便在组件中进行解构赋值。

toRef函数的使用

基本用法

toRef函数接受两个参数：第一个参数是一个响应式对象，第二个参数是一个属性名。例如：

import { reactive, toRef } from 'vue'

const state = reactive({
  name: 'Jack',
  age: 18
})
const nameRef = toRef(state, 'name')

在上面的代码中，我们使用reactive函数创建了一个响应式的对象state。然后我们使用toRef函数将state对象的name属性转化为一个引用变量nameRef。

那么现在我们就可以使用nameRef变量，来访问和修改state.name属性：

nameRef.value // Jack
nameRef.value = 'Tom' // state.name也会被重新赋值为 Tom

toRef函数的注意事项

当我们使用toRef函数从响应式对象中创建一个引用时，如果通过这个引用修改了原对象中的属性值，Vue将不会触发重渲染。例如：

const state = reactive({
  name: 'Jack',
  age: 18
})
const nameRef = toRef(state, 'name')

nameRef.value = 'Tom' // state.name 会被重新赋值为 Tom，但不会触发视图的重新渲染。

为了实现响应式，我们需要在修改state.name的时候直接修改state.name的值：

state.name = 'Tom' // 修改state.name的值，会触发视图的重新渲染。

toRefs函数的使用

基本用法

toRefs函数接收一个响应式对象作为参数，返回一个新对象，这个新对象的所有属性都是响应式引用。例如：

import { reactive, toRefs } from 'vue'

const state = reactive({
  name: 'Jack',
  age: 18
})

const refs = toRefs(state)

console.log(refs.name.value) // Jack
console.log(refs.age.value) // 18

在上面的代码中，我们使用reactive函数创建了一个响应式的对象state。然后我们调用toRefs函数来将state对象的所有属性转化为响应式引用，并将结果保存在了refs变量中。最后，我们可以使用refs.name.value和refs.age.value来访问state对象中的属性。

toRefs函数的注意事项

一个响应式对象上的属性不能直接用来给另一个对象的属性赋值，因为它们不是响应式的引用，它们的更新不会引起视图的重新渲染。为了实现响应式，我们需要把这些属性都转化为响应式引用。这时，toRefs函数就有了非常重要的作用。

例如：

const state = reactive({
  name: 'Jack',
  age: 18
})
const refs = toRefs(state)

const base = {}
Object.keys(refs).forEach(key => {
  Object.defineProperty(base, key, {
    get() {
      return refs[key].value
    },
    set(value) {
      refs[key].value = value
    }
  })
})

base.age = 20 // 这里更新base.age的值，实际上调用了refs.age.value = 20。

在上面的代码中，我们用一个普通对象base来代替了原来的响应式对象state，并通过Object.defineProperty来定义base对象的getter和setter方法。但是这里调用base.age = 20是不会更新视图的，因为age属性并没有被转化为响应式引用。那么我们就可以使用toRefs函数来解决这个问题。