Vue3如何理解ref toRef和toRefs的区别

更新时间:2023-04-04 09:07:51 阅读：评论：0

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

一、基础

1.ref

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

<template> <div>{{ ageref }}</div>考前注意事项</template><script>import { ref } from 'vue'export default { tup() {  const ageref = ref(20)  tinterval(() => {   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 { tup() {  const ageref = ref(20)  const info = reactive({   age: ageref  })  tinterval(() => {   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 { tup() {  const eledom = ref(null)  onmounted(() => {   console.log(eledom.value.innerhtml) // ref-dom-test  })  return {   eledom   } },}

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

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

2.toref

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

我们来看下面这段代码

<template> <div>{{ state.age }} --- {{ ageref }}</div></template><script>import { toref, reactive } from 'vue'export default { tup() {  const state = reactive({   name: 'jl',   age: 18  })  const ageref = toref(state, 'age')  ttimeout(() => {   state.age = 20  }, 1000)    ttimeout(() => {   ageref.value = 21  }, 2000)    return {   state,   ageref  } },}</script>

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

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

3.torefs

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

我们来看下面这段代码

<template> <div>{{ name }}---{{ age }}</div></template><script>import { reactive, torefs } from 'vue'export default { tup() {  const state = reactive({   name: 'jl',   age: 18  })  const staterefs = torefs(state)  ttimeout(() => {   state.age = 20  }, 1000)  ttimeout(() => {   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才能获取其值

4.最佳的使用方式

reactive做对象的响应式，ref做值类型响应式tup中返回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 { tup() {  function test() {   const state = reactive({    x: 1,    y: 2   })   return torefs(state)  }  const {x, y} = test()  ttimeout(() => {   x.value = 2  }, 1000)  return {   x,   y  } }}</script>

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