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

相关推荐
炫饭第一名3 分钟前
Cursor 一年深度开发实践:前端开发的效率革命🚀
前端·程序员·ai编程
摇滚侠14 分钟前
Vue 项目实战《尚医通》,获取挂号医生的信息展示,笔记43
前端·javascript·vue.js·笔记·html5
晴殇i16 分钟前
关于前端基础快速跨入鸿蒙HarmonyOS开发
前端·harmonyos
k093330 分钟前
vue3中基于AntDesign的Form嵌套表单的校验
前端·javascript·vue.js
茶憶32 分钟前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
没头脑和不高兴y1 小时前
Element-Plus-X:基于Vue 3的AI交互组件库
前端·javascript
ErMao1 小时前
Proxy 与 Reflect:最硬核、最实用的解释
前端·javascript
N***73851 小时前
前端路由权限动态更新,Vue与React实现
前端·vue.js·react.js
k09331 小时前
在组件外(.js文件)中使用pinia的方法2--在http.js中使用pinia
开发语言·javascript·http
xiaoxue..1 小时前
用 Node.js 手动搭建 HTTP 服务器:从零开始的 Web 开发之旅!
服务器·前端·http·node.js