Vue3：ref、reactive、toRef、toRefs的区别-CFANZ编程社区

一、ref

（1）ref是什么

ref 可以生成任何类型的响应式数据
ref 通过 .value 来修改值

（2）代码

<template>
  <div>
    <h2>{{ name }}{{ age }}岁</h2>
    <h2>改变次数：{{ state.count }}</h2>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    const name = ref('小李')
    const age = ref(18)

    const state = ref({
      count: 0,
    })

    setTimeout(() => {
      name.value = '小红'
      age.value = 20
      // 注：引用类型赋值时必须加上.value，否则会丢失响应性
      state.value.count ++
    }, 2000)

    return {
      name,
      age,
      state,
    }
  },
}
</script>

（3）注意

ref对引用类型的变量创建响应式，其根本是当你给ref传入引用类型，则调用reactive方法为其创建响应式
ref只能操作浅层次的数据，把基本数据类型当作自己的属性值；深层次依赖于reactive

二、reactive

（1）reactive是什么

reactive可以生成引用类型的响应式数据
直接获取数据值，不需要加.value

（2）代码

<template>
  <div>
    <h2>{{ user.name }}{{ user.age }}岁</h2>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'App',
  setup() {
    const user = reactive({
      name: '小李',
      age: 18
    })

    // 测试响应式效果
    setTimeout(() => {
      user.name = '小红'
      user.age = 20
    }, 2000)

    return {
      user
    }
  },
}
</script>

三、toRef

（1）toRef是什么

如果要将响应式reactive对象中的某个属性单独提供给外部使用，且不丢失响应式，就用 toRef
toRef 接受两个参数：响应式对象；响应式对象中的属性名
toRef返回一个ref数据，需要通过 .value 来修改值

（2）代码

<template>
  <div>
    <h2>user.age: {{ user.age }}</h2>
    <h2>ageRef: {{ ageRef }}</h2>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  name: 'App',
  setup() {
    const user = reactive({
      name: '小李',
      age: 18
    })

    const ageRef = toRef(user, 'age')

    // 测试响应式效果
    setTimeout(() => {
      user.age = 20
    }, 2000)

    setTimeout(() => {
      ageRef.value = 30
    }, 3000)

    return {
      user,
      ageRef
    }
  },
}
</script>

四、toRefs

（1）toRefs是什么

toRefs接收一个响应式 reactive 对象作为参数，它会将对象的所有属性执行toRef，转换为响应式的 ref 属性，需要通过.value来修改值
如果通过ES6的解构赋值操作直接解构响应式对象，那么解构出来的对象会失去响应式，而使用toRefs不会失去响应式

（2）代码

<template>
  <div>
    <h2>{{ name }}{{ age }}岁</h2>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup() {
    const user = reactive({
      name: '小李',
      age: 18
    })

    const { age } = toRefs(user)

    // 测试响应式效果
    setTimeout(() => {
      user.name = '小红'
      
      // toRefs将属性转换为响应式的ref属性，需要通过.value来修改值
      age.value = 20
    }, 2000)

    return {
      // ...user, // 直接解构会失去响应式
      ...toRefs(user) // 通过toRefs解构不会失去响应式
    }
  },
}
</script>