源码学习
文章平均质量分 81
鸭绒
追求起点是大厂。
展开
-
Vue-Router路由模式的选择和底层原理
1.路由类型Hash模式:丑,无法使用锚点定位。History模式:需要后端配合,IE9不兼容(可使用强制刷新处理IE9不兼容)即可以根据两种模式的特点来进行路由选择。比如:当你的页面需要很多锚点进行定位时< a href="#new_paper" />,点击改链接跳转到页面的新闻部分,那么Hash模式是无法实现的,因为它自身带了#。2.底层原理如果我们去看Vue-Router的底层代码可能会优点晦涩难懂,下面总结以下底层原理,有哪些方式可以触发路由的更新呢?下面这张图一目了然:原创 2021-04-17 16:24:48 · 1156 阅读 · 0 评论 -
在大项目中,Vuex的结构如何搭建?
当我们在开发大项目时,假设在Vuex中还是没有使用modules,那么我们的state、mutations、actions将会变得十分凌乱和杂乱无章,那么下面我们使用modules,不仅要使代码简洁,还要使得结构更清晰。我之前写了一篇关于Vuex的基础用法,初学者可以参考,Vuex基础。基础用法只能用于学习新知识,当有了基础之后,我们就需要重构代码。Vuex结构:我在store目录下创建了modules、getters.js、index.js文件,而modules中又创建了三个模块。下面分别在.原创 2020-11-15 16:46:19 · 414 阅读 · 0 评论 -
Vue中使用路由和权限校验映射
思考:你现在参与的项目中是如何处理路由和权限映射的?什么时候用到权限校验呢?比如一个网站有多个页面,但页面的展示与功能是有角色区分的,有些功能仅展示给管理员使用,有些是供用户使用,这就需要使用路由和权限映射实现。路由处理逻辑如下:路由场景分析中后台路由常见的常见如下: 已获取 Token:访问 /login:重定向到 /访问 /login?redirect=/xxx:重定向到 /xxx访问 /login 以外的路由:直接访问 /xxx 未获取 Token:访.原创 2021-04-28 10:35:45 · 1345 阅读 · 2 评论 -
手写Vue.js响应式原理,实现一个自己的Vue响应式框架
文章目录1.简述功能2.创建Vue3.Observer 实现响应式数据1.简述功能我们实现的一个带有响应式功能的简单Vue框架。功能:负责接收初始化的参数(options)负责把data中的属性注入到Vue实例,转换成getter/setter负责调用observer监听data属性中的变化负责调用compiler解析指令/差值表达式Vue类的结构:前三个是Vue的属性,最后一个是Vue的方法,用于将data设置为setter/getter,并纳入Vue实例中。项目初始结构:2原创 2020-10-31 10:37:25 · 703 阅读 · 0 评论 -
学习Snabbdom库源码,掌握Vue核心的Virtual DOM的实现原理(下)
文章目录1.Snabbdom的核心2. 分析 `h` 函数3. 分析`vnode`函数4. 分析 `patch` 函数5.分析`createEle`函数6. 分析`patchVnode`函数1.Snabbdom的核心 使用h()函数创建vNode对象描述真实DOM init()设置模块,创建并返回patch() patch()比较新旧两个vNode,更新新内容到真实DOM源码通常比较难理解,我们不可能完全阅读源码,应该有个重点目标,比如:vNode是如何创建的vNode是如何渲染成真实D原创 2020-10-29 22:55:48 · 191 阅读 · 0 评论 -
学习Snabbdom库源码,掌握Vue核心的Virtual DOM的实现原理(上)
文章目录1.什么是虚拟DOM?2.为什么使用Virtual DOM?3.Virtual DOM的作用4.Virtual DOM库介绍5.创建项目,为学习源码做准备6.导入Snabbom1.什么是虚拟DOM?Virtual DOM:是用普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以被称为Virtual DOM下面我们来看看真实DOM:<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-10-29 15:01:22 · 301 阅读 · 0 评论