vue响应式原理

接下来我们通过上面的知识来总结vue响应式：

在vue2中使用defineProperty：
我们来创建一个简单的例子，创建一个新的js文件

function vue() {
    this.$data = {a: 1}
    this.el = document.getElementById('app');
    this.virtualdom = ''
    this.observe(this.$data);
    this.render()
}

vue.prototype.observe = function(obj) {
    var self = this;
    var value;
    for (var key in obj) {
        value = obj[key];
        if (typeof value === 'object') {
            this.observe(value)
        } else {
            Object.defineProperty(this.$data, key, {
                get: function() {
                    // 依赖收集
                    return value;
                },
                set: function(newval) {
                    value = newval;
                    self.render()
                }
            })
        }
    }
}

vue.prototype.render = function() {
    this.virtualdom = 'I am' + this.$data.a;
    this.el.innerHTML = this.virtualdom
}

然后创建一个html文件，来调用js文件

 <div id="app">
  </div>
  <script src="./vue.js"></script>
  <script>
      var vm = new vue();
      setTimeout(function() {
        vm.$data.a = '修改后的内容'
      }, 2000)
  </script>

在vue3中：
使用了proxy实现，只需要把observe替换为以下的代码就行：

vue.prototype.observe = function(obj) {
    var self = this;
    this.$data = new Proxy(this.$data, {
        get: function(target, key) {
            return target[key]
        },
        set: function(target, key, newval) {
            target[key] = newval
            self.render()
        }
    })
}