vue中 ref 和 reactive 的区别与联系

官方原文:Vue3 建议使用 ref() 作为声明响应式状态的主要API。

  • ref 用于将基本类型的数据(如字符串、数字,布尔值等)和引用数据类型(对象) 转换为响应式数据。使用 ref 定义的数据可以通过 .value 属性访问和修改。
  • reactive 用于将对象转换为响应式数据,包括复杂的嵌套对象和数组。使用 reactive 定义的数据可以直接访问和修改属性。
  • ref 和 reactive 的区别
ref reactive
支持基本数据类型&引用数据类型 只支持对象和数组(引用数据类型)
使用 .value 访问属性 能直接访问属性
传入函数时,不会失去响应 将对象传入函数时,失去响应
  • tips:reactive使用不当会失去响应
const userForm = reactive({
   
  username: "",
  password: "",
  role: 2,//1是管理员,2是编辑
  introduction: "",
})
//调接口的时候
userForm = res.data.data[0]

会报声明错误,使用let,不会响应,数据不显示
在这里插入图片描述
使用ref 或者 使用Object.assign

Object.assign(userForm, res.data.data[0])

相关推荐

  1. Vuerefreactive区别

    2023-12-27 09:24:02       41 阅读
  2. Vue3refreactive区别

    2023-12-27 09:24:02       37 阅读
  3. Vue3 refreactive区别是什么?

    2023-12-27 09:24:02       34 阅读
  4. vue refreactive区别

    2023-12-27 09:24:02       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-27 09:24:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-27 09:24:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-27 09:24:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-27 09:24:02       20 阅读

热门阅读

  1. Hadoop生产集群各种维护命令

    2023-12-27 09:24:02       56 阅读
  2. 在Spring Boot中使用Redis

    2023-12-27 09:24:02       40 阅读
  3. 自动化 使用Python+pandas在数据库取值

    2023-12-27 09:24:02       29 阅读
  4. Spring AOP 中定义切入点 @target 与 @within 的区别

    2023-12-27 09:24:02       38 阅读
  5. PostgreSql 并行

    2023-12-27 09:24:02       47 阅读
  6. SpringCloud跨服务调用失败Seata无法回滚解决办法

    2023-12-27 09:24:02       32 阅读
  7. 【常用前端框架总结】

    2023-12-27 09:24:02       36 阅读
  8. 产业互联网,并不存在所谓的平台和中心

    2023-12-27 09:24:02       43 阅读