zoukankan      html  css  js  c++  java
  • 双向数据绑定与单向数据绑定

    在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

    一、各自优势

    双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时,页面自动发生更新。但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道是谁变了,变化后也不会通知你,当然你可以watch来监听data的变化,但是这变复杂了,还不如单向数据绑定。

    所以说按照方神的说法:Vuex推荐单向绑定就是为了[控制欲]!,虽然单向绑定牺牲了一部分便捷性,换来的是更大的[控制力]

    除此之外单向数据绑定对于复杂应用来说是实施统一的状态管理,方便跟踪。

    更多讨论见知乎:https://www.zhihu.com/question/49964363

    二、单向数据与双向数据关系

    单向数据绑定的实现思路:

    1. 所有数据只有一份
    2. 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
    3. 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

    其实单向绑定也有双向绑定的意味,不过页面变动后数据的变化不会自动更新。方神解析了这个魔法:双向绑定 = 单向绑定 + UI事件监听。请看下面的代码示例

    vue数据单向绑定

    <body>
      <div id="app">
        <input type="text" v-model="meg">
        <p>{{data}}</p>
      </div>
     
      <script>
        var app = new Vue({
          el:'#app',
          data :{
            meg:''
          }
         
        })
      </script>
    </body>

    当你在页面的input框中输入值时,下面一行同步显示内容,如果我们不要v-model指令能实现这个效果吗? 只需要改为:

     //首先设置value属性为meg,然后监听输入事件
    <input type="text" :value="meg" @input="meg=$event.target.value"> 

    同样也实现了双向数据绑定,所以它并不是什么黑魔法!

  • 相关阅读:
    Spark技术栈
    Linux rm -rf删除文件不释放空间的解决办法
    MySQL 5.6.35 索引优化导致的死锁案例解析
    亲历者说 | 完整记录一年多考拉海购的云原生之路 转
    Spark实战(八)spark的几种启动方式
    Spark实战(七)spark streaming +kafka(Python版)
    stm32 IAP + APP ==>双剑合一
    Flask-APScheduler定时任务查询操作数据库(多文件/模块)
    flask框架开启定时任务简单案例flask_apscheduler
    Flask数据的增删改查(CRUD)
  • 原文地址:https://www.cnblogs.com/luoqian/p/6440146.html
Copyright © 2011-2022 走看看