(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

相关推荐
软件黑马王子1 小时前
C#系统学习第八章——字符串
开发语言·学习·c#
strongwyy3 小时前
蓝牙墨水屏上位机学习(2)
学习
The_cute_cat5 小时前
Ajax和Axios的初步学习
前端·学习·ajax
amazinging6 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十三天
python·学习
祁思妙想6 小时前
八股学习(五)---MySQL
学习
虾球xz7 小时前
CppCon 2018 学习:THE MOST VALUABLE VALUES
开发语言·c++·学习
丰锋ff8 小时前
计网学习笔记第2章 物理层(灰灰题库)
笔记·学习
Chef_Chen8 小时前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
天水幼麟14 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习