vue3 reactive 和 ref 的区别

1. 定于数据角度对比：ref 用来定义：基本类型数据reactive 用来定义：引用类型，例如对象、或数组类型的数据备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta ht

alokka

5368人浏览 · 2022-04-25 17:57:14

alokka · 2022-04-25 17:57:14 发布

1. 定义数据角度对比：

ref 用来定义：基本类型数据

reactive 用来定义：引用类型，例如对象、或数组类型的数据

备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script src="../../dist/vue.global.js"></script>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const { ref, reactive } = Vue
    const App = {
      setup () {
        const data = ref({
          name: 'lokka'
        })
        console.log(data)
        return {
          data
        }
      }
    }
    const app = Vue.createApp(App)
    app.mount('#app')
  </script>
</html>

可以看到 ref.value 返回的是一个 proxy 对象，他是通过代理 reactive 实现的，下面让我们看看源码

// packages\reactivity\src\ref.ts
export function ref(value?: unknown) {
  // 调用 createRef 方法
  return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean) {
  // 是否是 ref 对象，是就直接返回
  if (isRef(rawValue)) {
    return rawValue
  }
  // 不是就创建 RefImpl 类
  return new RefImpl(rawValue, shallow)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    // 判断 value 值是否是一层，默认是否
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

// packages\reactivity\src\reactive.ts

export const toReactive = <T extends unknown>(value: T): T =>
  // 判断是否为对象，是对象就由 reactive 处理
  isObject(value) ? reactive(value) : value

2. 原理角度对比：

ref 通过 Class 的 get 与 set 来实现响应式的（数据劫持）

reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。

3. 使用角度对比：

ref 定义的数据：操作数据需要 .value,读取数据时模版中直接读取不需要 .value

reactive 定义的数据：操作数据与读取数据，均不需要 .value

可以得出 data.value.name === obj.name，但是对象更推荐用 reactive 定义，语义化更强

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script src="../../dist/vue.global.js"></script>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const { ref, reactive } = Vue
    const App = {
      setup () {
        const data = ref({
          name: 'lokka'
        })
        const obj = reactive({
          name: 'lokka'
        })
        console.log(data.value.name === obj.name) // true
        return {
          data,
          obj
        }
      }
    }
    const app = Vue.createApp(App)
    app.mount('#app')
  </script>
</html>