Vue数据双向绑定实现原理

Maic

发布于 2022-07-28 12:32:19

80000

代码可运行

文章被收录于专栏：Web技术学苑Web技术学苑

运行总次数：0

代码可运行

在vue中，我们知道它的核心思想是数据驱动视图，表现层我们知道在页面上，当数据发生变化，那么视图层也会发生变化。这种数据变化驱动视图背后依靠的是什么？

正文开始...

vue2源码中的数据劫持

// src/core/instance/observer/index.js
/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

我们会发现其实在vue2源码中，本质上就是利用Object.defineProperty来劫持对象。

每劫持一组对象，每一个属性会实例化一个Dep对象，每个拦截的对象属性都会动态添加get和set将传入的data或者prop变成响应式，在Object.defineProperty的get中，当我们访问对象的某个属性时，就会先调用get方法，依赖收集调用dep.depend()，当我们设置该属性值时就会调用set方法调用dep.notify()``派发更新所有的数据，在调用notify时会调用实例Watch的run,从而执行watch的回调方法。

在vue2源码中劫持对象实现数据驱动视图，那么我们依葫芦画瓢，化繁为简，实现一个自己的数据劫持。

新建一个index.js

// index.js
var options = {
  name: 'Maic',
  age: 18,
  from: 'china'
}
const renderHtml = (data, key) => {
  const appDom = document.getElementById('app');
  appDom.innerHTML  = `<div>
    <p>options:${JSON.stringify(options)}</p>
    <p>${key}: ${JSON.stringify(data)}</p>
  </div>`;
}
const defineReactive = (target, key) => {
  let val = target[key];
  Object.defineProperty(target, key, {
      enumerable: true,
      configurable: true,
      get: function() {
        return val;
      },
      set: function(nval) {
          console.log(nval, '==nval')
          val = nval;
          renderHtml(nval, key);
      }
  })
}
Object.keys(options).forEach(key => {
  defineReactive(options, key);
})
renderHtml(options, 'name');

再新建一个html引入index.js

<!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>vue2-reactive</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>

直接打开index.html

当我们大开控制台时，我们直接修改options.age = 10此时会触发拦截器的set方法，从而进行更新页面数据操作。

在源码里里面处理是相当复杂的，我们可以看到访问数据时，会先调用get方法,在dep.depend()进行依赖收集,然后再设置对象的值时，会调用set方法，派发更新操作。更多关于vue2响应式原理可以参考这篇文章响应式原理[1]

vue3是如何做数据劫持的

vue3主要利用Proxy这个API来实现对象劫持的，关于Proxy可以看下阮一峰老师的es6教程proxy[2]，全网讲解Proxy最好的教程了。

继续用个例子来感受下


var options = {
  name: 'Maic',
  age: 18,
  from: 'china'
}
const renderHtml = (data, key) => {
  const appDom = document.getElementById('app');
  appDom.innerHTML  = `<div>
    <p>options:${JSON.stringify(options)}</p>
    <p>${key}: ${JSON.stringify(data)}</p>
  </div>`;
}
renderHtml(options, 'name');
var proxy = new Proxy(options, {
    get: function (target, key, receiver) {
      console.log(key, receiver)
      return Reflect.get(target, key)
    },
    set: function(target, key, val, receiver) {
      console.log(key, val, receiver);
      renderHtml(val, key);
      return Reflect.set(target, key, val);;
    }
})

当我们在控制输入proxy.name = 111时，此时就会触发new Proxy()内部的set方法，而我们此时采用的是利用Reflect.set(target,key,val)成功的设置了，在get中，我们时用Relect.get(target, key)获取对应的属性值。

这点与vue2中劫持数据的方式比较大，具体可以看下vue3源码响应式reactive实现

// package/reactivity/src/reactive.ts
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a whitelist of value types can be observed.
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

从源码中我们可以看出在vue3使用reative初始化响应式数据时，实际上它就是就是一个被proxy代理后的数据，并且使用WeakMap来存储响应式数据的。

相比较vue2的defineProperty,vue3的Proxy更加强大，因为代理对象对劫持的对象动态新增属性也一样有检测，而defineProperty就没有这种特性，它只能劫持已有的对象属性。

总结

在vue2中数据劫持是用Object.defineProperty，当访问对象属性时会触发get方法进行依赖收集，当设置对象属性时会触发set方法进行派发更新操作。
在vue3中数据劫持时用new Proxy()来做的，可以动态的监测对象的属性新增与删除操作，效率高，实用简单
本文示例code example[3]