【vue高级】MVVM实现原理 第二篇 数据劫持Observe

【vue高级】MVVM实现原理 第一篇 Object.defineProperty
【vue高级】MVVM实现原理 第二篇 数据劫持Observe
【vue高级】MVVM实现原理 第三篇 编译模板Compile
回想一下 vue 的使用方法

<div id="app">
	{{a}}
</div>
<script>
	let vm = new Vue({
		el: '#app'
		data: {
			a: 1
			}
	})
</script>

我们这一篇的任务就是将 data 里面的属性全部通过 Object.defineProperty() 来进行定义
那么我们接下来便实现 Vue 这个构造函数
用过 vue 的同学都知道，通过 vm.$options 能拿到实例的所有属性，那我们给它加上

function Vue(options = {}) {
  this.$options = options // 将所有属性挂载在了$options
}

接下来，我们就观察 data，劫持每一个属性

function Vue(options = {}) {
  this.$options = options // 将所有属性挂载在了$options
  // this._data
  var data = (this._data = this.$options.data)
  observe(data)
}

observe 实现：

// 观察对象，给对象增加Object.defineProperty
function observe(data) {
  if (typeof data !== 'object') return
  // 这里写我们的主要逻辑
  for (let key in data) {
    // 将data属性通过Object.defineProperty的方式定义属性
    let val = data[key]
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        return val
      },
      set(newVal) {
        // 更改值的时候
        if (newVal === val) {
          // 设置的值和以前是一样的，忽视
          return
        }
        val = newVal
      },
    })
  }
}

尝试修改实例的属性值

vm._data.a = 2
console.log(vm._data.a)		// 2

修改成功
如果我们的数据比较复杂：

data: {
		a: {
			b: 1
		}
	}

我们希望vm._data.a.b也有数据劫持，即也有 get()、set() 方法，又或者设置的新属性值是一个对象，该对象中的属性也有数据劫持，只需要对属性值也执行下相同操作即可，修改后的observe如下

function observe(data) {
  if (typeof data !== 'object') return
  for (let key in data) {
    // 将data属性通过Object.defineProperty的方式定义属性
    let val = data[key]
    observe(val)
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        return val
      },
      set(newVal) {
        // 更改值的时候
        if (newVal === val) {
          // 设置的值和以前是一样的，忽视
          return
        }
        val = newVal
        observe(newVal)
      },
    })
  }
}

大家可以修改打印一下，是不是所有属性都被劫持了
现在我们取值的时候用的是vm._data.属性值，不方便，想用vm.属性值 这种方式，怎么改呢，用实例代理一下实例._data即可，修改后的构造函数如下

function Vue(options = {}) {
  this.$options = options // 将所有属性挂载在了$options
  // this._data
  var data = (this._data = this.$options.data)
  observe(data)
  // this 代理了 this._data
  for (let key in data) {
    Object.defineProperty(this, key, {
      enumerable: true,
      get() {
        return this._data[key]
      },
      set(newVal) {
        this._data[key] = newVal
      },
    })
  }
}

最后，优化一下observe结构

// 观察对象，给对象增加Object.defineProperty
function Observe(data) {
  // 这里写我们的主要逻辑
  for (let key in data) {
    // 将data属性通过Object.defineProperty的方式定义属性
    let val = data[key]
    observe(val)
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        return val
      },
      set(newVal) {
        // 更改值的时候
        if (newVal === val) {
          // 设置的值和以前是一样的，忽视
          return
        }
        val = newVal
        observe(newVal)
      },
    })
  }
}
function observe(data) {
  if (typeof data !== 'object') return
  return new Observe(data)
}