手摸手-学习 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