zoukankan      html  css  js  c++  java
  • Vue双向数据绑定原理

    Vue双向数据绑定的效果的实现,用js实现效果,我以为是触发后使用setInterval()刷新实现的,今天没事了解一下:

    实现双向数据绑的方法:

    1.发布者—订阅者模式(backbone.js);

    object.observe() 浏览器已废弃;

    2.脏值检查(anguar.js);

    指定事件(ng-click/$http/$location/$interval/$digest(只触发当前及子作用域的监控)||$apply(可参数,作用域树上所有监控,推建使用)...)触发时进入脏值检测view和model是否变化,决定同步更新,通过$watch/setInterval()定时轮询检测数据变动;形象的例子解释脏检查机制:

    "脏检查机制"(dirty-checking)=====

    $digest:“嘿,watcher1,你的值是什么?”

    watcher1:"是 ‘ngBook’。"

    $digest:“好的,你的值改变过吗?(脏了吗?)”

    watcher1:"没有,$digest先生。"

    $digest(心想):这个watcher1的没改变过,那我们继续下一个吧。

    .......

    $digest:“嘿,watcher2,你的值是什么?”

    watcher2:"报告,是 ‘破狼’。"

    $digest:“刚才被改变吗?”

    watcher2:"已经被改变过了,刚才的值是‘雪狼’,正等待你的到来呢"

    $digest(心想):很好,看来我们的DOM一会需要更新了。

    ...继续watcher3/4/5...的询问、检查....最后遍历所改变的watcher。

    缺点:遍历轮询watcher消耗性能,特别是单页面监控数量达到很大数量时候。

    =================

    $digest和$apply

    angularjs双向数据绑定原理

    3.数据劫持;

    object.defineProperty()

    vue的双向绑定原理及实现

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

  • 相关阅读:
    补题列表
    task list
    UVa 11809
    UVA 272 TEX Quotes 题解
    莱州一中2016高考加油视频
    POJ2367-Genealogical tree-拓扑排序
    POJ1094-Sorting It All Out-拓扑排序
    POJ3660-Permutations-传递闭包FLOYD
    POJ3687- Labeling Balls-优先队列拓扑排序
    POJ1201-Intervals- 差分约束
  • 原文地址:https://www.cnblogs.com/yancongyang/p/9287695.html
Copyright © 2011-2022 走看看