vue双向绑定学习笔记

发表于 | 分类于 ， | 评论数： 0 | 阅读次数： | 阅读次数：

vue 双向绑定效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

效果：

vue双向绑定效果.gif.gif

实现双向绑定效果的做法

目前几种主流的 mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare 等）添加了 change(input)事件，来动态修改 model 和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

  • 发布者-订阅者模式（backbone.js）

    一般通过 sub, pub 的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里。

    这种方式现在毕竟太 low 了，我们更希望通过 vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式

  • 脏值检查（angular.js）

    angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然 Google 不会这么 low，angular 只有在指定的事件触发时进入脏值检测，大致如下：

    • DOM 事件，譬如用户输入文本，点击按钮等( ng-click )
    • XHR 响应事件 ( $http )
    • 浏览器 Location 变更事件 ( $location )
    • Timer 事件( $timeout , $interval )
    • 执行 $digest() 或 $apply()

  • 数据劫持（vue.js）

    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

实现思路

已经了解到 vue 是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉 defineProperty，猛戳这里
整理了一下，要实现 mvvm 的双向绑定，就必须要实现以下几点：

  1. 实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者;
  2. 实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数;
  3. 实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图;
  4. mvvm 入口函数，整合以上三者.

上述流程如图所示：

vue双向绑定流程.png

实现 Observer

我们知道可以利用Obeject.defineProperty()来监听属性变动。
那么将需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var data = { name: 'kindeng' }
observe(data)
data.name = 'dmq' // 哈哈哈，监听到值变化了 kindeng --> dmq

/**
 * 观察数据对象并递归遍历
 * @param {any} data 数据对象
 * @returns
 */
function observe(data) {
  if (!data || typeof data !== 'object') {
    return
  }
  // 取出所有属性遍历
  Object.keys(data).forEach(function(key) {
    defineReactive(data, key, data[key])
  })
}

/**
 * 为数据对象添加getter和setter
 * @param {any} data 数据对象
 * @param {any} key 数据对象中的键
 * @param {any} val 数据对象中的键的对应值
 */
function defineReactive(data, key, val) {
  observe(val) // 监听子属性
  Object.defineProperty(data, key, {
    enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get: function() {
      return val
    },
    set: function(newVal) {
      console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal)
      val = newVal
    },
  })
}

这样我们已经可以监听每个数据的变化了，那么监听到变化之后就是怎么通知订阅者了，所以接下来我们需要实现一个消息订阅器，很简单，维护一个数组，用来收集订阅者，数据变动触发 notify，再调用订阅者的 update 方法，代码改善之后是这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// ... 省略
function defineReactive(data, key, val) {
  var dep = new Dep()
  observe(val) // 监听子属性

  Object.defineProperty(data, key, {
    // ... 省略
    set: function(newVal) {
      if (val === newVal) return
      console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal)
      val = newVal
      dep.notify() // 通知所有订阅者
    },
  })
}

function Dep() {
  this.subs = []
}
Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub)
  },
  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update()
    })
  },
}

那么问题来了，谁是订阅者？怎么往订阅器添加订阅者？
没错，上面的思路整理中我们已经明确订阅者应该是 Watcher, 而且var dep = new Dep();是在 defineReactive方法内部定义的，所以想通过dep添加订阅者，就必须要在闭包内操作，所以我们可以在 getter里面动手脚：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Observer.js
// ...省略
Object.defineProperty(data, key, {
  get: function() {
    // 由于需要在闭包内添加watcher，所以通过Dep定义一个全局target属性，暂存watcher, 添加完移除
    Dep.target && dep.addDep(Dep.target)
    return val
  },
  // ... 省略
})

// Watcher.js
Watcher.prototype = {
  get: function(key) {
    Dep.target = this
    this.value = data[key] // 这里会触发属性的getter，从而添加订阅者
    Dep.target = null
  },
}

这里已经实现了一个 Observer 了，已经具备了监听数据和数据变化通知订阅者的功能。

Observer 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
function Observer(data) {
  this.data = data
  this.walk(data)
}

Observer.prototype = {
  walk: function(data) {
    var me = this
    Object.keys(data).forEach(function(key) {
      me.convert(key, data[key])
    })
  },
  convert: function(key, val) {
    this.defineReactive(this.data, key, val)
  },

  defineReactive: function(data, key, val) {
    var dep = new Dep()
    var childObj = observe(val)

    Object.defineProperty(data, key, {
      enumerable: true, // 可枚举
      configurable: false, // 不能再define
      get: function() {
        if (Dep.target) {
          dep.depend()
        }
        return val
      },
      set: function(newVal) {
        if (newVal === val) {
          return
        }
        val = newVal
        // 新的值是object的话，进行监听
        childObj = observe(newVal)
        // 通知订阅者
        dep.notify()
      },
    })
  },
}

