相信有很多这样的兄弟，学了 Vue3 的各种 API和新特性 ，但公司项目依然使用的是 Vue2 ，也不知道自己的水平能否上手 Vue3 项目。今天就把实战过程中遇到的十个场景分享给大家。

前言前端权限架构的设计一直都是备受关注的技术点.通过给项目引入了权限控制方案,可以满足我们灵活的调整用户访问相关页面的许可.比如哪些页面向游客开放,哪些页面必须要登录后才能访问,哪些页面只能被某些角色

1. Vue 响应式原理 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。 watcher 中实例化了 de…

渲染真实DOM会有一定的开销，如果每次修改数据都进行真实DOM渲染，都会引起DOM树的重绘和重排，性能开销很大。那么有没有可能只修改一小部分数据而不渲染整个DOM呢？虚拟DOM和Diff算法可以实现。 真实DOM操作为一个属性一个属性去修改，开销较大。 Vue的虚拟DOM数据更…

本文已收录在Github github.com/Geekhyt，欢迎Star。 从镜片的厚度和黄黑相见的格子衬衫我察觉到，面前坐着的这位面试官应该是来者不善。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，为了避免尴尬，我盯着面试官的眉毛中间，不过面试官明显对我的经历不…

createElement方法也是vue和react用来创建虚拟DOM的方法，我们也叫这个名字，方便记忆。接收三个参数，分别是type，props和children 到目前为止，已经轻而易举的实现了创建虚拟DOM。那么，接下来进行下一步，将其渲染为真实的DOM，别犹豫，继续回到…

最近频频看到了骨架屏这个词，其实在这之前鲜少听过骨架屏这个词。只是平时在浏览网站时，会经常看到某个页面在尚未获取到真正数据时展示的一些占位图形。 那实际上这个就是前面所描述的骨架屏，即在页面数据尚未加载前先给用户展示出页面的大致结构，在获取到数据以后在具体展示页面的内容。那骨架…

自己之前看过一些Vue2源码解析的文章，视频，博客等，之前面试也经常会被问到双向数据绑定甚至被要求手写代码（身为一个学习前端一年半的垃圾练习生，被问原理我可以跟你将博客上一些高大上的解释跟你吹上半天，但是你要我写，哼，那我只好理直气壮的告诉你：我不会！）。因此这次想要从一个简单…

目前，前端的主流Vue、React、Angular这些，他们都提供了有关路由的插件，一般来说，这些路由插件总是提供两种不同方式的路由方式： Hash 和 History。具体内容将会在下文中提到，下面就让我们围绕这两种方式来简单手写一个路由： 这样，hash模式的路由就基本实现…