vue
文章平均质量分 86
风摇烨
这个作者很懒,什么都没留下…
展开
-
Vue 源码分析5----DOM
Vue底层也是通过虚拟dom渲染页面。现在我们描述一下相关知识点1.虚拟dom是通过渲染函数(h函数)产生2.新虚拟DOM和老虚拟DOM进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的DOM上。 真实dom由以上图片可以知道,我们 html模板就是真实dom。虚拟dom用Javascript 对象描述DOM层次结构。DOM中的一切属性都在虚拟DOM中有相对应的属性。下面我们通过一个流程图说明数据渲染过程。这里渲染过程要用到sna..原创 2021-07-13 15:23:08 · 133 阅读 · 0 评论 -
VUE源码分析4 -- Mustache简介 和重写Scanner
下面我们说Vue Dom实现,vue dom 兼容mustache项目。这个链接是mustache官方工程mustache github地址下面我们原创 2021-06-18 19:21:57 · 218 阅读 · 0 评论 -
Vue源码分析4 ---- depend和watcher数据监听
前面Array数据帧检测说完,下面接着说Vue数据侦测具体实现过程。下面我们说depend和watcher数据监听Watcher和 DepWatcher类是用来实时检测数据变化,并且通知dom变化。Dep用来管理所有依赖依赖就是Wather。只有Watcher触发的getter才会收集依赖,哪个Watcher触发了getter,就把哪个watcher收集到Dep钟。Dep使用发布订阅模式,当数据发生变化时,会循环依赖列表,把所有的Watcher都通知一遍。Watcher 把自己设置到全局的一个指原创 2021-06-09 20:47:14 · 690 阅读 · 1 评论 -
Vue源码分析3--Array的变化侦测
前面描述Object的变化侦测 ,但是还有array没有处理。为什么 Object 和Array数据有两种不同的变化侦测方式?因为对于object 数据是用JS对象原型上 Object.defineProperty 。但是 Array没有该方法。因此我们要涉及另外一套Array的变化侦测机制。思路分析由以上流程图,我们先创建一个 Array 构造函数, 指向 Array.prototypeconst arrayProto =Array.prototype;const arrayMethod原创 2021-06-04 18:05:39 · 671 阅读 · 8 评论 -
Vue源码分析2--Ojbect的变化侦测
首先Vue的最大特点是数据驱动视图。什么是数据驱动试图呢?我可以用一条公式来描述UI= reader(state)在这条公式中,UI是页面输出,state是状态/数据,render就是vue,vue当检测到数据变化,就会触发改变UI。那么问题来了,Vue怎么根据数据变化而更改视图呢?下面我们总结一下变化侦测。并且从零基础开始手写Vue的变化侦测什么是变化侦测变化侦测是数据变化了,就要更新视图。目前的前端三大框架中均有涉及。在Angular中是通过脏值检查流程来实现变化侦测;在React是通过对比原创 2021-06-04 11:34:38 · 233 阅读 · 1 评论