关于 vue3 用 ref 定义响应式的问题

xing393939 · 2024-5-15 17:19:24 · 92 次点击
代码 1: https://run.iviewui.com/GJQd3slb

代码 2: https://run.iviewui.com/FoCmnwDq

为什么代码 1 的输入框输入内容后,点击 click ,txt 的内容还是空的,而代码 2 就是 ok 的?

(两者的区别仅仅在于第 8 行)
举报· 92 次点击
登录 注册 站外分享
8 条回复  
rabbbit 小成 2024-5-15 17:23:43
txt.value = msg.aaa
->
txt.value = msg.value.aaa
qq347891134 小成 2024-5-15 17:25:40
少了.value ,应该是  
const onClick = () => {
    txt.value = msg.value.aaa
  }
</script>
QAQqingju 初学 2024-5-15 17:26:08
ref 需要.value
zzzzhan 初学 2024-5-15 17:27:56
你知道赋值给 txt.value ,为什么不知道取值的时候也要取 msg.value
peasant 小成 2024-5-15 17:28:54
https://cn.vuejs.org/api/reactivity-core#ref

用 ref 的在 js 里获取值必须用.value 来取值,reactive 不需要
marsKnight 小成 2024-5-15 17:29:51
vue3 中 ref 和 reactive 使用是不一样的  ref 创建的必须使用.value 去访问值  reactive 创建的可以直接通过对象属性去修改值  楼主可以看看官网二者介绍
lisongeee 小成 2024-5-15 19:21:55
ts 的应用场景之一就是这种代码,在 ts 里你的第一段代码会报编译错误
Dik1212 小成 2024-5-16 14:08:17
我好奇,定义 const msg = ref({}),你的 msg.aaa 编译器不报错?
返回顶部