zoukankan      html  css  js  c++  java
  • Vue响应式原理

    在 new Vue() 后, Vue 会调用 _init 函数进行初始化,也就是init 过程,在 这个过程Data通过Observer转换成了getter/setter的形式,来对数据追踪变化,

    当被设置的对象被读取的时候会执行getter 函数,而在当被赋值的时候会执行 setter函数。
    当render function 执行的时候,因为会读取所需对象的值,所以会触发getter函数从而将Watcher添加到依赖中进行依赖收集。
    在修改对象的值的时候,会触发对应的setter, setter通知之前依赖收集得到的 Dep 中的每一个 Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher就会开始调用 update
    来更新视图。


    深入理解:
    • 监听器 Observer:对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。
    • 解析器 Compile:解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新。
    • 订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新——这是一个典型的观察者模式
    • 订阅器 Dep:订阅器采用 发布-订阅 设计模式,用来收集订阅者 Watcher,对监听器 Observer 和 订阅者 Watcher 进行统一管理。
  • 相关阅读:
    Oracle BIEE整合百度图形库ECharts
    FineReport报表和J2EE应用的集成
    FusionChart对MDX查询结果的数据展示案例
    SharePoint 2013 配置开发环境,需安装VS2012插件
    SharePoint Online 创建门户网站系列之导航
    java实现简单的单点登录
    完整的Java简单浏览器
    Java实现全屏的四种方式(四个例子)
    在 Web 应用中实现全屏效果
    转载(原标题:网站再遭新威胁 Struts2又曝高危漏洞啦)
  • 原文地址:https://www.cnblogs.com/qinglaoshi/p/13446552.html
Copyright © 2011-2022 走看看