Vue3中reactive变量重新赋值无法响应的3种处理方法

 更新时间:2023年08月04日 10:43:13   作者:敦厚的曹操  
这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下

第一种解决方案:变量值包裹对象,加一个{data:变量值}

1、html

  <div>a=【{{a.data}}】</div>
  <div>-----------------</div>
  <div>【{{ b.data[0] }}】</div>
  <div>【{{ b.data[1] }}】</div>
  <div>【{{ b.data[2] }}】</div>

2、定义reactive变量

    let a=reactive({data:"110"});
    let b=reactive({data:[0,1,2]});

3、重新赋值

      a.data="119";
      b.data=[...[9,8,7]];

第二种解决方案:ref

1、html

  <div>a=【{{a}}】</div>
  <div>-----------------</div>
  <div>【{{ b[0] }}】</div>
  <div>【{{ b[1] }}】</div>
  <div>【{{ b[2] }}】</div>

2、定义ref变量

    let a=ref("110");
    let b=ref([0,1,2]);

3、赋值

      a.value="119";
      b.value=[...[9,8,7]];

第三种方案:push(不推荐)

总结

到此这篇关于Vue3中reactive变量重新赋值无法响应的3种处理方法的文章就介绍到这了,更多相关Vue3 reactive变量重新赋值无法响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue之TodoList案例详解

    Vue之TodoList案例详解

    这篇文章主要为大家介绍了Vue之TodoList的案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • vue2.0 自定义组件的方法(vue组件的封装)

    vue2.0 自定义组件的方法(vue组件的封装)

    这篇文章主要介绍了vue2.0 自定义组件的方法(vue组件的封装),本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-06
  • vue ElementUI的from表单实现登录效果的示例

    vue ElementUI的from表单实现登录效果的示例

    本文主要介绍了vue ElementUI的from表单实现登录效果的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue使用blob下载文件遇到的问题小结

    vue使用blob下载文件遇到的问题小结

    Blob 对象表示一个不可变、原始数据的类文件对象,这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下
    2024-02-02
  • Vue3进阶主题Composition API使用详解

    Vue3进阶主题Composition API使用详解

    这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue3的组合式API中使用ref()函数的例子

    Vue3的组合式API中使用ref()函数的例子

    你们是否听说过Vue3的组合式API?它可是Vue3的新玩法,把以前的Vue2组件函数转化为了函数组件。好了,今天我要和大家分享的是如何在组合式API中使用ref()函数,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • 基于Vue实现timepicker

    基于Vue实现timepicker

    这篇文章主要为大家详细介绍了基于Vue实现timepicker效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue3.0实现无限级菜单

    Vue3.0实现无限级菜单

    这篇文章主要为大家详细介绍了基于Vue3.0实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • antd design table更改某行数据的样式操作

    antd design table更改某行数据的样式操作

    这篇文章主要介绍了antd design table更改某行数据的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 解决vue+webpack打包路径的问题

    解决vue+webpack打包路径的问题

    下面小编就为大家分享一篇解决vue+webpack打包路径的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论