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

Vue介绍

Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。

Vue与MVVM

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。Vue以数据为驱动，将自身的Dom元素与数据进行绑定，一旦创建绑定，Dom和数据保持同步。

双向绑定

主流双向数据绑定实现原理

脏值检测 : 这是AngularJS实现双向数据绑定的方式。 原理是 当数据进行变更的时候对所有Model和View的绑定关系进行一次检查，识别是否有数据进行了变更，如果有变化则进行处理，由于可能进一步引发其他数据的改变，会再次循环这个过程，知道没有数据的变化之后。发送数据到视图重新渲染。 可想而知，这样的方式性能不高。

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变

数据数据双向

数据模型（Module）和视图（View）之间的双向绑定。

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

如何使用js达到双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id ="uName"></span>
<script>
  var obj={
    pwd:"1234"
  };
  //主要使用到了get和set方法，最为关键
  Object.defineProperty(obj,"userName",{
    get:function(){
      console.log('get init');
    },
    set:function(val){
      console.log("set init");
      document.getElementById("uName").innerText=val;
      document.getElementById("userNmae").value=val;
    }
  });
  document.getElementById("userName").addEventListener("keyup",function(event){
    obj.userName=event.target.value;
  }
  )
</script>
</body>
</html>

运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，这也就是vue的双向数据绑定的核心点。

总结

以上所述是小编给大家介绍的轻松理解vue的数据双向绑定问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Vue实现双向数据绑定

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

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

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

  • 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.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin

  • 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,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

随机推荐