Vue内部原理（二）| 小册免费学

枫景
102 阅读3分钟

上一讲主要介绍了数据劫持相关的概念，现在起我们正式进入到Vue的数据绑定原理，开始感受Vue源码的精妙

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

——《Vue官方文档》

先来看一个很简单的示例，他可能会让你更清除这个过程

<body>
  <div id="app"></div>
  <script>
    function defineReactive(obj, key, val) {
        Object.defineProperty(obj, key, {
          get() {
            console.log('读取name的值')
            return val
          },
          set(newVal) {
            val = newVal
            document.getElementById('app').innerHTML = newVal
          }
        })
      }

      const bar = {
        name: ''
      }
      defineReactive(bar, 'name', 'king')
      document.getElementById('app').innerHTML = bar.name
  </script>
</body>

这是一个简化版的过程，当重新设置属性值的时候更新视图，当然真正的更新视图并不会这么简单，这只是演示

![QQ录屏20210409081655 00_00_00-00_00_30](gitee.com/liuhao1108/… 00_00_00-00_00_30.gif)

看完了low版，再来看一下high版，先来看一下Vue这一部分的源码架构

image-20210408223959775

我用了Github1s这个工具直接使用在线VScode的形式来看源码非常方便，用法也很简单直接在代码仓库的地址github.com/xxx的url中，将github改为github1s，然后按下回车即可

扯远了，回归正题

看完了架构，那么具体是怎么实现的，继续往下看，为了保持一致性，我的代码模块尽量跟源码保持一致

image-20210408224308380

与数据观察相关的部分是defineReactive，observe和Observer这三部分，defineReactive前面已经说过了负责进行数据劫持，observe的作用其实起到了一个过滤作用，只劫持对象属性，那么不是对象的就要过滤掉，Observer负责真正的数据观察，observe过滤完之后，Observer就要对对象的属性进行观察，怎么观察呢？这就用到了defineReactive，当然如果是数组元素还有另外一套处理方式。

你会发现这三者之间形成了一种递归调用的关系

tes1111111111111t

数据观察阶段所做事情就是对对象的每个属性进行数据劫持，包括子属性，是时候上代码了

先来看observe，主要功能就是过滤掉非对象的变量，代码也很简单

function observe(data) {
  if (typeof data !== 'object') return
  // 调用Observer
  new Observer(data)
}

紧跟着来看一下Observer，通过遍历对象属性来实现劫持

class Observer {
  constructor(value) {
    this.value = value
    this.walk()
  }
  walk() {
    // 遍历该对象，并进行数据劫持
    Object.keys(this.value).forEach((key) => defineReactive(this.value, key))
  }
}

那么下面需要对上面的defineReactive稍加改造，使这三者形成递归

function defineReactive(data, key, value) {
  if(value===undefined) {
    value = data.key
  }
  // 如果value是对象，递归调用observe来监测该对象
  // 如果value不是对象，observe函数会直接返回
  observe(value)
  Object.defineProperty(data, key, {
    get() {
      return value
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue
      observe(newValue) // 设置的新值也要被监听
    }
  })
}

现在为止，我们已经完成了对对象的属性以及对象子对象的数据观察，那么还有一类数据——数组还没有进行处理，那么下一节我们将会介绍Vue中对于数组的处理办法

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情

avatar
文章
阅读
粉丝