VUE响应式原理

追踪变化

        当把一个普通的JavaScript对象传给vue实例的data选项时,vue将遍历对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。

        这些getter/setter对用户来说是不可见的,但是在内部它们让Vuue追踪依赖,在属性访问的和修改时通知变化。【注意】浏览器控制台在打印数据对象时,getter/setter的格式化并不同,所以你可能需要安装vue-devtools来获取更加友好的检查接口

        每个组件实例都有相应的watcher实例对象,它会在渲染的过程中把属性记录为依赖,之后当依赖项setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新

检测变化

        受现代js的限制,vue不能检测到对象属性的添加和删除。由于vue会在初始化实例时对属性执行getter/setter转化,所以属性必须在data对象上才能让vue转化它,这样才能让它是响应的     

        Vue不允许在已经创建的实例上动态的添加新的根级组件响应属性,然而可以通过vue.set(object,key,value)方法将响应式的属性添加到嵌套的对象上,也可以使用this.$set(this.object,key,value)

声明响应式组件

     由于vue不允许动态的添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性。这样限制的原因是,它消除了在依赖项跟踪系统中的一类边界情况,也使vue实例在类型检查系统的帮助下运行的更高效。在代码可维护方面也有一点重要的考虑:data对象就像组件状态的概要,提前声明所有的响应式属性,也可以让组件代码在以后阅读或其他开发人员阅读时更易于被理解

异步更新队列

  Vue异步执行DOM更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你...
    浪里行舟阅读 2,076评论 0 16
  • 摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归...
    Fundebug阅读 5,498评论 0 9
  • 理解原理之前,可以先查看 Object.defineProperty 相关知识点。 1 Object.define...
    林ze宏阅读 561评论 0 0
  •   Vue很好用的一点是响应式系统(reactivity system)。模型层(model)只是普通JS对象,修...
    小小的开发人员阅读 2,535评论 0 12
  • 假期总结,失败的三天假 1.星期四傍晚本来挺好的下午,我觉得还是需要出去晃一晃,哪怕做生活决定也是需要一个咖啡馆比...
    阴雨天好心情阅读 164评论 0 0