function observe(value, vm) {
  if (!value || typeof value !== 'object') {
    return
  }

  return new Observer(value)
}

var uid = 0

function Dep() {
  this.id = uid++
  this.subs = []
}

Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub)
  },

  depend: function() {
    Dep.target.addDep(this)
  },

  removeSub: function(sub) {
    var index = this.subs.indexOf(sub)
    if (index != -1) {
      this.subs.splice(index, 1)
    }
  },

  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update()
    })
  },
}

Dep.target = null

实现 Compile

compile 主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图.

解析模板指令流程.png

因为遍历解析的过程有多次操作 dom 节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实 dom 节点中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Compile(el) {
  this.$el = this.isElementNode(el) ? el : document.querySelector(el)
  if (this.$el) {
    this.$fragment = this.node2Fragment(this.$el)
    this.init()
    this.$el.appendChild(this.$fragment)
  }
}
Compile.prototype = {
  init: function() {
    this.compileElement(this.$fragment)
  },
  node2Fragment: function(el) {
    var fragment = document.createDocumentFragment(),
      child
    // 将原生节点拷贝到fragment
    while ((child = el.firstChild)) {
      fragment.appendChild(child)
    }
    return fragment
  },
}

compileElement 方法将遍历所有节点及其子节点，进行扫描解析编译，调用对应的指令渲染函数进行数据渲染，并调用对应的指令更新函数进行绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Compile.prototype = {
  // ... 省略
  compileElement: function(el) {
    var childNodes = el.childNodes,
      me = this
    ;[].slice.call(childNodes).forEach(function(node) {
      var text = node.textContent
      var reg = /\{\{(.*)\}\}/ // 表达式文本
      // 按元素节点方式编译
      if (me.isElementNode(node)) {
        me.compile(node)
      } else if (me.isTextNode(node) && reg.test(text)) {
        me.compileText(node, RegExp.$1)
      }
      // 遍历编译子节点
      if (node.childNodes && node.childNodes.length) {
        me.compileElement(node)
      }
    })
  },

  compile: function(node) {
    var nodeAttrs = node.attributes,
      me = this
    ;[].slice.call(nodeAttrs).forEach(function(attr) {
      // 规定：指令以 v-xxx 命名
      // 如 <span v-text="content"></span> 中指令为 v-text
      var attrName = attr.name // v-text
      if (me.isDirective(attrName)) {
        var exp = attr.value // content
        var dir = attrName.substring(2) // text
        if (me.isEventDirective(dir)) {
          // 事件指令, 如 v-on:click
          compileUtil.eventHandler(node, me.$vm, exp, dir)
        } else {
          // 普通指令
          compileUtil[dir] && compileUtil[dir](node, me.$vm, exp)
        }
      }
    })
  },
}

// 指令处理集合
var compileUtil = {
  text: function(node, vm, exp) {
    this.bind(node, vm, exp, 'text')
  },
  // ...省略
  bind: function(node, vm, exp, dir) {
    var updaterFn = updater[dir + 'Updater']
    // 第一次初始化视图
    updaterFn && updaterFn(node, vm[exp])
    // 实例化订阅者，此操作会在对应的属性消息订阅器中添加了该订阅者watcher
    new Watcher(vm, exp, function(value, oldValue) {
      // 一旦属性值有变化，会收到通知执行此更新函数，更新视图
      updaterFn && updaterFn(node, value, oldValue)
    })
  },
}

// 更新函数
var updater = {
  textUpdater: function(node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value
  },
  // ...省略
}

这里通过递归遍历保证了每个节点及子节点都会解析编译到，包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记，如<span v-text="content" other-attr中v-text便是指令，而other-attr不是指令，只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中，通过new Watcher()添加回调来接收数据变化的通知。

Compile 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
function Compile(el, vm) {
  this.$vm = vm
  this.$el = this.isElementNode(el) ? el : document.querySelector(el)

  if (this.$el) {
    this.$fragment = this.node2Fragment(this.$el)
    this.init()
    this.$el.appendChild(this.$fragment)
  }
}

