zoukankan      html  css  js  c++  java
  • vue双向绑定补充说明方法

    本文总结自: https://segmentfault.com/a/1190000006599500,将每一个流程提炼出来做一个简单的说明,以免自己被繁杂的逻辑弄昏头脑~

    observer: 遍历数据并挟持所有属性,为每一个属性创建dep对象(订阅器, 内含数组sub装载订阅者watcher),当属性发生改变的时候通知此dep,并由他告知所有订阅者(即在set方法中调用dep的notify)

    备注: 由于dep创建于函数内部,外部无法访问,因此为其添加watcher变得很尴尬,因此先将watcher赋值给全局变量Dep.target,再添加到sub

    dep(订阅器): 可添加sub、轮流调用watcher的update方法 

    compile: 解析所有指令,遍历所有节点和文本,

    对于节点,先转为fragment(操作fragment速度比直接操作dom快),再遍历其所有vue属性,例如v-mode,v-on:click。。。

    由专门的解析工具compileUtil处理, 对于事件属性(v-on:xxx),创建此节点对应事件的监听函数并创建watcher对象,以回调函数作为其参数,而此回调函数内调用updater的方法进行视图更新。

    对于v-model,先赋值在创建监听函数

    。。

    其他v-class、v-text均有相应处理方式

    compileUtil: 一个工具对象,提供不同属性的处理方式

    watcher: 是连接observer与compile的桥梁

    1.被创建时便调用对应属性的get方法以将自己添加到dep中

    2.包含update方法,能调用它的回调函数

    3.当dep的notify调用时自己的update方法被调用

    updater对象: 更新视图,当watcher的update方法被触发时提供对应的方法更新视图,更改数据。

    初始化时:

    1.observer挟持所有属性,创建对应dep

    2.解析所有指令(遍历节点,遍历属性),节点转fragment对象,创建监听函数,创建watcher对象并添加到dep中,watcher回调函数控制视图更新,数据变化

    3.fragment处理完毕后初始化视图

    当我们触发被监测的事件(例如click),将: 触发监听函数-->updater更新视图,更改数据-->因为数据被挟持,触发set方法-->通知对应dep-->dep通知所有的watcher更新-->所有回调函数执行-->视图更新

    当改变data,将: 因为数据被挟持,触发set方法-->通知对应dep-->dep通知所有watcher更新-->所有回调函数执行-->视图更新

  • 相关阅读:
    OCP-1Z0-053-V13.02-638题
    OCP-1Z0-053-200题-60题-637
    OCP-1Z0-053-V13.02-637题
    OCP-1Z0-053-200题-47题-625
    OCP-1Z0-053-V13.02-625题
    OCP-1Z0-053-200题-42题-621
    OCP-1Z0-053-V13.02-621题
    OCP-1Z0-053-200题-41题-620
    OCP-1Z0-053-V13.02-620题
    OCP-1Z0-053-200题-37题-616
  • 原文地址:https://www.cnblogs.com/yanze/p/7650598.html
Copyright © 2011-2022 走看看