Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// ...
},
set: function reactiveSetter (newVal) {
// ...
}
})

// 在mount的生命钩子中
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)

<div id="app">
{{ message }}
{{ message1 }}
<input type="text" v-model="message">
<div @click="changeMessage">改变message</div> 
</div>

var app = new Vue({
el: '#app',
data: {
message: '1',
message1: '2',
},
methods: {
changeMessage() {
this.message = '2'
}
},
watch: {
message: function(val) {
this.message1 = val
}
}
})

get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
// 省略
} finally {
if (this.deep) {
traverse(value)
}
popTarget()
this.cleanupDeps()
}
return value
}

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter "htmlcode">

depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}


我们会发现，在depend过程中，会有一个newDepIds去记录已经存入的dep的id，当一个watcher已经被该dep存过时，便不再会进行依赖收集操作。
派发更新过程


收集流程讲完了，不妨在听听更新流程。
订阅更新的流程


老例子


<div id="app">
{{ message }}
{{ message1 }}
<input type="text" v-model="message">
<div @click="changeMessage">改变message</div> 
</div>




var app = new Vue({
el: '#app',
data: {
message: '1',
message1: '2',
},
methods: {
changeMessage() {
this.message = '3'
}
},
watch: {
message: function(val) {
this.message1 = val
}
}
})


依赖收集的最终结果：

当触发click事件的时候，便会触发订阅更新流程。


订阅更新流程图：

当renderWatch执行更新的时候，回去调用beforeUpdate生命钩子，然后执行patch方法，进行视图的变更。
如何防止重复更新
如何去防止重复更新呢？renderWatch会被很多dep进行收集，如果视图多次渲染，会造成性能问题。


其实问题的关在在于——queueWatcher


在queueWatcher中有两个操作：去重和异步更新。




function queueWatcher (watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
queue.push(watcher)
// ...
if (!waiting) {
waiting = true
// ...
nextTick(flushSchedulerQueue)
}
}
}


其实queueWatcher很简单，将所有watch收集到一个数组当中，然后去重。


这样至少可以避免renderWatch频繁更新。


比如上述例子中的，message和message1都有一个renderWatch，但是只会执行一次。


异步更新也可以保证当一个事件结束之后，才会触发视图层的更新，也能防止renderWatch重复更新


结尾


文章讲述了响应式流程的原因，代码细节并未深入，
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。