×

vue3基础应用:聊聊vue3中ref()的基础应用

作者:Terry2023.06.04来源:Web前端之家浏览:2347评论:0
关键词:vue3

vue3基础应用:聊聊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对象对于响应式数组则不会解包。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuesan20230604.html

网友评论文明上网理性发言 已有0人参与

发表评论: