Vue2源码解析-双向绑定

最新推荐文章于 2024-08-25 09:57:22 发布

海上彼尚

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量254

点赞数 2

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_63443072/article/details/139319663

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

两个文件，一个html,一个js。

<body>
    <div id="app">
        <h1>{{str}}</h1>
        <input type="text" v-model="str">
    </div>
</body>
<script src="./Vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            str: "你好"
        }
    })
</script>

class Vue {
    constructor(options) {
        this.$options = options;
        this.$watchEvent = {};
        this.$data = options.data;
        this.$el = document.querySelector(options.el);
        // 数据劫持
        this.proxyData()
        // 数据监听
        this.ovserve()
        // 编译模板
        this.compile(this.$el);
    }

    proxyData() {
        // 1.给Vue实例赋熟悉，来自于data
        // 2.data中的属性和Vue实例的属性是一一对应的（劫持）
        for (let key in this.$data) {
            Object.defineProperty(this, key, {
                get() {
                    return this.$data[key];
                },
                set(val) {
                    this.$data[key] = val;
                }
            })
        }
    }

    // 触发data中的数据发生变化来执行watch中的update
    ovserve() {
        for (let key in this.$data) {
            let value = this.$data[key];
            let that = this;
            Object.defineProperty(this.$data, key, {
                get() {
                    return value;
                },
                set(val) {
                    value = val;
                    if (that.$watchEvent[key]) {
                        that.$watchEvent[key].forEach((item, index) => {
                            item.update();
                        })
                    }
                }
            })
        }
    }

    compile(node) {
        node.childNodes.forEach((item, index) => {
            // 判断节点类型
            console.log(item);
            // 1===元素节点
            if (item.nodeType === 1) {
                // 判断是否绑定了v-model
                if (item.hasAttribute("v-model")) {
                    let vmKey = item.getAttribute("v-model").trim();
                    if (this.hasOwnProperty(vmKey)) {
                        item.value = this[vmKey];
                    }
                    item.addEventListener('input', (event) => {
                        this[vmKey] = event.target.value;
                    })
                }
                if (item.childNodes.length > 0) {
                    this.compile(item);
                }
            }
            // 2===属性节点
            else if (item.nodeType === 2) { }
            // 3===文本节点
            else if (item.nodeType === 3) {
                let reg = /\{\{(.*?)\}\}/g;
                let text = item.textContent;
                item.textContent = text.replace(reg, (match, key) => {
                    key = key.trim();
                    // 判断是否是data中的属性
                    if (this.hasOwnProperty(key)) {
                        let watcher = new Watche(this, key, item, "textContent")
                        // 检查当前对象是否已经有一个名为key的属性，用于存储观察者（watcher）列表
                        if (this.$watchEvent[key]) {
                            this.$watchEvent[key].push(watcher);
                        }
                        // 如果当前对象已经有一个名为key的属性，则将新创建的watcher添加到该属性中
                        else {
                            this.$watchEvent[key] = [];
                            this.$watchEvent[key].push(watcher);
                        }
                    }
                    return this.$data[key];
                })
            }
        })
    }
}

class Watche {
    /**
     * @function 构造函数 
     * @param {*} vm 对象
     * @param {*} key 属性名称
     * @param {*} node 节点
     * @param {*} attr 改变文本节点内容的字符串
     */
    constructor(vm, key, node, attr) {
        this.vm = vm;
        this.key = key;
        this.node = node;
        this.attr = attr;
    }

    update() {
        // 更新文本节点的内容
        this.node[this.attr] = this.vm.$data[this.key];
    }
}