詳解Vue 如何監(jiān)聽Array的變化

class Observer {
 constructor() {
 // 響應式綁定數(shù)據(jù)通過方法
 observe(this.data);
 }
}

export function observe (data) {
 const keys = Object.keys(data);
 for (let i = 0; i < keys.length; i++) {
 // 將data中我們定義的每個屬性進行響應式綁定
 defineReactive(obj, keys[i]);
 }
}

export function defineReactive () {
 // ...省略 Object.defineProperty get-set
}

function defineReactive (obj, key, val) {
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: () => {
 console.log('我被讀了，我要不要做點什么好?');
 return val;
 },
 set: newVal => {
 if (val === newVal) {
 return;
 }
 val = newVal;
 console.log("數(shù)據(jù)被改變了，我要渲染到頁面上去!");
 }
 })
}

let data = [1];

// 對數(shù)組key進行監(jiān)聽
defineReactive(data, 0, 1);
console.log(data[0]); // 我被讀了，我要不要做點什么好?
data[0] = 2; // 數(shù)據(jù)被改變了，我要渲染到頁面上去!

data.length = 0; // 控制臺沒有任何

// 將data中我們定義的每個屬性進行響應式綁定
export function observe (data) {
 const keys = Object.keys(data);
 for (let i = 0; i < keys.length; i++) {
 // 如果是數(shù)組
 if (Array.isArray(keys[i])) {
 observeArray(keys[i]);
 } else {
 // 如果是對象
 defineReactive(obj, keys[i]);
 }
 }
}

// 數(shù)組的處理
export function observeArray () {
 // ...省略
}

function def (obj, key) {
 Object.defineProperty(obj, key, {
 writable: true,
 enumerable: true,
 configurable: true,
 value: function(...args) {
 console.log('key', key);
 console.log('args', args); 
 }
 });
}

// 重寫的數(shù)組方法
let obj = {
 push() {}
}

// 數(shù)組方法的綁定
def(obj, 'push');

obj.push([1, 2], 7, 'hello!');
// 控制臺

const arrayProto = Array.prototype // 獲取Array的原型

function def (obj, key) {
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 value: function(...args) {
 console.log(key); // 控制臺

// Object.defineProperty的封裝
import { def } from '../util/index'

// 獲得原型上的方法
const arrayProto = Array.prototype

// Vue攔截的方法
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
];

// 將上面的方法重寫
methodsToPatch.forEach(function (method) {
 def(arrayMethods, method, function mutator (...args) {
 console.log('method', method); // 獲取方法
 console.log('args', args); // 獲取參數(shù)

 // ...功能如上述，監(jiān)聽到某個方法執(zhí)行后，做一些對應的操作
 // 1、將開發(fā)者的參數(shù)傳給原生的方法，保證數(shù)組按照開發(fā)者的想法被改變
 // 2、視圖更新等
 })
})

export const arrayMethods = Object.create(arrayProto);

// 判斷是否有__proto__，因為部分瀏覽器是沒有__proto__
const hasProto = '__proto__' in {}
// 重寫后的原型
import { arrayMethods } from './array'
// 方法名
const arrayKeys = Object.getOwnPropertyNames(arrayMethods);

// 數(shù)組的處理
export function observeArray (value) {
 // 如果有__proto__，直接覆蓋 
 if (hasProto) {
 protoAugment(value, arrayMethods);
 } else {
 // 沒有__proto__就把方法加到屬性自身上
 copyAugment(value, arrayMethods, )
 }
}

// 原型的賦值
function protoAugment (target, src) {
 target.__proto__ = src;
}

// 復制
function copyAugment (target, src, keys) {
 for (let i = 0, l = keys.length; i < l; i++) {
 const key = keys[i]
 def(target, key, src[key]);
 }
}