• 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 进行统一管理。
  • 相关阅读:
    [Windows] 一些简单的CMD命令
    开发过程中用到的触发器
    MyEclipse8.5配置struts等框架
    Java编程中中文乱码问题的研究及解决方案
    开源的SSH框架优缺点分析
    java 合并排序算法、冒泡排序算法、选择排序算法、插入排序算法、快速排序
    html,CSS文字大小单位px、em、pt的关系换算
    HTML常用标签参考学习
    匹配中文字符的正则表达式
    Oracle 取上周一到周末的sql
  • 原文地址:https://www.cnblogs.com/qinglaoshi/p/13446552.html
Copyright © 2020-2023  润新知