Compile.prototype = {
  node2Fragment: function(el) {
    var fragment = document.createDocumentFragment(),
      child

    // 将原生节点拷贝到fragment
    while ((child = el.firstChild)) {
      fragment.appendChild(child)
    }

    return fragment
  },

  init: function() {
    this.compileElement(this.$fragment)
  },

  compileElement: function(el) {
    var childNodes = el.childNodes,
      me = this

    ;[].slice.call(childNodes).forEach(function(node) {
      var text = node.textContent
      var reg = /\{\{(.*)\}\}/

      if (me.isElementNode(node)) {
        me.compile(node)
      } else if (me.isTextNode(node) && reg.test(text)) {
        me.compileText(node, RegExp.$1)
      }

      if (node.childNodes && node.childNodes.length) {
        me.compileElement(node)
      }
    })
  },

  compile: function(node) {
    var nodeAttrs = node.attributes,
      me = this

    ;[].slice.call(nodeAttrs).forEach(function(attr) {
      var attrName = attr.name
      if (me.isDirective(attrName)) {
        var exp = attr.value
        var dir = attrName.substring(2)
        // 事件指令
        if (me.isEventDirective(dir)) {
          compileUtil.eventHandler(node, me.$vm, exp, dir)
          // 普通指令
        } else {
          compileUtil[dir] && compileUtil[dir](node, me.$vm, exp)
        }

        node.removeAttribute(attrName)
      }
    })
  },

  compileText: function(node, exp) {
    compileUtil.text(node, this.$vm, exp)
  },

  isDirective: function(attr) {
    return attr.indexOf('v-') == 0
  },

  isEventDirective: function(dir) {
    return dir.indexOf('on') === 0
  },

  isElementNode: function(node) {
    return node.nodeType == 1
  },

  isTextNode: function(node) {
    return node.nodeType == 3
  },
}

// 指令处理集合
var compileUtil = {
  text: function(node, vm, exp) {
    this.bind(node, vm, exp, 'text')
  },

  html: function(node, vm, exp) {
    this.bind(node, vm, exp, 'html')
  },

  model: function(node, vm, exp) {
    this.bind(node, vm, exp, 'model')

    var me = this,
      val = this._getVMVal(vm, exp)
    node.addEventListener('input', function(e) {
      var newValue = e.target.value
      if (val === newValue) {
        return
      }

      me._setVMVal(vm, exp, newValue)
      val = newValue
    })
  },

  class: function(node, vm, exp) {
    this.bind(node, vm, exp, 'class')
  },

  bind: function(node, vm, exp, dir) {
    var updaterFn = updater[dir + 'Updater']

    updaterFn && updaterFn(node, this._getVMVal(vm, exp))

    new Watcher(vm, exp, function(value, oldValue) {
      updaterFn && updaterFn(node, value, oldValue)
    })
  },

  // 事件处理
  eventHandler: function(node, vm, exp, dir) {
    var eventType = dir.split(':')[1],
      fn = vm.$options.methods && vm.$options.methods[exp]

    if (eventType && fn) {
      node.addEventListener(eventType, fn.bind(vm), false)
    }
  },

  _getVMVal: function(vm, exp) {
    var val = vm._data
    exp = exp.split('.')
    exp.forEach(function(k) {
      val = val[k]
    })
    return val
  },

  _setVMVal: function(vm, exp, value) {
    var val = vm._data
    exp = exp.split('.')
    exp.forEach(function(k, i) {
      // 非最后一个key，更新val的值
      if (i < exp.length - 1) {
        val = val[k]
      } else {
        val[k] = value
      }
    })
  },
}

var updater = {
  textUpdater: function(node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value
  },

  htmlUpdater: function(node, value) {
    node.innerHTML = typeof value == 'undefined' ? '' : value
  },

  classUpdater: function(node, value, oldValue) {
    var className = node.className
    className = className.replace(oldValue, '').replace(/\s$/, '')

    var space = className && String(value) ? ' ' : ''

    node.className = className + space + value
  },

  modelUpdater: function(node, value, oldValue) {
    node.value = typeof value == 'undefined' ? '' : value
  },
}

实现 Watcher

Watcher 订阅者作为 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

  1. 在自身实例化时往属性订阅器(dep)里面添加自己
  2. 自身必须有一个 update()方法
  3. 待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function Watcher(vm, exp, cb) {
  this.cb = cb
  this.vm = vm
  this.exp = exp
  // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
  this.value = this.get()
}
Watcher.prototype = {
  update: function() {
    this.run() // 属性值变化收到通知
  },
  run: function() {
    var value = this.get() // 取到最新值
    var oldVal = this.value
    if (value !== oldVal) {
      this.value = value
      this.cb.call(this.vm, value, oldVal) // 执行Compile中绑定的回调，更新视图
    }
  },
  get: function() {
    Dep.target = this // 将当前订阅者指向自己
    var value = this.vm[exp] // 触发getter，添加自己到属性订阅器中
    Dep.target = null // 添加完毕，重置
    return value
  },
}
// 这里再次列出Observer和Dep，方便理解
Object.defineProperty(data, key, {
  get: function() {
    // 由于需要在闭包内添加watcher，所以可以在Dep定义一个全局target属性，暂存watcher, 添加完移除
    Dep.target && dep.addDep(Dep.target)
    return val
  },
  // ... 省略
})
Dep.prototype = {
  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update() // 调用订阅者的update方法，通知变化
    })
  },
}

