Vue3.0学习 - 第六节，什么是ref ，ref入门

ref入门

1、什么是ref?

• ref和reactive一样也是用来实现响应式数据的方法
• 由于reactive必须传递一个对象，所以导致在企业开发中， 如果我们只想让某个变量实现响应式的时候会很麻烦，所以vue3提供了ref方法，实现对简单值得监听

 ref 关键源码

function createRef(rawValue, shallow) {
  if (isRef(rawValue)) {
    return rawValue
  }
  let value = shallow ? rawValue : convert(rawValue)
  const r = {
    __v_isRef: true,
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newVal) {
      if (hasChanged(toRaw(newVal), rawValue)) {
        rawValue = newVal
        value = shallow ? newVal : convert(newVal)
        trigger(
          r,
          TriggerOpTypes.SET,
          'value',
          __DEV__ ? { newValue: newVal } : void 0
        )
      }
    }
  }
  return r
}

关注几个重点就行：

let value = shallow ? rawValue : convert(rawValue)

这一行会获得这个对象在使用的时候实际返回的有效 value 值。如果是 shallow 对象，那么不会对它进行任何封装。shallow 是什么后面会讲。

convert 方法的内容如下

const convert = val => isObject(val) ? reactive(val) : val

如果不是对象，那么不做改变；如果是对象，那么将它转化为 reactive 。可以这么理解，ref 是多做了一层的 reactive 。

__v_isRef: true

vue3 通过这个数值   __v_isRef:true   来判断 ref 对象。

 

通过 ref 创建并 return 的对象，在 html 中引用的时候是可以忽略掉 value 的。例如我们在上一个篇章中提到的 Date 对象。

如果传入的参数是个对象，而我们要使用的是它的子元素的话，依然可以这么做。

 

ref本质：

• ref底层本质还是reactive
• 系统会根据我们传的值会自动转成 ref(xxx) ——> reactive({value:xxx})

注意点：

• 在Vue中使用ref的值不用通过value获取
•  在js中使用ref必须通过value获取

判断是ref类型还是reactive，引入Vue方法 isRef 和 isReactive

 代码

效果如图