• Vue响应式原理


       追踪变化

        当把一个普通的JavaScript对象传给vue实例的打他选项时,vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性,这也就是为什么vue不支持IE8以及更低版本浏览器

        这些getter/setter对用户来说是不可见的,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。【注意】浏览器控制台在打印数据对象时,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将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。

  • 相关阅读:
    PTA——List Leaves
    pta——电话聊天狂人(c二叉树实现)
    Anti-SG游戏 与 SJ定理笔记(反Nim博弈)
    Unicode代码点与代码单元
    奇偶校验位
    IPv6与IPv4的位数
    0- win10配置java环境变量问题
    小计划
    路径问题
    getResource(path)的注意事项
  • 原文地址:https://www.cnblogs.com/kingwu/p/10116286.html
Copyright © 2020-2023  润新知