1.Vue 数据双向绑定原理

Vue 内部通过 Object.defineProperty 方法属性拦截的方式，把 data 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新

2. MVVM数据的双向绑定

MVVM 数据的双向绑定主要是指，Model 数据变化 View 视图自动渲染展示；View 视图数据变化 Model 数据自动同步更新
MVVM.png

3. Object.defineProperty()

①.定义
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 ------(引自MDN)

②.语法
Object.defineProperty(obj, prop, descriptor)

（1）参数

obj 要在其上定义属性的对象。

prop 要定义或修改的属性的名称。

descriptor 将被定义或修改的属性描述符。

（2）返回值
被传递给函数的对象。

（3）属性描述符
Object.defineProperty() 为对象定义属性，分 数据描述符 和 存取描述符 ，两种形式不能混用。
数据描述符和存取描述符均具有以下可选键值：

configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false

enumerable 当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false 数据描述符具有以下可选键值：

value 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined

writable 当且仅当该属性的 writable 为 true 时，value才能被赋值运算符改变。默认为 false 存取描述符具有以下可选键值：

get 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为
undefined

set 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined

4.简单实现案例

<body>
    <div id="app"></div>

    <script src="./vue.js"></script>
    <script>
        let app = document.getElementById("app")
        // 声明临时存储变量
        let temp = "初始数据"
        // 数据监听对象
        Object.defineProperty(window, "actual", {
            // 监听读取数据
            get() {
                console.log("获取数据调用");
                return temp
            },

            // 监听修改数据
            set(value) {
                console.log("修改数据调用");
                temp = value
                bind(actual) // 数据一旦发生变化就重新渲染页面
            }
        })

        // vue 数据双向绑定
        function bind(content) {
            app.innerHTML = content
        }
        bind(actual)
    </script>
</body>
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何基于香橙派AIpro对视频/图像数据进行预处理？

avatar 华为云开发者联盟