Vue3中ref、toRef、toRefs的区别

首先要注意要一点：ref、toRef、toRefs 都是composition API

通常在生命周期函数 setup 中使用

setup 会比 options API 的生命周期函数 beforeCreate 更先执行

1.ref的使用

ref 是 vue3 中使用值类型变成响应式的方法

使用 ref.value = xx 进行改变值

例如，下面简单的例子

1.5秒后 nameRef 的值从 ayuan 变为 ayuan2（模版template的值也会更新）

<template>
  <div>
    {{ nameRef }}
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
  
    const nameRef = ref('ayuan')
    
    // 1.5秒后 nameRef的值从 ayuan 变为 ayuan2
    setTimeout(() => {
      nameRef.value = 'ayuan2'
    }, 1500)
    
    // 返回的值能够在 template 中使用
    return {
      nameRef
    }
  }
}
</script>
复制代码

代码效果：

2.reactive的用

好了，说完值类型变成响应式的方法，

对应的，有用引用类型变成响应式的方法

就是使用 reactive

例子：1.5 秒后 person.age 的值从 50 变为 51（模版template的值也会更新）

<template>
  <div>
    {{ person.name }}
    <br />
    {{ person.age }}
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {

    const person = reactive({
      name: 'ayuan',
      age: 50
    })

    // 1.5 秒后 person.age 的值从 50 变为 51
    setTimeout(() => {
      person.age = 51
    }, 1500)

    return {
      person
    }
  }
}
</script>
复制代码

代码效果：

3.toRef的使用

toRef 是对定义的响应对象的某个属性进行引用

例如：第二个例子中的

const nameRef = toRef(person, 'name')
复制代码

可是其实你会发现，我使用nameRef和 person.name 进行赋值都会触发响应式

那 toRefs 是否是没用？

固然不是！

在你使用一个函数返回一个响应式对象

而此定义的“响应式对象”却失去了响应式

而这时候就能够使用的 toRef 或是 toRefs 保持他的响应式

咱们先说 toRef

举个🌰：

先看目录结构

data.js 中的代码

import { reactive } from 'vue'

export default function () {
    return reactive({
        name: 'ayuan',
        age: 50
    })
}
复制代码

App.vue 中的代码

<template>
  <div>
    {{ nameRef }}
  </div>
</template>

<script>
import { toRef } from 'vue'
import data from './data'
export default {
  setup() {
    const nameRef = toRef(data(), 'name')
    
    setTimeout(() => {
      nameRef.value = 'ayuan2'
    }, 1000)
    
    return {
      nameRef
    }
  }
}
</script>
复制代码

代码效果：

好的，这下你就明白了：这其实就是对响应对象的一种“延续”

或许，你会以为，data.js 文件返回响应式对象一个个的延续很复杂啊

那么就使用 toRefs

4.toRefs的使用

咱们只须要稍微改造一下 data.js 中的代码

// data.js
import { reactive, toRefs } from 'vue'

export default function () {
    const person = reactive({
        name: 'ayuan',
        age: 50
    })
    
    return toRefs(person)
}

复制代码

App.vue 中的代码

<template>
  <div>
    {{ name }}
    <br />
    {{ age }}
  </div>
</template>

<script>
import data from './data'
export default {
  setup() {
    const person = data()
    
    setTimeout(() => {
      person.name.value = 'ayuan2'
      person.age.value = 51
    }, 1000)
    
    // 直接写 return person 也行
    return {
      ...person
    }
  }
}
</script>
复制代码

代码效果：

5.总结

这样看下来，你就明白了：

ref 是对值类型创造响应式的方法

toRef、toRefs 是延续引用类型响应式对象的方法

只不过 toRef 延续单个响应式对象的属性,

而 toRefs 延续响应式对象的所有属性

感谢阅读