Vue 3.0双向绑定原理的实现

最新推荐文章于 2025-07-23 18:27:56 发布

原创

最新推荐文章于 2025-07-23 18:27:56 发布 · 1.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 3.0采用新特性Proxy替代Object.defineProperty实现双向绑定，解决性能和数组监听等问题。Proxy可以拦截并自定义13种操作，包括get和set，用于数据劫持。Vue2.0中Object.defineProperty的局限性在于无法深度监听和数组监听，而Proxy能有效解决这些问题。

proxy方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。
具体实现过程的代码如下：

定义构造函数

function Vue(option){
   
   
    this.$el = document.querySelector(option.el);   //获取挂载节点
    this.$data = option.data;
    this.$methods = option.methods;
    this.deps = {
   
   };     //所有订阅者集合 目标格式（一对多的关系）：{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}
    this.observer(this.$data);  //调用观察者
    this.compile(this.$el);     //调用指令解析器
}

定义指令解析器

Vue.prototype.compile = function (el) {
   
   
    let nodes = el.children; //获取挂载节点的子节点
    for (var i = 0; i < nodes.length; i++) {
   
   
        var node = nodes[i];
        if (node.children.length) {
   
   
            this.compile(node) //递归获取子节点
        }
        if (node.hasAttribute('l-model')) {
   
    //当子节点存在l-model指令
            let attrVal = node.getAttribute('l-model'); //获取属性值
            node.addEventListener('input', (() => {
   
   
                this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者
                let thisNode = node;
                return () => {
   
   
                    this.$data[attrVal] = thisNode.value //更新数据层的数据
                }
            })())

最低0.47元/天解锁文章

新学期VIP享超值加赠