当前位置: 首页 > article >正文

vue3中 ref和reactive的区别

ref的主要作用

  • ref 函数接受的参数数据类型可以是原始数据类型也可以是引用数据类型。
  • 在模板中使用 ref 时,我们不需要加 .value,因为当 ref 在模板中作为顶层属性被访问时,它们会被自动解包,
<p>count: {{ count }}</p>
  • 在js中,访问和更新数据都需要加 .value。
count.value++

reactive的主要作用

  • reactive 的参数只能是对象或者数组或者像 Map、Set 这样的集合类型。
  • 将一个普通的对象转换成响应式对象。它会递归地将对象的所有属性转换为响应式数据。它返回的是一个 Proxy 对象,所以在模板中使用时不需要加 .value
<p>proxy.count:{{ proxy.count }}</p>
  • reactive() 返回的是一个原始对象的 Proxy,它和原始的对象是不相等的。
  • 在js中,访问和更新数据都不需要加 .value。
  const proxy = reactive({
    count: 1
  });
  
  proxy.count++;

详情请看链接:ref和reactive的区别


http://www.kler.cn/a/390900.html

相关文章:

  • 万字长文解读深度学习——ViT、ViLT、DiT
  • 万字长文分析函数式编程
  • Xshell,Shell的相关介绍与Linux中的权限问题
  • 平替 Spring 正当时!Solon v3.0.3 发布
  • C# 集合与泛型
  • HTML之列表
  • RNN(循环神经网络)详解
  • 【独立同分布】
  • LeetCode 二分算法 范围内整数的最大得分
  • [CUDA] cuda kernel开发记录
  • HTTP TCP三次握手深入解析
  • ESLint 使用教程(七):ESLint还能校验JSON文件内容?
  • XSS漏洞--常用payload及绕过
  • 关于解决使用VMWare内的虚拟机无法识别USB问题小结
  • 【JavaEE】文件io
  • Yocto项目 - 小心Overrides机制还用在Tasks中
  • mysql占用内存过大问题排查
  • java 递归算法案例讲解
  • Linux——简单认识vim、gcc以及make/Makefile
  • Python数据分析NumPy和pandas(二十六、数据整理--连接、合并和重塑 之三:重塑和透视)
  • uniapp路由与页面跳转详解:API调用与Navigator组件实战
  • 如何使用腾讯云GPU云服务器自建一个简单的类似ChatGPT、Kimi的会话机器人
  • OpenCV与AI深度学习 | 基于YoloV11自定义数据集实现车辆事故检测(有源码,建议收藏!)
  • vue中如何关闭eslint检测?
  • 【子串分值——贡献法】
  • 软考:去中心化的部署有什么特点