面试题打卡第七天（vue2 vue3 原理篇）- 双向数据绑定

最新推荐文章于 2024-11-08 17:24:22 发布

你听雪飘过的声音

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量528

点赞数

分类专栏：我的小仓库文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/weixin_44659458/article/details/127258188

版权

本文深入探讨了Vue2和Vue3中双向数据绑定的实现机制。Vue2依赖于Object.defineProperty进行深度监听和数组变异方法的扩展，而Vue3则采用Proxy对象，能更高效地监听属性变化，包括新增和删除。然而，Vue3的Proxy不兼容所有浏览器，Vue2在兼容性和性能方面各有优劣。

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

双向数据绑定

vue2 双向数据绑定

1、视图

function updateView() {
   
    console.log("更新视图");
}

2、绑定对象监听

// 绑定对象监听
function defineReactive(target, key, val) {
   
    // 深度监听 (值嵌套对象)
    observer(val);
    
    Object.defineProperty(target, key, {
   
        get() {
   
            return val;
        },
        set(newVal) {
   
            if (newVal != val) {
   
                // 关键点1
                observer(newVal); 

                val = newVal;

                // 更新视图
                updateView();
            }
        }
    })
}

代码解释：

（1）关键点1：深度监听（避免重新设置值为对象，导致新的值无法监听到）一次性全部递归监听

3、绑定数组监听

// 绑定数组监听
const arrProto = Object.create(Array.prototype);
// 将数组方法复写挂载到新对象中
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
   
    arrProto[methodName] = function() {
   
        // 更新视图
        updateView();
        // 执行原型链的方法
        oldArrayProperty[methodName].call(this, ...arguments);
    }
})

arrProto = Object.create(oldArrayProperty)：创建新对象，并且该对象的原型指向数组原型 Array.prototype （目的：在新对象上拓展方法，不会影响原型对象）

在这里插入图片描述

4、observer

function observer(target) {
   
    if (typeof target !== 'object' || target == null) {
   
        return target;
    }

    // 数组
    if (Array.isArray(target)) {
   
        // 修改数组原型指向
        target.__proto__ = arrProto;
    }

    for (let key in target) {
   
        defineReactive(target, key, target[key]);
    }
}

5、使用

const data = {
   
    name: "haohao",
    age: 20,
    info: {
   
        sex: "男",
    },
    test: "",
    nums: [1, 2, 3]
}

// 双向绑定
observer(data);