SF
前端
前端
注册登录
关注博客
注册登录
主页
关于
RSS
vue-router源码解析(四)路由匹配规则
chen4342024
2019-01-29
阅读 8 分钟
8k
前面我们讲过,在使用 vue-router 的时候,主要有以下几个步骤: {代码...} 然后再进行路由跳转的时候,我们会有以下几种使用方式 。 详细使用请查看官方文档 {代码...} 那么,你有没有想过, push 进去的对象是如何与我们之前定义的 routes 相对应的 ??接下来,我们一步步来进行探个究竟吧! 匹配路由入口 之前我们说过...
vue-router源码解析(三)路由模式
chen4342024
2019-01-22
阅读 4 分钟
4.2k
vue-router 默认是 hash 模式 , 即使用 URL 的 hash 来模拟一个完整的 URL ,于是当 URL 改变时,页面不会重新加载。
vue-router源码解析(二)插件实现
chen4342024
2019-01-21
阅读 5 分钟
3.5k
vue-router 插件方式的实现 vue-router 是作为插件集成到 vue 中的。 我们使用 vue-router 的时候,第一部就是要 安装插件 Vue.use(VueRouter); 关于插件的介绍可以查看 vue 的官方文档 我们重点关注如何开发插件 如何开发插件 Vue.js 要求插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参...
vue-router源码解析(一)
chen4342024
2019-01-21
阅读 2 分钟
7.3k
准备工作 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 这里主要通过阅读 vue-router 的源码,对平时使用较多的一些特性以及功能,理解其背后实现的思路。 阅读版本 : 3.0.2 目录结构 {代码...} 我们知道 , 我们在使用 vue-router 的时候 ,主要有以下几步: ...
vue虚拟dom原理剖析
chen4342024
2018-12-28
阅读 1 分钟
8.5k
vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了!
snabbdom源码解析(七) 事件处理
chen4342024
2018-12-26
阅读 5 分钟
2.6k
事件处理 我们在使用 vue 的时候,相信你一定也会对事件的处理比较感兴趣。 我们通过 @click 的时候,到底是发生了什么呢! 虽然我们用 @click绑定在模板上,不过事件严格绑定在 vnode 上的 。 eventlisteners 这个模块,就是定义了一些钩子,在 patch 的时候,能够进行事件的绑定以及解绑。 建议阅读这个篇章之前,先阅...
snabbdom源码解析(六) 模块
chen4342024
2018-12-26
阅读 6 分钟
2.4k
在 ./src/modules 里面,定义了一系列的模块 , 这些模块定义了相应的钩子 。这些钩子会在 patch 的不同阶段触发,以完成相应模块的功能处理
snabbdom源码解析(五) 钩子
chen4342024
2018-12-26
阅读 1 分钟
2.3k
文件路径 : ./src/hooks.ts 这个文件主要是定义了 Virtual Dom 在实现过程中,在其执行过程中的一系列钩子。方便外部做一些处理 {代码...} snabbdom源码解析系列 snabbdom源码解析(一) 准备工作 snabbdom源码解析(二) h函数 snabbdom源码解析(三) vnode对象 snabbdom源码解析(四) patch 方法 snabbdom源码解析...
snabbdom源码解析(四) patch 方法
chen4342024
2018-12-26
阅读 14 分钟
3.8k
patch 方法 前言 在开始解析这块源码的时候,先给大家补一个知识点。关于 两颗 Virtual Dom 树对比的策略 diff 策略 同级对比对比的时候,只针对同级的对比,减少算法复杂度。 就近复用为了尽可能不发生 DOM 的移动,会就近复用相同的 DOM 节点,复用的依据是判断是否是同类型的 dom 元素 init 方法 在 ./src/snabbdom.t...
snabbdom源码解析(三) vnode对象
chen4342024
2018-12-26
阅读 2 分钟
3.1k
vnode 对象 vnode 是一个对象,用来表示相应的 dom 结构 代码位置 :./src/vnode.ts 定义 vnode 类型 {代码...} 定义 VNodeData 的类型 {代码...} 创建 VNode 对象 {代码...} snabbdom源码解析系列 snabbdom源码解析(一) 准备工作 snabbdom源码解析(二) h函数 snabbdom源码解析(三) vnode对象 snabbdom源码解析(...
snabbdom源码解析(二) h函数
chen4342024
2018-12-26
阅读 2 分钟
3.6k
介绍 这里是 typescript 的语法,定义了一系列的重载方法。h 函数主要根据传进来的参数,返回一个 vnode 对象 代码 代码位置 : ./src/h.ts {代码...} 其他 h 函数比较简单,主要是提供一个方便的工具函数,方便创建 vnode 对象 snabbdom源码解析系列 snabbdom源码解析(一) 准备工作 snabbdom源码解析(二) h函数 sna...
snabbdom源码解析(一) 准备工作
chen4342024
2018-12-26
阅读 2 分钟
6.1k
阅读 vue 源码的时候,想了解虚拟 dom 结构的实现,发现在 src/core/vdom/patch.js 的地方。作者说 vue 的虚拟 DOM 的算法是基于 snabbdom 进行改造的。