手摸手-学习 Vue3 之 变量声明【ref 和 reactive】区别
- 前言
- [ref 扩展](#ref 扩展)
- [ref 和 reactive 区别](#ref 和 reactive 区别)
前言
ref 扩展
在之前博文《(2)手摸手-学习 Vue3 之 变量声明【ref 和 reactive】》中有提到:
当时已基本类型
进行演练说明,此时以 对象
类型,加以说明:
- 在使用
ref
创建对象前,先行使用reactive
创建对象,回顾之前博文内容,如下:
总结
(reactive)
:(1)在操作其对象属性时,直接操作即可,无需使用
.value
(2)控制台中可查看,创建的对象为 Proxy
- 使用
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