Vue3：ref toRef和toRefs的区别-工具盒子

Vue3：ref toRef和toRefs的区别。

Vue3中新增了几种创建响应式数据的方法，其各自的作用当然也不尽相同，每一种方法都有其自己的应用场景，今天我们来聊聊什么是ref toRef和toRefs？三者在使用方式上有什么不同？最佳的使用方式是什么？

{#_label0}

一、基础 {#heading-0}

{#_lab2_0_0}

1.ref {#heading-1}

(1) 生成值类型的响应式数据, 通过 .value修改值

<template>
 <div>{{ ageRef }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
 setup() {
  const ageRef = ref(20)

  setInterval(() => {
   ageRef.value += 1
  }, 1000)
  
  return {
   ageRef
  }
 },
}
</script>

上面这段代码,定义了一个ageRef变量,并每秒将ageRef加1,页面展示的数值也会加1.

(2) 可用于reactive中

将上面的代码改动如下, 引入reactive定义变量,将ref定义的变量引入reactive中, 模板中展示reactive的变量. 最后的效果和上面(1)的一样

<template>
 <div>{{ info.age }}</div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
 setup() {
  const ageRef = ref(20)
  const info = reactive({
   age: ageRef
  })
  setInterval(() => {
   ageRef.value += 1
  }, 1000)
  
  return {
   info
  }
 },
}
</script>

(3) 可用于获取Dom

<template>
 <div ref="eleDom">ref-dom-test</div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
 setup() {
  const eleDom = ref(null)
  onMounted(() => {
   console.log(eleDom.value.innerHTML) // ref-dom-test
  })
  return {
   eleDom 
  }
 },
}

上面代码控制台输出ref-dom-test, 说明获取到了Dom元素.
要获取Dom元素必须要符合以下规则

定义的ref变量名必须要和模板中ref中的值一致,如代码中的eleDom

{#_lab2_0_1}

2.toRef {#heading-2}

针对一个响应式对象的prop
创建一个ref，具有响应式
两者保持引用关系

我们来看下面这段代码

<template>
 <div>{{ state.age }} --- {{ ageRef }}</div>
</template>

<script>
import { toRef, reactive } from 'vue'
export default {
 setup() {
  const state = reactive({
   name: 'JL',
   age: 18
  })
  const ageRef = toRef(state, 'age')
  setTimeout(() => {
   state.age = 20
  }, 1000)
  
  setTimeout(() => {
   ageRef.value = 21
  }, 2000)
  
  return {
   state,
   ageRef
  }
 },
}
</script>

上面的代码中，使用toRef将state的age属性变成一个响应式变量，然后在1秒后将state的age值变为20，此时ageRef也会变成20；在2秒后将ageRef的值变为21，此时state的age值也会变成21，说明了两者保持相互引用关系

toRef针对的是响应式，针对的不是普通对象，如果用于非响应式，产出的结果不具有响应式

{#_label1}

3.toRefs {#heading-3}

将一个响应式对象转为普通对象
对象的每一个属性都是对应的ref
两者保持引用关系

我们来看下面这段代码

<template>
 <div>{{ name }}---{{ age }}</div>
</template>
 
<script>
import { reactive, toRefs } from 'vue'
export default {
 setup() {
  const state = reactive({
   name: 'JL',
   age: 18
  })
 
  const stateRefs = toRefs(state)
 
  setTimeout(() => {
   state.age = 20
  }, 1000)
 
  setTimeout(() => {
   stateRefs.age.value = 21
  }, 2000)
 
  return stateRefs
 },
}
</script>

上面的代码中，使用toRefs将state转变成一个普通对象，这时候就可以直接返回stateRefs，这时候在template就可以直接调用name和age。然后在1秒后将state的age值变为20，此时页面中的age也会变成20；在2秒后将stateRefs中的name的值变为21，此时页面中的age值也会变成21，说明了两者保持相互引用关系

toRefs将响应式对象变成普通对象后，每一个属性都具有响应式ref，此时需要使用 .value才能获取其值

{#_label2}

4.最佳的使用方式 {#heading-4}

reactive做对象的响应式，ref做值类型响应式
setup中返回toRefs(state), 或者toRef(state, 'xxx')---(这样就能够在template中不使用state.xxx)
ref的变量命名都用xxxRef
合成函数返回响应式对象时，使用toRefs

例如：

<template>
 <div>x:{{x}} y:{{y}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
 setup() {
  function test() {
   const state = reactive({
    x: 1,
    y: 2
   })
   return toRefs(state)
  }
  const {x, y} = test()

  setTimeout(() => {
   x.value = 2
  }, 1000)

  return {
   x,
   y
  }
 }
}
</script>

上面的代码，test函数中定义了响应式对象state，并通过toRefs将其转为普通对象并返回，这时候可以结构赋值，并且值是响应式的

{#_label3}