zoukankan      html  css  js  c++  java
  • MVVM深入理解---小白速会

    简单来说 MVVM 是一种将数据和视图关联的模式,是利用数据劫持结合发布订阅模式当数据变化时就更新视图。具体用到了compile(编译模板)、observe(数据劫持)、watcher(观察者)、Dep(发布订阅)

    这里需要特别解释一下数据劫持和发布订阅模式:

    • 数据劫持(observe):就是利用 Object.defineProperty 将data数据全都转化为 getter 和 setter 的钩子函数,以方便后续对数据做处理
    • 发布订阅模式(Dep):发布订阅是对于watcher的收集管理。将数据的watcher维护成一个数组,当数据变化的时候逐个去调数组里的watcher更新数据的方法。

    具体各个模块的行为表现如下:

    • compile:就是用来编译模板的,就是将模板上的 {{}} 或者指令(v-model...)绑定的值去data里找到之后,将值赋值给value或者插入到文本中。这里更新视图的地方会提前加一个监控watcher,数据变化了,就去跟新视图。
    • observe:将data上绑定的值利用 Object.defineProperty()来重写数据,给数据添加各自的 get、set方法,以方便后续在获取值的时候、设置值的时候都能加自己想做的处理;在get的时候,将数据的观察者加入到发布订阅的数组中去,在set的时候通知所有的观察者,去调更新的方法,而去更新模版。
    • watcher:观察者的目的就是给需要变化的那个元素({{}}或者带有指令的元素)增加一个观察者,当数据变化后,执行对应的处理方法, 这里的处理方法的作用其实就是再次调用compile中更新视图的方法。
  • 相关阅读:
    vuex 命名空间
    vue-touchjs
    Jackson最简单用法
    Bootstrap登录样式
    Left/Right/Inner Join用法和区别
    VS2015安装提示出现“安装包丢失或损坏”解决方法
    HTML之禁止输入文本
    jQuery之call()方法的使用
    jQuery操作cookie
    jQuery常用的查找Dom元素方法
  • 原文地址:https://www.cnblogs.com/00feixi/p/11810486.html
Copyright © 2011-2022 走看看