Vue3中ref和reactive的区别

ref既可以实现基本类型的响应式也可以实现对象或者数组类型的响应式,但是需要在变量后加一个value来修改对应的值才可以生效

reactive只能用来实现对象或者数组等类型的响应式,且如果对整个对应进行重新赋值,则响应式会失效,可以通过Object.assign()来实现响应式,具体如下

javascript 复制代码
    let gg=reactive({address:'山西'})


    function updategg(){
      //响应式不生效
      gg={address:"wwwww"}
      //生效,该方法会把后边的对象的参数一个一个追加到第一个指定的对象中
      Object.assign(gg,{address:"wwwww"})

    }

各自的应用场景:

  1. 如果是基本数据类型就用ref
  2. 如果是没有那么深的对象或者数组,那么ref和reactive都可
  3. 如果是深的对象或者数组建议使用reactive

插件介绍:

我们在使用vite新建vue3项目时刚进入vscode会让你安装两个插件

第一个插件一个功能,当我们在使用ref时,调用其修饰的变量时,可自动帮我们生成.value方法,具体的使用方式如下图,勾选即可

相关推荐
李少兄13 小时前
JavaScript 隐式全局变量解析
javascript
honkun613 小时前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs199114 小时前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net
汉堡大王952714 小时前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
雪芽蓝域zzs14 小时前
第26章:ECharts 自定义主题 + 页面一键切换主题(深色 / 浅色两套)
vue.js·echars
梦想很大很大14 小时前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师14 小时前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
雪芽蓝域zzs14 小时前
第22章:ECharts 图表联动(多图表交互联动)
vue.js·echars
daols8814 小时前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载
vue.js·vxe-table
雪芽蓝域zzs15 小时前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip
vue.js·echars