![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue源码
文章平均质量分 70
coder_yihua
这个作者很懒,什么都没留下…
展开
-
Vue创建app及App挂载和渲染
1.执行createApp执行ensureRenderer去判断是否有渲染器,首次进入是没有渲染器的。所以会调用createRenderer函数创建渲染器创建渲染器的时候最终会返回一个对象,包括render、hydrate、createAppa. hydrate做服务端渲染b. render函数c. createApp会调用createAppAPI函数createAppAPI函数的调用,会返回createApp函数createApp函数返回一个包括App全局API的对象,包括use、mixi原创 2022-01-17 15:36:20 · 3510 阅读 · 0 评论 -
vue响应式系统数据劫持
在vue3中,采用Proxy进行代理,从而实现数据劫持。依赖收集器class Dep { constructor() { this.subscribers = new Set(); } depend() { if (activeEffect) { this.subscribers.add(activeEffect); } } notify() { this.subscribers.forEach(effect => {原创 2022-01-11 19:00:00 · 134 阅读 · 0 评论 -
数据响应式
observe函数使用observe函数将数据变成响应式数据,在我们的observe函数中我们会给我们的数据绑定一个不可枚举的属性__ob__。并且将该数据返回。__ob__也就是实现了数据响应式。函数内部实现,我们首先得判断该数据是否是对象,如果是对象我们才进行检测,在vue中我们的data就是一个对象。然后判断数据是否已经存在__ob__属性。如果存在我们就直接将此属性返回。如果不存在我们就通过Observer类对数据进行实例化,然后返回实例化之后的数据。import Observer from "原创 2021-12-08 17:56:29 · 840 阅读 · 0 评论 -
patch函数实现虚拟DOM上树(diff算法进行精细化对比)简易patch实现
patch函数拿到新旧节点,先进行判断,如果不是虚拟节点则进行虚拟节点的创建,在判断是否是同一个节点。如果是同一个节点则需要进行精细化对比。如果不是同一个节点,则需要暴力删除,此时我们需要先将新节点转为真实的DOM,在将dom依据老节点为标杆进行插入,插入完成之后进行老节点的删除。其中vnode函数在上一章节讲h函数中有使用用来创建虚拟节点。createElement用来依据虚拟节点创建真实的DOM并挂载在虚拟节点的elm上。patchVNode函数对新老节点进行进一步的比较。import vnode原创 2021-12-03 16:04:51 · 397 阅读 · 0 评论 -
snabbdom h函数
snabbdom h函数h函数到底做了什么?h函数将我们的tokens(有模板生成的一个数组,可看前面的文章提到的mustache)转为vnode(虚拟节点)。h函数了解h函数的源码你会发现,h函数里面是进行了一个重载,他在我们写参数调用h函数进行了判断,从而达到内部值的一一对应,在h函数中我们最后进行了一个return ,此时return调用了vnode函数,将返回一个vnode对象。(虚拟节点)简易版h函数import vnode from './vnode'/** * @param原创 2021-11-30 14:57:41 · 151 阅读 · 0 评论 -
vue源码-(了解mustache)-(模板祖师爷)
如何将数据变成视图1.纯DOM法:通过api直接获取DOM对象去更改DOM里面的数据,也可以直接拿到根节点,使用JS的循环去创建子节点,将子节点添加到根节点中。会使用到document.createElement等原生操作DOM的API。2.数组join发:通过将DOM及变量直接用字符拼接放入数组中,最后使用数组的join方法,将字符串拼接起来.3.ES6反引号:模板字符串,通过``配合${变量}达到换行保持原有的DOM结构.4.模板引擎:定义一个模板,将数据和模板结合起来,遵守模板规则.以must原创 2021-11-26 14:04:40 · 138 阅读 · 0 评论