Vue双向数据绑定 - 浅谈

最新推荐文章于 2025-08-09 20:51:19 发布

转载最新推荐文章于 2025-08-09 20:51:19 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dukeshao/p/10765084.html

文章标签：

#javascript #ViewUI

本文深入解析Vue框架中双向数据绑定的实现原理，重点讲解v-model指令如何通过value和oninput事件实现View到Model的更新，以及getter和setter在Model到View同步过程中的作用。文章还提供了原生JS代码示例，展示Vue如何在实例化过程中将data属性转换为响应式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的双向数据绑定的原理（v-model的原理：value+oninput）
* View -> Model : 事件
* Model -> View ：getter&setter

* vue在实例化时会遍历data中所有属性，通过Object.defineProperty()方法把它们设置为存储器属性（getter & setter），并写入Vue实例

以下使用原生JS实现vue实例化时将data的属性设置为存储器属性,并写入Vue实例

　　function Vue(option) {
        this.$el = document.querySelector(option.el);
        let data = this.$data = option.data;
        this.proxyData(data);
    }
    Vue.prototype.proxyData = function(data) {
        var arr = [];
        for (var key in data) {
            var obj = [];
            obj[0] = key
            obj[1] = data[key];
            arr.push(obj)
        }
        arr.forEach((item, idx) => {
            Object.defineProperty(this, item[0], {
                configurable: true,
                enumerable: true,
                get: function() {
                    return data[item[0]]
                },
                set: function(val) {
                    data[item[0]] = val
                }
            })
        })
    }


    let vm = new Vue({
        el: "#app",
        data: {
            name: "lemon",
            age: 18
        }
    });
    console.log(vm)

转载于:https://www.cnblogs.com/dukeshao/p/10765084.html