0
点赞
收藏
分享

微信扫一扫

vue相关原理图解

奔跑的酆 2021-09-24 阅读 99
vueVue

MVVM

生命周期

vue初始化及更新

  1. new Vue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中
  2. 同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在Compile中
  3. 同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher
  5. 将来data中数据⼀旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数


依赖收集

视图中会用到data中某key,这称为依赖。同⼀个key可能出现多次,每次都需要收集出来用⼀个Watcher来维护它们,此过程称为依赖收集
多个Watcher需要⼀个Dep来管理,需要更新时由Dep统⼀通知


vue 原理

  • MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新。将controller中的与视图相关的逻辑放在vm层完成。
  • Angular的数据观测采用的是脏检查(dirty checking)机制。
    每一个指令都会有一个对应的用来观测数据的对象,叫做watcher;一个作用域中会有很多个watcher。每当界面需要更新时,Angular会遍历当前作用域里的所有watcher,对它们一一求值,然后和之前保存的旧值进行比较。如果求值的结果变化了,就触发对应的更新,这个过程叫做digest cycle。
    • 当watcher的数量庞大时,应用的性能很难优化。
    • 框架并不能主动侦测到变化的发生,需要手动触发更新
  • Vue.js采用的则是基于依赖收集的观测机制。
    • 将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值,也可以被赋值。
    • 在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。
    • 当一个被依赖的可观察对象被赋值时,它会通知所有订阅自己的watcher重新求值,并触发相应的更新。
    • Vue.js利用了ES5的Object.defineProperty方法,直接将原生数据对象的属性改造为getter和setter,在这两个函数内部实现依赖的收集和触发
    • 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。
      链接地址:https://www.csdn.net/article/2015-08-11/2825439-vue

vuex

  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。


Vuex 背后的基本思想

  • 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。


举报

相关推荐

0 条评论