1.Vue中封装的数组方法有哪些，其如何实现页面更新

在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。

那Vue是如何实现让这些数组方法实现元素的实时更新的呢，下面是Vue中对这些方法的封装：

// 缓存数组原型
const arrayProto = Array.prototype;
// 实现 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto);
// 需要进行功能拓展的方法
const methodsToPatch = [
 "push",
 "pop",
 "shift",
 "unshift",
 "splice",
 "sort",
 "reverse"
];
/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function(method) {
 // 缓存原生数组方法
 const original = arrayProto[method];
 def(arrayMethods, method, function mutator(...args) {
 // 执行并缓存原生数组功能
 const result = original.apply(this, args);
 // 响应式处理
 const ob = this.__ob__;
 let inserted;
 switch (method) {
 // push、unshift会新增索引，所以要手动observer
 case "push":
 case "unshift":
 inserted = args;
 break;
 // splice方法，如果传入了第三个参数，也会有索引加入，也要手动observer。
 case "splice":
 inserted = args.slice(2);
 break;
 }
 //
 if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听
 // notify change
 ob.dep.notify();// 通知依赖更新
 // 返回原生数组方法的执行结果
 return result;
 });
});

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过 target__proto__ == arrayMethods 来改变了数组实例的型），然后手动调用notify，通知渲染watcher，执行update。

Vue中封装的数组方法有哪些，其如何实现页面更新

1.Vue中封装的数组方法有哪些，其如何实现页面更新

猜你喜欢