Vue.js 响应式原理
1. Vue2.x 基于 Object.defineProperty 方法实现响应式（Vue3 将采用 Proxy）
Object.defineProperty(obj, prop, descriptor)### 2. 定义 defineReactive 来对对象的属性进行 getter、setter 操作
```js
function defineReacive(obj, key, val){
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
return val;
},
set(newVal) {
if(val === newVal) return;
val = newVal;
callback(newVal);
}
})
}
```
### 3. 我们需要遍历所有数据，所以需要 observer 方法去观察
```js
function observer(val){
if(!val || typeof val !== 'object') return;
Obejct.keys(val).forEach(key => {
defineReactive(val, key, val(key));
})
}
```
### 4. 模拟 Vue 构造函数
```js
class MockVue {
constructor(options) {
this._data = opations.data;
observer(this._data);
}
}
```
### 5. 实例化 MockVue 生成实例对象
```js
let v1 = new MockVue({
data: { }
})
```
## 如何让发生变动时触发相关视图更新，那么我们就需要收集依赖，
### 6. 订阅者 Dep（存放watcher观察者对象）
```js
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => {
sub.update();
})
}
}
```
### 7. 观察者 Wacher
```js
class Watcher {
constructor() {
Dep.target = this;
}
update() {
console.log('update...');
}
}
```
### 8. 修改 defineReactive 方法
```js
function defineReacive(obj, key, val){
+ const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
+ dep.addSub(Dep.target);
return val;
},
set(newVal) {
if(val === newVal) return;
val = newVal;
- callback(newVal);
+ dep.notify();
}
})
}
```
### 9. 重写 MockVue
```js
class MockVue {
constructor(options) {
this._data = options.data;
observer(this._data);
new Watcher(); // Dep.target会指向这个watcher对象
console.log('触发getter')；
}
}
```
以上是 Vue.js 响应式原理 的全部内容， 来源链接： utcz.com/z/379581.html
