zoukankan      html  css  js  c++  java
  • Vue.js内部响应式原理探究

    参考:http://blog.csdn.net/john1337/article/details/53081258

    如何追踪变化:

    模板中每个指令/数据绑定都有一个对应的 watcher 对象,在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时,会触发 watcher 重新计算 ,也就会导致它的关联指令更新 DOM。

     setter 被调用时,会触发 watcher 重新计算 ,也就会导致它的关联指令更新 DOM

    异步更新队列:

    Vue.js 默认异步更新 DOM。每当观察到数据变化时,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。等到下一次事件循环,Vue 将清空队列,只进行必要的 DOM 更新。在内部异步队列优先使用 MutationObserver,如果不支持则使用 setTimeout(fn, 0)。

    计算属性的奥秘

    你应该注意到 Vue.js 的计算属性不是简单的 getter。计算属性持续追踪它的响应依赖。在计算一个计算属性时,Vue.js 更新它的依赖列表并缓存结果,只有当其中一个依赖发生了变化,缓存的结果才无效。因此,只要依赖不发生变化,访问计算属性会直接返回缓存的结果,而不是调用 getter。

  • 相关阅读:
    B站使用总结
    安装国外浏览器的好处
    查看网页源代码
    如何下载bilibili上面的视频
    11.27
    11.26
    11.25
    11.24获取时间
    11.23
    11.21
  • 原文地址:https://www.cnblogs.com/wangge001/p/7813058.html
Copyright © 2011-2022 走看看