(3)手摸手-学习 Vue3 之 变量声明【ref 和 reactive】区别

手摸手-学习 Vue3 之 变量声明【ref 和 reactive】区别

  • 前言
  • [ref 扩展](#ref 扩展)
  • [ref 和 reactive 区别](#ref 和 reactive 区别)

前言

ref 扩展

在之前博文《(2)手摸手-学习 Vue3 之 变量声明【ref 和 reactive】》中有提到:

当时已基本类型 进行演练说明,此时以 对象 类型,加以说明:

  1. 在使用 ref 创建对象前,先行使用 reactive 创建对象,回顾之前博文内容,如下:

总结 (reactive)

(1)在操作其对象属性时,直接操作即可,无需使用 .value

(2)控制台中可查看,创建的对象为 Proxy

  1. 使用 ref 创建对象,如下:

    查看浏览器:

总结(ref)

(1) 在代码层面,操作对象属性值时,需使用 .value,不能直接操作。

(2) 控制台查看,其创建的对象为 RefImpl 其内 value 属性值对象为 Proxy (底层和 reactive 一样)

ref 和 reactive 区别

经过上述的功能验证测试,这里进行总结:

(1)ref 可以创建 基本类型 、及对象类型。reactive 只能创建对象类型

(2)ref 在操作变量时,不能直接操作变量值,需先使用 .value。reactive 在操作变量时,可以直接操作变量值,无需使用.value

(3)底层(控制台可查看)创建出的对象不同:reactive 创建的为Proxy,ref 创建的为 RefImpl 但其内 value 属性值为 Proxy 对象。

若有转载,请标明出处:https://blog.csdn.net/CharlesYuangc/article/details/149126966

相关推荐
遇见尚硅谷6 小时前
C语言:*p++与p++有何区别
c语言·开发语言·笔记·学习·算法
艾莉丝努力练剑6 小时前
【数据结构与算法】数据结构初阶:详解排序(二)——交换排序中的快速排序
c语言·开发语言·数据结构·学习·算法·链表·排序算法
jz_ddk7 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
试着7 小时前
零基础学习性能测试第五章:Tomcat的性能分析与调优-Tomcat原理,核心配置项,性能瓶颈分析,调优
学习·零基础·tomcat·性能测试
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
@蓝莓果粒茶9 小时前
LeetCode第350题_两个数组的交集II
c++·python·学习·算法·leetcode·职场和发展·c#
无名工程师9 小时前
AI 学习过程中各阶段的学习重点、时间规划以及不同方向的选择与建议等内容
人工智能·学习
试着9 小时前
零基础学习性能测试第五章:JVM性能分析与调优-垃圾回收器的分类与回收
jvm·学习·零基础·性能测试·垃圾回收器
livemetee9 小时前
Flink2.0学习笔记:Stream API 常用转换算子
大数据·学习·flink
WXX_s9 小时前
【OpenCV篇】OpenCV——03day.图像预处理(2)
人工智能·python·opencv·学习·计算机视觉