欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 21:28:13
vue介绍 vue是当前很火的一款mvvm的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。 vue与mvvm...

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的数据双向绑定问题,希望对大家有所帮助