Vue2的响应式原理代码

加油年轻人！

已于 2022-11-09 15:39:06 修改

阅读量278

点赞数

文章标签： javascript 前端开发语言 vue

于 2022-11-09 02:25:37 首次发布

本文链接：https://blog.csdn.net/weixin_44245132/article/details/127762133

版权

本文探讨Vue2的响应式机制，主要利用Object.defineProperty实现数据劫持，结合发布订阅者模式确保视图与数据同步更新。

摘要由CSDN通过智能技术生成

ue2响应式原理，简单来说是通过Object.defineProperty进行数据劫持，再通过发布订阅者模式通知对应的视图更新。

/**
 * 数组方法拦截
 */
const arrayProto = []
const methodsList = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
methodsList.forEach(method =>{
   
    def(arrayProto,method,function(){
   
        const result = Array.prototype[method].apply(this,arguments)
        switch(method){
   
            case 'push': {
   
                observer(arguments)
                this.__ob__.dep.notify() 
                break           }
        }
        return result
    })
})


//新增对象属性
function def(obj,key,value,enumerable = false){
   
    Object.defineProperty(obj,key,{
   
        value,
        enumerable,
        writable:true,
        configurable:true
    })
}


/**
 * 订阅发布器
 * 每一个属性数据都有自己的订阅发布器
 * 他被定义在defindReative方法中
 */
 class Dep{
   
    constructor(){
   
        this.sub = []
    }
    depend()