01/ 基础类型的响应性 —— ref

在vue3里面，我们可以通过 reactive 来实现引用类型的响应性，那么基础类型的响应性如何来实现呢？

可能你会想到这样来实现：

const count = reactive({value: 0})
count.value += 1

这么做确实可以实现，而且也很像 ref 的使用方式，都是要 .value 嘛。那么 ref内部是不是这么实现的呢？

我们先定义两个 ref 的实例并且打印看看。

  const refCount = ref(0) // 基础类型
    console.log('refCount ', refCount )
    const refObject = ref({ value: 0 }) // 引用类型
    console.log('refObject ', refObject )

看一下结果：

基础类型的 ref

引用类型的 ref

我们都知道 reactive 是通过 ES6 的 Proxy 来实现的，基础类型的 ref 显然和 Proxy 没啥关系，而引用类型的 ref 是先把原型变成 reactive，然后再挂到 value 上面。这样看来，和我们的猜测不太一样呢，那么 ref 到底是如何实现的呢？我们可以看一下 ref 的源码。

02/ref 的源码

代码来自于 vue.global.js ，调整了一下先后顺序。

  function ref(value) {
      return createRef(value);
  }
  function createRef(rawValue, shallow = false) {
      if (isRef(rawValue)) {
          return rawValue;
      }
      return new RefImpl(rawValue, shallow);
  }
  class RefImpl {
      constructor(_rawValue, _shallow = false) {
          this._rawValue = _rawValue;
          this._shallow = _shallow;
          this.__v_isRef = true;
          this._value = _shallow ? _rawValue : convert(_rawValue); // 深层 ref or 浅层ref
      }
      get value() {
          track(toRaw(this), "get" /* GET */, 'value');
          return this._value;
      }
      set value(newVal) {
          if (hasChanged(toRaw(newVal), this._rawValue)) {
              this._rawValue = newVal;
              this._value = this._shallow ? newVal : convert(newVal);
              trigger(toRaw(this), "set" /* SET */, 'value', newVal);
          }
      }
  }
  const convert = (val) => isObject(val) ? reactive(val) : val;

ref 这是我们使用的函数，里面使用 createRef 来创建一个实例。
createRef 做一些基础判断，然后进入主题，正式创建ref。这里还可以创建 shallowRef。
RefImpl 这个才是主体，显然这是 ES6 的 class，constructor 是初始化函数，依据参数创建一个实例，并且设置实例的属性。这个和上面 ref 的打印结果也是可以对应上的。整个class的代码也是非常简单，设置几个“内部”属性，记录需要的数据，然后设置“外部”属性 value，通过setter、getter 实现对 value 的操作拦截，set 里面主要是 trigger 这个函数，由它调用模板的自动刷新的功能。
convert 很显然，判断一下参数是不是 object，如果是的话，变成 reactive 的形式。这个就可以解释，引用类型的 ref 是如何实现响应性的，明显是先变成 reactive，然后在挂到 value 上面（挂之前判断一下是不是浅层的）。

03/ ref 和 reactive 的关系

通过打印结果的对比以及分析源码可以发现：

基础类型的 ref 和 reactive 没有任何关系。
引用类型的 ref ，先把 object 变成 reactive ，即利用 reactive 来实现引用类型的响应性。

关系就是这样的，千万不要再混淆了。

04/ shallowRef

浅层响应式，只监听 .value 的变化，真简单类型的响应式。

function shallowRef(value) {
      return createRef(value, true); // true 浅层
  }

通过源码我们可以发现，在把引用类型挂到 value 之前，先判断一下是不是浅层的，如果是浅层的，并不会变成 reactive，而是直接把原来的对象挂在 value 上面，shallowRef 和 ref 的区别就在于这一点。

我们写几个实例看看效果：

 setup () {
     // 浅层的测试 
    // 基础类型
    const srefCount = shallowRef(0)
    console.log('refCount ', srefCount )
    // 引用类型
    const srefObject = shallowRef({ value: 0 })
    console.log('refObject ', srefObject )
    // 嵌套对象
    const srefObjectMore = shallowRef({ info: {a: 'jyk'} })
    console.log('shallowRef ', srefObjectMore )
    // reactive 的 shallowRef
    const ret = reactive({name: 'jyk'})
    const shallowRefRet = shallowRef(ret)
    console.log('shallowRefRet ', shallowRefRet )
    // ==================== 事件 ==================
    // 修改基础类型
    const setNumber = () => {
      srefCount.value = new Date().valueOf()
      console.log('srefCount ', srefCount )
    }
    // 修改引用类型的属性
    const setObjectProp = () => {
      srefObject.value.value = new Date().valueOf()
      console.log('srefObject ', srefObject )
    }
    // 修改引用类型的value
    const setObject = () => {
      srefObject.value = { value: new Date().valueOf() }
      console.log('srefObject ', srefObject )
    }
    // 修改嵌套引用类型的属性
    const setObjectMoreProp = () => {
      srefObjectMore.value.info.a = new Date().valueOf()
      console.log('srefObjectMore ', srefObjectMore )
    }
    // 修改嵌套引用类型的value
    const setObjectMore = () => {
      srefObjectMore.value = { qiantao: 1234567 }
      console.log('srefObjectMore ', srefObjectMore )
    }
    // 修改reactive 的浅层ref
    const setObjectreactive = () => {
      shallowRefRet.value.name = '浅层的reactive'
      console.log('shallowRefRet ', shallowRefRet )
    }
  }

