前言

ref 扩展

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

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

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

总结 (reactive) ：
（1）在操作其对象属性时，直接操作即可，无需使用 .value
（2）控制台中可查看，创建的对象为 Proxy

2. 使用 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