V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xing393939
V2EX  ›  Vue.js

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

  •  
  •   xing393939 ·
    xing393939 · 3 天前 · 812 次点击

    代码 1: https://run.iviewui.com/GJQd3slb

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

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

    (两者的区别仅仅在于第 8 行)

    8 条回复    2024-05-16 14:08:17 +08:00
    rabbbit
        1
    rabbbit  
       3 天前   ❤️ 1
    txt.value = msg.aaa
    ->
    txt.value = msg.value.aaa
    qq347891134
        2
    qq347891134  
       3 天前   ❤️ 1
    少了.value ,应该是
    const onClick = () => {
    txt.value = msg.value.aaa
    }
    </script>
    QAQqingju
        3
    QAQqingju  
       3 天前   ❤️ 1
    ref 需要.value
    zzzzhan
        4
    zzzzhan  
       3 天前   ❤️ 1
    你知道赋值给 txt.value ,为什么不知道取值的时候也要取 msg.value
    peasant
        5
    peasant  
       3 天前   ❤️ 1
    https://cn.vuejs.org/api/reactivity-core#ref

    用 ref 的在 js 里获取值必须用.value 来取值,reactive 不需要
    marsKnight
        6
    marsKnight  
       3 天前   ❤️ 1
    vue3 中 ref 和 reactive 使用是不一样的 ref 创建的必须使用.value 去访问值 reactive 创建的可以直接通过对象属性去修改值 楼主可以看看官网二者介绍
    lisongeee
        7
    lisongeee  
       3 天前   ❤️ 1
    ts 的应用场景之一就是这种代码,在 ts 里你的第一段代码会报编译错误
    Dik1212
        8
    Dik1212  
       3 天前
    我好奇,定义 const msg = ref({}),你的 msg.aaa 编译器不报错?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2251 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:50 · PVG 15:50 · LAX 00:50 · JFK 03:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.