vue3原始值响应方案及响应丢失问题

前言

        我们了解到非原始值是使用 proxy 进行代理的，但是 proxy 无法对 原始值进行代理。vue2中 object.defineproperty 也无法直接截取原始值，但是我们是将数据放入 data 中，对 data 整个对象进行代理，自然就使得 data 中的原始值也能进行响应。但是 vue3 没有 data 选项，哪是怎么实现原始值响应的？这就要介绍我们要学的内容了。

       注意：下面的实现原理并非是真正的源码，可以看做是极简后的源码核心实现。这样做的目的是如果放入源码，源码非常多且杂，不能一目了然看出其核心原理实现。

一、ref 的引入

ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用：

const name = ref('小黑子')

ref 是怎么实现的呢？其实就是用对象“包裹”原始值。我们再来看一下 ref 的实现：

function ref(val){
    // 使用对象包裹原始值
    const wrapper = {
        value:val    
    }
    // 利用 reactive 将对象变成响应式数据
    return reactive(wrapper)
}

        ref 的实现就是这么简单。ref 对原始值响应主要就做了这两件事：1、使用对象包裹原始值。2、使用 reactive 将包裹对象变为响应式数据。

二、isref 的实现

       我们使用 ref 创建一个响应式对象，但是我们要怎么区别一个对象是普通对象还是 ref 对象呢？于是我们的 isref 出现了。我们看一下它的使用：

const name = ref('cj') console.log(isRef(name)); // true

那么它的实现原理是怎样的呢？主要实现还是在 ref API内部，我们来看一下具体实现代码：

function ref(val){
    const wrapper = {
        value:val    
    }
    Object.defineProperty(warpper,&