vue3中ref的.value

文章类型:Vue

发布者:hp

发布时间:2023-05-20

一:原因

1:ref对象是一个容器,它将值封装在内部并提供访问和修改的接口,ref创建的响应式引用对象需要通过.value属性来访问和修改其值。

2:使用.value属性是为了明确地标识出对ref对象值的访问和修改,确保在响应式系统中能够正确地追踪和更新依赖关系

3:通过使用.value,可以检测到对ref对象值的引用,在值发生变化时触发相应的响应式更新

二:代码

import { ref } from 'vue';

const myRef = ref('Initial value');

console.log(myRef); // 输出: { value: 'Initial value' }
console.log(myRef.value); // 输出: 'Initial value'

myRef.value = 'Updated value';
console.log(myRef.value); // 输出: 'Updated value'

三:总结

1:ref是一个对象(不丢失响应式),value存储值

2:通过.value属性的get和set实现响应式,正确地追踪和更新相关的依赖关系

3:用于模板、reactive时,不需要.value