vue3中的ref()详解

更新时间：2023年05月12日 14:27:35 作者：海阔天空BM

ref对象可以通过.value属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用，这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下

ref()

接受一个值，返回一个响应式的，可以修改的ref对象，这个对象只有一个.vaule属性。

ref对象可以通过.value属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用。

如果将一个对象赋值给ref，则这个对象会通过reactive()转为具有深层次的响应式对象。

对于属性值是ref对象的对象，解构后也具有响应式。

1. ref在模板中自动解包

当ref作为顶层属性在模板中使用时，自动解包，不用.value即可获取值。

const count = ref(1);
count.value = 2;

直接使用

<!-- count值为2 -->
<div>{{count}}</div>
<!-- 正确 -->
<div>{{count + 1}}</div>

若不是顶层属性, 假如值需要逻辑操作，则会出现问题。

const obj = {
    age: ref(1)
}

<!-- 可以正常显示-->
<div>{{obj.age}}</div>
<!-- 会报错  渲染的结果会是一个 [object Object]，因为 obj.age 是一个 ref 对象。需要obj.age.value 才能正常显示-->
<div>{{obj.age + 1}}</div>

解构后也具有响应式

const {age} = obj;

2. ref 在响应式对象中的解包

一个ref对象嵌套在一个响应式对象中，属性访问时会自动解包

const a = ref(1)
const state = reactive({
    age: a
})
console.log(state.age); // 1 直接解包，不用state.age.value

如果将一个新的 ref 赋值给另一个对象具有 ref属性的，那么它会替换掉旧的 ref。

const b = ref(3);
// 假如将b直接赋值给state.age,因为b是一个ref对象，则会替代之前的ref对象，则现在state.age不管如何变化都变量a没有了关系
state.age = b;
console.log(stata.age); // 3
console.log(a); // 1
// 假如将b.value赋值给state.age,其实b.value就相等于一个值，并不是ref对象，则不会替代之前的ref对象，则state.age变化，之前的变量a也会随之变化
state.age = b.value;
console.log(state.age); // 3
console.log(a); // 3

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

3. 数组和集合类型的 ref 解包

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

总结

返回一个具有响应式的ref对象，并只有一个属性.value可通过.value 获取或修改值。在模板中自动解包，对于对象在模板中使用若需要逻辑操作需.value。解构出来的也具有响应式对于响应式对象可以解包当一个ref对象赋值给另一个ref对象，则会替换旧的ref对象对于响应式数组则不会解包

到此这篇关于vue3中的ref()的文章就介绍到这了,更多相关vue3中的ref()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3
ref()

记一次微信小程序与webviewH5通信的踩坑记录
uniapp开发小程序的过程中主、分包有大小限制,随着业务的增加,使用web-view加载H5的方式,往往纯加载并不能满足业务需求,这个时候就得了解小程序与H5的交互,这篇文章主要给大家介绍了关于微信小程序与webviewH5通信的踩坑记录,需要的朋友可以参考下
2024-07-07
element-ui 中的table的列隐藏问题解决
这篇文章主要介绍了element-ui 中的table的列隐藏问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue之this.$router.push页面刷新问题
这篇文章主要介绍了vue之this.$router.push页面刷新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue Router修改query参数url参数没有变化问题及解决
这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
详解vue2父组件传递props异步数据到子组件的问题
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
详解Vue-cli 创建的项目如何跨域请求
本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
一文探索Vue中组件和插件使用细节与差异
Vue组件和插件是Vue生态系统中的两种重要概念,它们分别服务于不同的目的,但都极大地丰富了Vue的功能性和可扩展性,下面我们就来看看二者的用法以及区别吧
2024-03-03
vue实现微信分享链接添加动态参数的方法
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
elementui的el-popover修改样式不生效的解决
在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下
2021-06-06
过滤器vue.filters的使用方法实现
这篇文章主要介绍了过滤器vue.filters的使用方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09