vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toref和torefs?三者在使用方式上有什么不同?最佳的使用方式是什么?
(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
我们来看下面这段代码
<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针对的是响应式,针对的不是普通对象,如果用于非响应式,产出的结果不具有响应式
我们来看下面这段代码
<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才能获取其值
例如:
<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将其转为普通对象并返回,这时候可以结构赋值,并且值是响应式的
在上面我们讲到,使用reactive和toref也可以将值类型转换成响应式的,为什么还需要ref呢?
值类型不具有响应式(proxy)tup()、computed()…都可能返回值类型,如果vue不定义ref,用户需要响应式的值类型的时候就会通过其他方式(reactive/toref, reactive/torefs)自造ref,就会造成代码更混乱ref为什么需要加一个.value来获取值呢?为什么要这么麻烦呢?
ref是一个对象(不会丢失响应式),value存储值通过.value属性的get和t来实现响应式用于reactive和模板(vue编译)的时候不需要.value,其他情况都需要到此这篇关于vue3如何理解ref toref和torefs的区别的文章就介绍到这了,更多相关vue3 ref toref和torefs内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!
本文发布于:2023-04-04 09:07:50,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/15686121f616e2fd1491fd9fcc64d742.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:Vue3如何理解ref toRef和toRefs的区别.doc
本文 PDF 下载地址:Vue3如何理解ref toRef和toRefs的区别.pdf
留言与评论(共有 0 条评论) |