实现 MVVM 类 Vue 迷你框架(七)

人生代码

共 2323字,需浏览 5分钟

 ·

2021-03-29 21:11

如何实现 MVVM 类 Vue 迷你框架(七)

还有一件事件我们忘记处理,就是对数组的处理,Vue 内部处理一些数组方法,例如:push,pop,reverse,shift,unshift,sort,splice

  • 找到原型上的方法
  • 拷贝新的原型
  • 在新的原型上对这些方法进行重写,这样就不会覆盖原有数组的原型
  • 通知更新操作
// 数组响应式处理
// push, pop, reverse, shift, sort, splice, unshift
const arrayMethods = ["push""pop""reverse""shift""unshift""sort""splice"];
const originProto = Array.prototype;
const arrayCopyProto = Object.create(originProto);

arrayMethods.forEach(method => {
    arrayCopyProto[method] = function ({
        // 原始操作
        originProto[method].apply(thisarguments);

        // 通知更新操作
    }
})

我们需要在 Observer 类处理

class Observer {
    constructor(value) {
        this.$value = value
        if (Array.isArray(value)) {
            // 处理数组
            // array 覆盖原型,替换变更操作
            value.__proto__ = arrayCopyProto;

            // 对数组内容元素执行响应式
            value.forEach(item => observe(item));
        } else {
            // 处理对象
            this.walk(value);
        }
    }
    // 遍历对象,响应式处理
    walk(obj) {
        Object.keys.forEach(key => defineReactive(obj, key, obj[key]));
    }
}


浏览 14
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报