Vue2的双向数据绑定的原理/响应式

最新推荐文章于 2024-05-20 15:17:08 发布

web Rookie

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量55

点赞数

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

本文链接：https://blog.csdn.net/cx18333/article/details/130978462

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

前言
一.MVVM 是什么
二.发布者-订阅者模式
三.Vue数据双向绑定原理/响应式
- 代码实现

前言

本文主要介绍Vue2的双向数据绑定的原理,简单通过代码实现

一.MVVM 是什么

Vue 和 React 都是 MVVM 模式,所以需要简单了解一下 MVVM 模式,更好的理解双向数据绑定/响应式
https://blog.csdn.net/cx18333/article/details/130937217?spm=1001.2014.3001.5501

二.发布者-订阅者模式

Vue2的双向数据绑定/响应式是通过数据劫持和发布者-订阅者模式来实现
https://blog.csdn.net/cx18333/article/details/130955620?spm=1001.2014.3001.5502

三.Vue数据双向绑定原理/响应式

墨迹了这么久下面开始正题啦!

Vue是一个MVVM框架，即数据双向绑定，Vue的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其原理是利用了ES5的Object.defineProperty()方法，实现了对数据的监听。基本原理是将数据对象data的每个属性都转化为getter/setter，通过setter来监控数据的变化，在数据发生变化时触发对应的页面元素更新。

代码实现

<body>
    <div id="app">
        <input type="text" id="input" />
        <p id="output"></p>
    </div>
</body>
<script>
    const input = document.getElementById('input')
    const output = document.getElementById('output')
    const model = { message: 'Hello World!' }

    // 数据劫持
    Object.defineProperty(model, 'message', {
    	// 在读取 model 的 message 属性时,get函数就会被调用,然后值就是 message
        get: function () {
            console.log('读取数据：', this._message)
            return this._message
        },
        // 当修改 message 时,set属性会被调用,并且会收到修改的具体值 
        set: function (newVal) {
            this._message = newVal
            output.textContent = newVal // 更新页面
            input.value = newVal // 实现双向绑定
        }
    })

    // 修改数据，input元素绑定事件
    input.addEventListener('keyup', function (event) {
        model.message = event.target.value
    })

    // 显示初始页面
    output.textContent = model.message
</script>

web Rookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2的双向数据绑定的原理/响应式

Vue是一个MVVM框架，即数据双向绑定，Vue的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其原理是利用了ES5的Object.defineProperty()方法，实现了对数据的监听。基本原理是将数据对象data的每个属性都转化为getter/setter，通过setter来监控数据的变化，在数据发生变化时触发对应的页面元素更新。
复制链接

扫一扫