章
目
录
Vue.js Object的变化侦测机制 不仅是Vue.js响应式系统的核心，还影响着数据更新与视图渲染之间的交互逻辑。接下来，咱们就一起深入探究一下Vue.js中Object的变化侦测原理及实现方式。
一、变化侦测的概念与类型
（一）什么是变化侦测
在Vue.js应用里，状态（数据）与DOM之间存在紧密联系。Vue.js会依据状态自动生成DOM，并将其输出到页面进行显示，这个过程被称为渲染。然而，在应用运行时，内部状态是动态变化的，每当状态改变，往往需要重新渲染页面。此时，确定状态中具体发生了哪些变化就成了关键问题，而变化侦测正是用来解决这一难题的。
（二）变化侦测的类型
变化侦测主要分为“推”（push）和“拉”（pull）两种类型。像Angular和React中的变化侦测采用的是“拉”的方式，而Vue.js则使用“推”的机制。在Vue.js中，当状态发生变化时，它能够快速感知，并且在一定程度上明确哪些状态发生了改变。这就好比在一个团队里，有专人时刻关注成员的动态，一旦有人有变动，能马上知晓。
二、追踪Object变化的方法
在JavaScript中，有两种常用的方法来侦测一个对象的变化，分别是Object.defineProperty和ES6的Proxy。这里我们主要探讨Vue.js中基于Object.defineProperty的实现方式。
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
return val
},
set: function(newVal) {
if (val === newVal) {
return
}
val = newVal
}
})
}
这段代码通过Object.defineProperty为对象的属性定义了getter和setter。getter用于获取属性值，setter则在属性值发生变化时被触发。不过，这段代码目前还只是基础示例，后续会进一步完善。
三、依赖收集与相关概念
（一）依赖收集的位置与方式
在Vue.js中，依赖收集是变化侦测的重要环节。依赖收集主要在getter中进行，而在setter中则会触发依赖。收集到的依赖会被存放在Dep类中。
export default class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
removeSub(sub) {
remove(this.subs, sub)
}
depend() {
if (window.target) {
this.addSub(window.target)
}
}
notify() {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
function remove(arr, item) {
if (arr.length) {
const index = arr.indexOf(item)
if (index > -1) {
arr.splice(index, 1)
}
}
}
Dep类就像是一个“仓库”，用来管理依赖。addSub方法用于添加依赖，removeSub方法用于移除依赖，depend方法在getter中被调用，用于收集依赖，notify方法则在setter中被触发，通知所有依赖进行更新。
（二）Watcher的作用
Watcher在Vue.js的变化侦测中扮演着中介角色。当数据发生变化时，会先通知Watcher，然后Watcher再通知其他相关地方。
export default class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm
this.getter = parsePath(expOrFn)
this.cb = cb
this.value = this.get()
}
get() {
window.target = this
let value = this.getter.call(this.vm, this.vm)
window.target = undefined
return value
}
update() {
const oldValue = this.value
this.value = this.get()
this.cb.call(this.vm, this.value, oldValue)
}
}
Watcher类的构造函数接收vm（Vue实例）、expOrFn（用于获取数据的表达式或函数）和cb（回调函数）。get方法用于收集依赖并获取数据，update方法在数据更新时被调用，执行回调函数cb，从而实现数据变化时的相关逻辑处理。
四、递归侦测对象的所有属性
前面的代码只能侦测对象中的某一个属性，为了实现对数据中所有属性的变化侦测，我们需要封装一个Observer类。
export class Observer {
constructor(value) {
this.value = value
if (!Array.isArray(value)) {
this.walk(value)
}
}
walk(obj) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]])
}
}
}
function defineReactive(data, key, val) {
// 新增：递归子属性
if (typeof val === 'object') {
new Observer(val)
}
let dep = new Dep()
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
// 新增：收集依赖
dep.depend()
return val
},
set: function(newVal) {
if (val === newVal) {
return
}
val = newVal
// 新增：触发依赖
dep.notify()
}
})
}
Observer类的walk方法会遍历对象的所有属性，并通过defineReactive将每个属性都转换成getter/setter的形式，以便追踪它们的变化。同时，在defineReactive函数中，新增了对子属性的递归侦测、依赖收集和触发依赖的逻辑。
五、Object.defineProperty的局限性与Vue.js的解决方案
虽然Object.defineProperty能够将对象的属性转换成getter/setter形式来追踪变化，但它存在一定的局限性，无法追踪新增属性和删除属性的变化。因此，Vue.js专门提供了vm.$set和vm.$delete方法来解决这一问题，让开发者在处理对象属性的添加和删除时更加灵活。
通过以上对Vue.js中Object变化侦测机制的深入讲解，相信大家对Vue.js的响应式原理有了更清晰的认识。在实际开发中，理解和掌握这些知识还是有点必要的。
