Vue实现双向数据绑定

Vue实现双向数据绑定的方式，具体内容如下

Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。

实现对象属性变化绑定到UI

大概的思路是：

1. 确定绑定的数据，使用Object.defineProperty()对其数据变化进行监听（对应defineGetAndSet）
2. 一旦数据发生改动，会触发setter函数。因此在setter函数内要调用回调函数触发绑定元素的更新。
3. 绑定元素的更新就是遍历所有的绑定元素，通过绑定属性的值确定函数的调用，并传入修改后的值。（对应scan）

实现UI变化绑定到对象属性

这个就比较简单了，因为UI的改变会触发一些事件，比如keyup。通过监听事件来实现数据的改变。而上面说了，数据的改变又会导致绑定其值的元素的UI改变。

实现

var data = {
 value: 'hello world!'
}
var bindValue;
//确定绑定的元素
var bindelems = [document.getElementById('p'), document.getElementById('input')];
//修改绑定元素的值的方法
var command = {
 text: function(str) {
 this.innerHTML = str;
 },
 value: function(str) {
 this.value = str;
 }
};
//遍历绑定元素修改其值
var scan = function() {
 console.log('in scan');
 for(var i = 0; i < bindelems.length; i++) {
 var elem = bindelems[i];
 console.log('elem',elem);
 for(var j = 0; j < elem.attributes.length; j++) {
 var attr = elem.attributes[j];
 if(attr.nodeName.indexOf('q-')>=0) {
 command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
 }
 }
 }
}
//设置劫持
var defineGetAndSet = function(obj, propname) {
 Object.defineProperty(obj, propname, {
 get: function() {
 return bindValue;
 },
 set: function(value){
 bindValue = value;
 scan();
 },
 enumerable: true,
 configurable: true
 })
}
//一开始先初始化，使所有绑定的元素值为初始值
scan();
//设置需要被劫持的元素
defineGetAndSet(data, 'value');
//监听UI变化
bindelems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value;
});
setTimeout(function() {
 data.value = 'change';
}, 1000);

参考：

javascript实现数据双向绑定的三种方式

剖析Vue原理&实现双向绑定MVVM

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 通过源码分析Vue的双向数据绑定详解

    前言 虽然工作中一直使用Vue作为基础库,但是对于其实现机理仅限于道听途说,这样对长期的技术发展很不利.所以最近攻读了其源码的一部分,先把双向数据绑定这一块的内容给整理一下,也算是一种学习的反刍. 本篇文章的Vue源码版本为v2.2.0开发版. Vue源码的整体架构无非是初始化Vue对象,挂载数据data/props等,在不同的时期触发不同的事件钩子,如created() / mounted() / update()等,后面专门整理各个模块的文章.这里先讲双向数据绑定的部分,也是最主要的部分.

  • 详解Vue双向数据绑定原理解析

    详解Vue双向数据绑定原理解析

    基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调. 思路整理 要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数: 3.实现

  • vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法 目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元

  • vue.js数据绑定的方法（单向、双向和一次性绑定）

    vue.js数据绑定的方法（单向、双向和一次性绑定）

    这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的"抄袭".对照来看,更有助于我们学习和理解框架本身透露出来的思想,而非框架本身. 一.单向绑定 (一)Mustache 语法,双大括号 {{}}(html 内字符串绑定) <div id="app"> <p>{{text}}</p> <

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • 轻松理解vue的双向数据绑定问题

    Vue介绍 Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的.因为它提供了简洁易于理解的api,使得我们很容易上手. Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步. 双向绑定 主流双向数据绑定实现原理 脏值检测 : 这是AngularJS实现双向数据绑定的方式.

  • Vue实现双向数据绑定

    Vue实现双向数据绑定的方式,具体内容如下 Vue是如何实现双向数据绑定的呢?答案是前端数据劫持.其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值. 实现对象属性变化绑定到UI 大概的思路是: 1. 确定绑定的数据,使用Object.defineProperty()对其数据变化进行监听(对应defineGetAndSet) 2. 一旦数据发生改动,会触发setter函数.

  • Vue的双向数据绑定实现原理解析

    Vue的双向数据绑定实现原理解析

    这篇文章主要介绍了Vue的双向数据绑定实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.概述 vuejs是采取数据劫持结合发布者-订阅者模式的方式实现model-->view的数据绑定,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的数据回调. 至于view-model的绑定是对表单添加了change(input)的事件 二.思路 1.实现一个数

  • 深入了解Vue中双向数据绑定原理

    目录 数据的变化反应到视图 命令式操作视图 声明式操作视图 小结 视图的变化反应到数据 现存的问题 数据的变化反应到视图 前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的 命令式操作视图 目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n

  • vue双向数据绑定知识点总结

    vue双向数据绑定知识点总结

    1.原理 vue的双向数据绑定的原理相信大家都十分了解:主要是通过ES5的Object对象的defineProperty属性:重写data的set和get函数来实现的 所以接下来不使用ES6进行实际的代码开发:过程中如果函数使用父级this的情况:还是使用显示缓存中间变量和闭包来处理:原因是箭头函数没有独立的执行上下文this:所以箭头函数内部出现this对象会直接访问父级:所以也能看出箭头函数是无法完全替代function的使用场景的:比如我们需要独立的this或者argument的时候 1.

  • 使用Vue如何写一个双向数据绑定(面试常见)

    使用Vue如何写一个双向数据绑定(面试常见)

    1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充. 添加网上的一张图 2.实现 页面结构很简单,如下 <div id="app"> <form> <input

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • vue实现简易的双向数据绑定

    主要是通过数据劫持和发布订阅一起实现的 双向数据绑定 数据更新时,可以更新视图 视图的数据更新是,可以反向更新模型 组成说明 Observe监听器 劫持数据, 感知数据变化, 发出通知给订阅者, 在get中将订阅者添加到订阅器中 Dep消息订阅器 存储订阅者, 通知订阅者调用更新函数 订阅者Wather取出模型值,更新视图 解析器Compile 解析指令, 更新模板数据, 初始化视图, 实例化一个订阅者, 将更新函数绑定到订阅者上, 可以在接收通知二次更新视图, 对于v-model还需要监听in

随机推荐