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

相关推荐
默_笙5 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
程序员老赵6 小时前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨6 小时前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
Dovis(誓平步青云)6 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
穆梓兰煊6 小时前
TS5.7 vs 裸JS:AI应用少3坑
前端
榆瓷6 小时前
闲着没事,我把 WebGPU 的样板代码封成了一个库
前端
136096757236 小时前
页面打不开不是 Nginx 的错
前端·后端
xieter6 小时前
【技术精选】TypeScript 高级类型体操:条件类型与模板字面量深度剖析 (2026-10-06)
javascript
ss2737 小时前
AI全栈实战 | 3.3-02 Python 并发:有 GIL 为什么还用多线程,asyncio 和 JS 事件循环同源不同味
开发语言·javascript·python
liangshanbo12157 小时前
高级前端面试题:package.json 常见字段
前端·json