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

相关推荐
Pedantic1 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘2 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆2 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师3 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆3 小时前
VSCode自动格式化三要素
前端
爱勇宝4 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员
kyriewen4 小时前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user20585561518136 小时前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode6 小时前
Redis 在生产项目的使用
前端·后端