Vue3:ref、reactive、toRef、toRefs的区别

一、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>

结论:
  • ref主要用于基本类型的响应;reactive主要用于引用类型的响应

  • toRef将某个响应式对象中的属性变成响应式数据;toRefs作用其实和 toRef 类似,只不过 toRef 是对一个个属性手动赋值,而 toRefs 是对整个对象自动解构赋值

上一篇:Vue3中的响应式对象Reactive源码分析


下一篇:简单聊下 Vue3 中 reactive 和 ref