资讯专栏INFORMATION COLUMN

【挥舞JS】vue双向数据绑定v-model实现原理

XanaHopper / 325人阅读

摘要:设计模式数据观测原理在技术实现上,利用的是和存储器属性和所以只兼容及以上版本,可称为基于依赖收集的观测机制。核心是,即,保证数据和视图的一致性。采用数据劫持结合发布者订阅者模式的方式,在数据变动时发布消息给订阅者,触发相应的监听回调。

MVVM设计模式 Model View ViewModel

Vue.js 数据观测原理在技术实现上,利用的是ES5 Object.defineProperty()和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。
核心是VM,即ViewModel,保证数据和视图的一致性。Vue.js 采用数据劫持结合发布者-订阅者模式的方式,在数据变动时发布消息给订阅者,触发相应的监听回调。


// Model
var data = {
    message: "",
    list: []
};
// ViewModel
var app = document.getElementById("app");
var Elements = app.querySelectorAll("[v-model]");
for (var i = 0; i < Elements.length; i++) {
    Elements[i].oninput = function () {
        data[this.getAttribute("v-model")] = this.value;
    }
}

Object.defineProperty(data, "message", {
    get: function () {
        return data.str;
    },
    set: function (val) {
        var Elements = app.querySelectorAll("[v-model=message]");
        for (var i = 0; i < Elements.length; i++) {
            Elements[i].value = val;
            Elements[i].innerText = val;
        }
        data.str = val;
    }
});

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99584.html

相关文章

  • Vue原理】VModel - 白话版

    摘要:执行的时候,会绑定上下文对象为组件实例于是中的就能取到组件实例本身,的代码块顶层作用域就绑定为了组件实例于是内部变量的访问,就会首先访问到组件实例上。其中的获取,就会先从组件实例上获取,相当于。 写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得...

    keke 评论0 收藏0
  • vue双向数据绑定原理

    摘要:什么是双向数据绑定是一个框架,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化。 什么是双向数据绑定?Vue是一个MVVM框架,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化。 实现数据绑定的方式大致有以下几种: - 1、发布者-订阅者模式(backbone.js) - 2、脏值检查(angula...

    Yumenokanata 评论0 收藏0
  • Vue基本原理

    摘要:标签添加监听事件文本节点这一步我们操作页面输入框,可以看到以下效果,证明监听事件添加有效。 前言 经过几天的研究,发现学习框架的底层技术,收获颇丰,相比只学习框架的使用要来的合算;如果工作急需,快速上手应用,掌握如何使用短期内更加高效;如果有较多的时间来系统学习,建议研究一下框架的等层技术、原理。 Vue、React、Angular三大框架对比 1、Vue Vue是尤雨溪编写的一个构建...

    firim 评论0 收藏0
  • Vue基本原理

    摘要:标签添加监听事件文本节点这一步我们操作页面输入框,可以看到以下效果,证明监听事件添加有效。 前言 经过几天的研究,发现学习框架的底层技术,收获颇丰,相比只学习框架的使用要来的合算;如果工作急需,快速上手应用,掌握如何使用短期内更加高效;如果有较多的时间来系统学习,建议研究一下框架的等层技术、原理。 Vue、React、Angular三大框架对比 1、Vue Vue是尤雨溪编写的一个构建...

    ytwman 评论0 收藏0

发表评论

0条评论

XanaHopper

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<