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

相关推荐
HWL567911 分钟前
获取网页首屏加载时间
前端·javascript·vue.js
烟锁池塘柳022 分钟前
【已解决】Google Chrome 浏览器报错 STATUS_ACCESS_VIOLATION 的解决方案
前端·chrome
速易达网络42 分钟前
基于RuoYi-Vue 框架美妆系统
前端·javascript·vue.js
LYS_06181 小时前
RM赛事C型板九轴IMU解算(4)(卡尔曼滤波)
c语言·开发语言·前端·卡尔曼滤波
We་ct1 小时前
LeetCode 151. 反转字符串中的单词:两种解法深度剖析
前端·算法·leetcode·typescript
yinmaisoft2 小时前
JNPF 表单模板实操:高效复用表单设计指南
前端·javascript·html
37方寸2 小时前
前端基础知识(JavaScript)
开发语言·前端·javascript
Whisper_Sy3 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 应用列表实现
android·开发语言·javascript·flutter·php
json{shen:"jing"}3 小时前
1. 两数之和
前端·javascript·数据库
github.com/starRTC3 小时前
Claude Code中英文系列教程19:使用subagent子代理与创建自定义子代理【重要】
前端·javascript·数据库