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方法,具体的使用方式如下图,勾选即可

相关推荐
昇腾CANN1 小时前
TileLang-Ascend 算子性能优化方法与实操
开发语言·javascript·性能优化·昇腾·cann
老王以为1 小时前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js
web打印社区1 小时前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
这个DBA有点耶1 小时前
分组排名不用窗口函数?那你还在写几十行的子查询
前端·代码规范
ZhiqianXia1 小时前
《The Design of Design》阅读笔记
前端·笔记·microsoft
有马贵将1 小时前
【5】微前端知识点总结
前端·架构
mkae2 小时前
eBPF高性能版fail2ban
前端
_柴富自由2 小时前
前端项目国际化解决方案
前端
isixe2 小时前
Uniapp 监听回到前台并全局唯一弹窗
前端
牛奶2 小时前
AI双层代码治理:Monorepo × Harness Engineering
前端·aigc·ai编程