vue3中的ref()详解（vue3 ref用法）学到了吗

随心笔谈12个月前发布 admin

91 0 0

ChatGPT3.5-4 免费使用

目录ref()1. ref在模板中自动解包2. ref 在响应式对象中的解包3. 数组和集合类型的 ref 解包总结

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

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

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

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

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

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;

一个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 解包。当其作为浅层响应式对象的属性被访问时不会解包。

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

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

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

您可能感兴趣的文章:vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)vue3中获取ref元素的几种方式总结vue3给动态渲染的组件添加ref的解决方案Vue3中的ref为何要用.value进行值的调用呢详解Vue3?父组件调用子组件方法($refs?在setup()、＜script?setup＞?中使用)Vue3中使用setup通过ref获取子组件的属性一文详解Vue3中使用ref获取元素节点vue3如何定义变量及ref、reactive、toRefs特性说明

# 随心笔谈