实例化Watcher的时候，调用get()方法，通过Dep.target = watcherInstance标记订阅者是当前 watcher 实例，强行触发属性定义的getter方法，getter方法执行的时候，就会在属性的订阅器dep添加当前 watcher 实例，从而在属性值有变化的时候，watcherInstance 就能收到更新通知。

Watcher 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function Watcher(vm, exp, cb) {
  this.cb = cb
  this.vm = vm
  this.exp = exp
  this.depIds = {}
  this.value = this.get()
}

Watcher.prototype = {
  update: function() {
    this.run()
  },
  run: function() {
    var value = this.get()
    var oldVal = this.value
    if (value !== oldVal) {
      this.value = value
      this.cb.call(this.vm, value, oldVal)
    }
  },
  addDep: function(dep) {
    // 1. 每次调用run()的时候会触发相应属性的getter
    // getter里面会触发dep.depend()，继而触发这里的addDep
    // 2. 假如相应属性的dep.id已经在当前watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已
    // 则不需要将当前watcher添加到该属性的dep里
    // 3. 假如相应属性是新的属性，则将当前watcher添加到新属性的dep里
    // 如通过 vm.child = {name: 'a'} 改变了 child.name 的值，child.name 就是个新属性
    // 则需要将当前watcher(child.name)加入到新的 child.name 的dep里
    // 因为此时 child.name 是个新值，之前的 setter、dep 都已经失效，如果不把 watcher 加入到新的 child.name 的dep中
    // 通过 child.name = xxx 赋值的时候，对应的 watcher 就收不到通知，等于失效了
    // 4. 每个子属性的watcher在添加到子属性的dep的同时，也会添加到父属性的dep
    // 监听子属性的同时监听父属性的变更，这样，父属性改变时，子属性的watcher也能收到通知进行update
    // 这一步是在 this.get() --> this.getVMVal() 里面完成，forEach时会从父级开始取值，间接调用了它的getter
    // 触发了addDep(), 在整个forEach过程，当前wacher都会加入到每个父级过程属性的dep
    // 例如：当前watcher的是'child.child.name', 那么child, child.child, child.child.name这三个属性的dep都会加入当前watcher
    if (!this.depIds.hasOwnProperty(dep.id)) {
      dep.addSub(this)
      this.depIds[dep.id] = dep
    }
  },
  get: function() {
    Dep.target = this
    var value = this.getVMVal()
    Dep.target = null
    return value
  },

  getVMVal: function() {
    var exp = this.exp.split('.')
    var val = this.vm._data
    exp.forEach(function(k) {
      val = val[k]
    })
    return val
  },
}

基本上 vue 中数据绑定相关比较核心的几个模块也是这几个，猛戳这里 , 在src 目录可找到 vue 源码。

实现 MVVM

MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

一个简单的 MVVM 构造器是这样子：

1
2
3
4
5
6
function MVVM(options) {
  this.$options = options
  var data = (this._data = this.$options.data)
  observe(data, this)
  this.$compile = new Compile(options.el || document.body, this)
}

但是这里有个问题，从代码中可看出监听的数据对象是 options.data，每次需要更新视图，则必须通过var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq';这样的方式来改变数据。

显然不符合我们一开始的期望，我们所期望的调用方式应该是这样的：
var vm = new MVVM({data: {name: 'kindeng'}}); vm.name = 'dmq';

所以这里需要给 MVVM 实例添加一个属性代理的方法，使访问 vm 的属性代理为访问 vm._data 的属性，改造后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function MVVM(options) {
  this.$options = options
  var data = (this._data = this.$options.data),
    me = this
  // 属性代理，实现 vm.xxx -> vm._data.xxx
  Object.keys(data).forEach(function(key) {
    me._proxy(key)
  })
  observe(data, this)
  this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
  _proxy: function(key) {
    var me = this
    Object.defineProperty(me, key, {
      configurable: false,
      enumerable: true,
      get: function proxyGetter() {
        return me._data[key]
      },
      set: function proxySetter(newVal) {
        me._data[key] = newVal
      },
    })
  },
}

这里主要还是利用了Object.defineProperty()这个方法来劫持了 vm 实例对象的属性的读写权，使读写 vm 实例的属性转成读写了vm._data的属性值，达到鱼目混珠的效果。

下载 Demo

坚持原创技术分享，您的支持将鼓励我继续创作！
  • 本文作者： Leo
  • 本文链接： https://xuebin.me/posts/55718283.html
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！