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

2022-01-10 18:32:16 阅读：162 来源： 互联网

标签：name 响应 age toRefs toRef reactive user ref

一、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 是对整个对象自动解构赋值

标签：name,响应,age,toRefs,toRef,reactive,user,ref
来源： https://blog.csdn.net/elevenhope/article/details/122416359

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

一、ref

二、reactive

三、toRef

四、toRefs

结论：