看看结果：

浅层的ref

测试了一下响应性：

基础类型 srefCount 有响应性；
引用类型 srefObject 的属性没有响应性，但是直接修改 .value 是有响应性的。
嵌套的引用类型 srefObjectMore ，属性和嵌套属性都是没有响应性的，但是直接修改 .value 是有响应性的。
reactive 套上 shallowRef ，然后修改 shallowRef.value.属性 = xxx ，也是可以响应的，所以浅层的ref 也不绝对，还要看内部结构。

05/ triggerRef

手动执行与 shallowRef 关联的任何效果。

官网的中文版里面写的很绕，其实就是让 shallowRef 原本不具有响应性的部分，具有响应性。shallowRef 是浅层的，深层部分是没有响应性的，那么如果非得让这部分也具有响应性呢？这时候可以用 triggerRef 来实现。好吧，目前还没有想到有啥具体的应用场景，因为一般都直接简单粗暴的用 ref 或者 reactive 了，全都自带响应性。

测试了各种情况，发现 triggerRef 并不支持 shallowReactive，还以为能支持呢。（或许是我写的测试代码有问题吧，官网也没提 shallowReactive）

基于上面的例子，在适当的位置加上 triggerRef(xxx)就可以了。

 setup () {
    // 引用类型
    const srefObject = shallowRef({ value: 0 })
    // 嵌套对象
    const srefObjectMore = shallowRef({ value: {a: 'jyk'} })
    // reactive 的 shallowRef
    const ret = reactive({name: 'reactive'})
    const shallowRefRet = shallowRef(ret)
    // 浅层的reactive
    const myShallowReactive = shallowReactive({info:{name:'myShallowReactive'}})
    const setsRet = () => {
      myShallowReactive.info.name = new Date().valueOf()
      triggerRef(myShallowReactive)  // 修改后使用，不支持
   }
    // ==================== 事件 ==================
    // 修改引用类型的属性
    const setObjectProp = () => {
      srefObject.value.value = new Date().valueOf()
      triggerRef(srefObject) // 修改后使用
    }
    // 修改引用类型的value
    const setObject = () => {
      srefObject.value = { value: new Date().valueOf() }
      triggerRef(srefObject)
   }
    // 修改嵌套引用类型的属性
    const setObjectMoreProp = () => {
      srefObjectMore.value.value.a = new Date().valueOf()
      triggerRef(srefObjectMore)
  }
    // 修改嵌套引用类型的value
    const setObjectMore = () => {
      srefObjectMore.value.value = { value: new Date().valueOf() }
      triggerRef(srefObjectMore)
    }
    // 修改reactive 的浅层ref
    const setObjectreactive = () => {
      shallowRefRet.value.name = '浅层的reactive' + new Date().valueOf()
      triggerRef(shallowRefRet)
    }
    return {
      srefObject, // 引用类型
      srefObjectMore, // 嵌套引用类型
      shallowRefRet, // reactive 的浅层ref
      myShallowReactive, // 浅层的reactive
      setsRet, // 修改浅层的reactive
      setObjectProp, // 修改引用类型的属性
      setObject, // 修改引用类型的value
      setObjectMoreProp, // 修改嵌套引用类型的属性
      setObjectMore, // 修改嵌套引用类型的value
      setObjectreactive // 试一试reactive的浅层ref
    }
  }

深层部分，不使用 triggerRef 就不会刷新模板，使用了 triggerRef 就可以刷新模板。话说，为啥会有这个函数？

手拉手带你了解Vue3的 ref 和相关函数以及计算属性（一）

01/ 基础类型的响应性 —— ref

02/ref 的源码

03/ ref 和 reactive 的关系

04/ shallowRef

05/ triggerRef

热门文章

最新文章

相关课程

相关电子书