vue3中ref与reactive的区别

ref

创建一个响应式数据，一般来说用于创建简单类型的响应式对象，比如String、Number类型

const name = ref('tom')

可以看到，ref方法将这个字符串进行了一层包裹，返回的是一个RefImpl类型的对象，译为引用的实现(reference implement),在该对象上设置了一个不可枚举的属性value，所以使用name.value来读取值。

正如上面所说，ref通常用于定义一个简单类型，那么是否可以定义一个对象或者数组？

const obj = ref({
  age: 12,
  sex: 'man',
})

控制台可以看到，对于复杂的对象，值是一个被proxy拦截处理过的对象，但是里面的属性age和sex不是RefImpl类型的对象，proxy代理的对象同样被挂载到value上，所以可以通过obj.value.age来读取属性，这些属性同样也是响应式的，更改时可以触发视图的更新

reactive

通过上面ref的使用案例，起始不管是复杂引用类型，如array，object等，亦或者是简单的值类型string,number都可以使用ref来进行定义，但是，定义对象的话，通常还是用reactive来实现

const person = reactive({
  height: 180,
})

可以看到返回的person是一个proxy代理的对象，使用时person.height即可

那么能否使用reactive来定义普通类型？

const id = reactive('id是1')

可以看到reactive只能被用来定义对象

ref与reactive的区别与联系

一般来说，ref被用来定义简单的字符串或者数值，而reactive被用来定义对象数组等

ref定义对象时，value返回的是proxy，reactive定义对象时返回的也是proxy，而这确实存在一些联系

ref来定义数据时，会对里面的数据类型进行一层判断，当遇到复杂的引用类型时,还是会使用reactive来进行处理

class RefImpl {
    constructor(value, _shallow) {
        this._shallow = _shallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = _shallow ? value : toRaw(value);
        this._value = _shallow ? value : toReactive(value);
    }
    ////......
}

const toReactive = (value) => isObject(value) ? reactive(value) : value;// 判断参数是否为对象，是对象调用reactive创建，否则返回原始值