zoukankan      html  css  js  c++  java
  • 双向绑定和单向绑定

    数据绑定

    所谓数据绑定,就是指View层和Model层之间的映射关系

    单向绑定

    Model的更新会触发 View 的更新,而 View 的更新不会触发Model的更新,它们的作用是单向的。

    双向绑定

    Model的更新会触发View的更新,View的更新也会触发Model的更新,它们的作用是相互的。

    avatar

    React 采用单向数据绑定

    avatar
    当用户访问View时,通过触发Events进行交互,而在相应Events Handlers中,会触发相应的Actions,而Actions通过调用setState方法对ViewState进行更新,State更新后会触发View的重新渲染。

    单向数据绑定的优缺点:
    优点:所有状态都可以被记录、跟踪,状态变化通过手动调用触发,源头易追溯。
    缺点:会有很多类似的样板代码,代码量会相应的上升。

    Vue 支持单向数据绑定和双向数据绑定

    • 单项数据绑定:使用v-bind属性绑定、v-on事件绑定或插值形式{{data}}
    • 双向数据绑定:使用v-model指令,用户对View的更改会直接同步到Model

    Vue 的双向数据绑定就是指使用v-model指令进行数据绑定,而v-model本质上是v-bindv-on相结合的语法糖,是框架自动帮我们实现了更新事件。换句话说,我们完全可以采用单向绑定,自己实现类似的双向数据绑定。

    双向数据绑定的优缺点:

    优点:在操作表单时使用v-model方便简单,可以省略繁琐或重复的onChange事件去处理每个表单数据的变化(减少代码量)。
    缺点:属于暗箱操作,无法很好的追踪双向绑定的数据变化。

    Angular 支持单向数据绑定和双向数据绑定

    • 单向数据绑定:使用[x]属性绑定,(x)事件绑定或插值形式{{data}}
    • 双向数据绑定:使用[(x)]语法,用户对View的更改会直接同步到Model

    AngularJS 支持单向数据绑定和双向数据绑定

    • 单向数据绑定:使用ng-bind指令或插值形式{{data}}
    • 双向数据绑定:使用ng-model指令,用户对View的更改会直接同步到Model

    参考地址

    https://juejin.cn/post/6854573208646090765

  • 相关阅读:
    月食照片
    宾得镜头大全与发展史
    月食照片
    关于镜头系数的疑问
    经验和教训
    常用正则表达式
    12月19日
    部長面談
    周六
    异度空间
  • 原文地址:https://www.cnblogs.com/GardenofEden/p/14627405.html
Copyright © 2011-2022 走看看