A. vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码
以往我们在开发vue项目的时候，总是通过将路径和路由写在route/index.js文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足。因为我们在route/index.js中已经写满了所有的路由，这样子不仅造成静态路由内容过多、修改困难，同时当静态路由内容过多的时候，我们在路由中的内容就显得极其复杂。
而后端对前端的控制也显得较为无力，无法实现严格性的控制。
由此我们发现通过动态路由控制是必然的，此时我们只需要通过后端获取数据菜单和路由信息json，然后动态添加路由并生成菜单，使菜单与动态路由内容进行一个匹配，这样子我们可以实现由后端控制前端的菜单和路由，我们的项目往往只需要内置几个组件无需权限的公共页面如登陆、注册、忘记密码和404错误这几个常用页面组件。
我们只需要将写好的组件放置到我们的view视图下，然后我们通过动态的路由和菜单实现路由添加和菜单进行匹配，我们便可实现对插件进行访问，我们减少了对route/index.js内容写入，同时也有利于减少内存的占用。
我们通过动态路由的形式，我们生成的菜单权限更加的完善，不仅实现依靠菜单与路由守卫拦截实现鉴权，也可以通过动态路由实现动态加载vue文件，控制更加深度
我们通过动态路由的形式，我们可以将项目分给不同的人进行完成，便于组建一个开发团队，因为他们所开发的组件，我们只需要在具备基本的javascript库的情况下。我们直接进行动态路由的一个挂载和菜单生成便可完成项目合作，减少了对route/index.js文件的操作，保证项目的完整性。
最后我发现在非node环境的开发条件下，我们可以实现远程的vue文件加载，这不仅为我们开发提供了便利，同时也有利于我们及时修改文件，以达到项目的需求，更有利于保障安全，实现服务器vue文件加载。
Vue：2.6.11。
Vue-route：3.2.0。
主页
聊天
第一通过后端返回的一个路由json数据，我们通过前端生成符合路由路由静态内容数组的一个数组，然后再通过addRoute进行一个循环添加，我们以此生成动态路由。在登陆时获取后端返回的菜单信息，我们进行菜单的一个循环生成，由此我们的一个动态项目就已经完成。
第二怎样对动态路由和菜单项目进行一个管理。
我们首先可以通过搭建一个组件通过添加路由信息和管理菜单实现二者的动态匹配。我们只需要对路由信息进行一个添加和修改，并和菜单相互间进行匹配，我们便可实现简单的路由挂载。
组件管理
菜单管理
此时将数据提交的后端由后端进行数据保存，我们此时的组件只需要放在views文件夹下，添加路由进行文件加载，我们便可实现路由管理。
第一登陆页面配置。
我们需要在静态文件夹下创建一个menu.json和route.json。两个json文件模拟服务器登录时返回的数据。
我们在登录页面模拟获取数据之后，我们通过菜单的一个方法进行生成菜单，通过路由的方法生成路由数组并进行循环添加，然后执行路由跳转。
第二配置路由初始化内容。我们将route/index.js的路由信息填为空是非常不理智的，而且会报错，因为路由初始化在加载前已经完成。有些页面完全不需要权限便可访问，比如登录、注册、找回密码和404错误，这种不需要权限的页面，我们还是需要将其直接以静态的形式写在route/index.js文件中。
Index初始数据
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue . use ( VueRouter )
const routes = [{
path: '/' , //访问url
name: 'login' , //路由名称
component : () => import ( '@/unitui/pages/Login.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "登录" //网站标题
}
},
{
path: '/register' , //访问url
name: 'register' , //路由名称
component : () => import ( '@/unitui/pages/Register.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "注册" //网站标题
}
},
{
path: '/forget' , //访问url
name: 'forget' , //路由名称
component : () => import ( '@/unitui/pages/Forget.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "找回密码" //网站标题
}
},
{
path: '/404' , //访问url
name: '404' , //路由名称
component : () => import ( '@/unitui/pages/404.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "404错误" //网站标题
}
},
]
const router = new VueRouter ({
routes
})
router . beforeEach (( to , from , next ) => {
document . title = to . meta . web_title
console . log ( to );
next ()
})
export default router
第三，关于防止刷新后丢失的问题。我们需要在app.vue文件中的methods方法中定义一个路由生成方法。
示例：
init_route () { //初始化路由，防止刷新丢失
if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有后端已经返回数据的情况下才允许生成
const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //获取路由信息
const data = []; //默认路由数组
for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息
data [ index ] = {
path: route_data [ index ]. path , //访问url
name: route_data [ index ]. name , //路由名称
component : resolve =>
require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //加载模板文件
meta: {
show_site: route_data [ index ]. meta . show_site , //是否全屏显示
web_title: route_data [ index ]. meta . web_title //网站标题
}
};
}
for ( let index = 0 ; index < data . length ; index ++) { //循环添加路由
this . $router . addRoute ( data [ index ]);
}
}
}
在mounted中进行方法调用，防止刷新的时路由丢失，导致发生错误。该方法内容基本和登陆页面的菜单出路由初始内容基本相同，但我们唯一差别的是，我们需要判断登陆所获取的路由信息是否存在，只有在存在的时候及后端已经返回了路由信息，即证明登录成功的时候，我们才会动态添加路由。
第一在刷新之后，默认跳转到path:’*’的一个路由界面中去，此时我们解决方法只需要将path:’*’路由进行一个删除,将其删除就变可正常访问。
第二动态路由跳转时发生Cannot find mole xxx错误。
意思是无法加载我们指定的一个vue文件，这是由于route3.0版本后import方式不支持传入变量，此时我们只需要将其改为require方式便可。
我们此次动态vue项目开发已经基本完成，我的开发的项目是基于element-ui进行，那么如果你需要源码参考。可以私信回复unit便可获取。
B. vue-lazyload 源码解析
/src/lazy.js
定义变量接收实例化参数。
lazy.js 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用。
判断是否支持Webp图片
/src/listener.js
定义变量接收实例化参数。
filter 方法将配置的 filter 对象中的方法执行，接收两个参数，一个为 ReactiveListener 实例，一个为 options 参数对象。
initState 方法给元素添加 data-set 属性，值为图片地址 src，并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset 属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src 属性赋值。
render 方法，是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。
回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。
/src/lazy-container.js
LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定，自定义指令 v-lazyload-container。
/src/lazy-component.js
上述实现元素绑定主要是通过自定义指令 v-lazy ， v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件，完成绑定，默认渲染成为 div 标签，作为 img 的容器。
/src/lazy-image.js
通 LazyComponent 组件，只不过 LazyImage 注册的 lazy-image 组件，渲染成的是 img 标签，多了 src 属性。
通过自定义指令 v-lazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler ；
在需要懒加载的元素上设置属性 data-src ，这是期望的图片地址(filter 配置项可以预先过滤赋值)，元素上自定义 lazyLoad 表示图片状态(状态变更后，adapter 中触发回调)；
ListenerQueue 数组中收集的是 ReactiveListener 类的实例，主要是用于懒加载不同状态下的图片加载，loading - loaded - error；
当触发 EventListener 了，执行 lazyLoadHandler 方法，根据算法，进入 viewport 后， ReactiveListener 元素如果与触发元素匹配，则进行图片的加载及渲染。
C. 这种VUE代码 是怎么写的
应该是打包工具自动生成的吧。
像这种代码类似库源码，是挺难阅读的。
D. 【面试题解析】从 Vue 源码分析 key 的作用
最近看了面试题中有一个这样的题， v-for 为什么要绑定 key？
Vue 中 key 很多人都弄不清楚有什么作用，甚至还有些人认为不绑定 key 就会报错。
其实没绑定 key 的话，Vue 还是可以正常运行的，报警告是因为没通过 Eslint 的检查。
接下来将通过源码一步步分析这个 key 的作用。
Virtual DOM 最主要保留了 DOM 元素的层级关系和一些基本属性，本质上就是一个 JS 对象。相对于真实的 DOM，Virtual DOM 更简单，操作起来速度更快。
如果需要改变 DOM，则会通过新旧 Virtual DOM 对比，找出需要修改的节点进行真实的 DOM 操作，从而减小性能消耗。
传统的 Diff 算法需要遍历一个树的每个节点，与另一棵树的每个节点对比，时间复杂度为 O(n²)。
Vue 采用的 Diff 算法则通过逐级对比，大大降低了复杂性，时间复杂度为 O(n)。
VNode 更新首先会经过 patch 函数， patch 函数源码如下：
vnode 表示更新后的节点，oldVnode 表示更新前的节点，通过对比新旧节点进行操作。
1、vnode 未定义，oldVnode 存在则触发 destroy 的钩子函数
2、oldVnode 未定义，则根据 vnode 创建新的元素
3、oldVnode 不为真实元素并且 oldVnode 与 vnode 为同一节点，则会调用 patchVnode 触发更新
4、oldVnode 为真实元素或者 oldVnode 与 vnode 不是同一节点，另做处理
接下来会进入 patchVnode 函数，源码如下：
1、vnode 的 text 不存在，则会比对 oldVnode 与 vnode 的 children 节点进行更新操作
2、vnode 的 text 存在，则会修改 DOM 节点的 text
接下来在 updateChildren 函数内就可以看到 key 的用处。
key 的作用主要是给 VNode 添加唯一标识，通过这个 key，可以更快找到新旧 VNode 的变化，从而进一步操作。
key 的作用主要表现在以下这段源码中。
updateChildren 过程为：
1、分别用两个指针（startIndex, endIndex）表示 oldCh 和 newCh 的头尾节点
2、对指针所对应的节点做一个两两比较，判断是否属于同一节点
3、如果4种比较都没有匹配，那么判断是否有 key，有 key 就会用 key 去做一个比较；无 key 则会通过遍历的形式进行比较
4、比较的过程中，指针往中间靠，当有一个 startIndex > endIndex，则表示有一个已经遍历完了，比较结束
从 VNode 的渲染过程可以得知，Vue 的 Diff 算法先进行的是同级比较，然后再比较子节点。
子节点比较会通过 startIndex、endIndex 两个指针进行两两比较，再通过 key 比对子节点。如果没设置 key，则会通过遍历的方式匹配节点，增加性能消耗。
所以不绑定 key 并不会有问题，绑定 key 之后在性能上有一定的提升。
综上，key 主要是应用在 Diff 算法中，作用是为了更快速定位出相同的新旧节点，尽量减少 DOM 的创建和销毁的操作。
希望以上内容能够对各位小伙伴有所帮助，祝大家面试顺利。
Vue 的文档中对 key 的说明如下：
关于就地修改，关键在于 sameVnode 的实现，源码如下：
可以看出，当 key 未绑定时，主要通过元素的标签等进行判断，在 updateChildren 内会将 oldStartVnode 与 newStartVnode 判断为同一节点。
如果 VNode 中只包含了文本节点，在 patchVnode 中可以直接替换文本节点，而不需要移动节点的位置，确实在不绑定 key 的情况下效率要高一丢丢。
某些情况下不绑定 key 的效率更高，那为什么大部分Eslint的规则还是要求绑定 key 呢？
因为在实际项目中，大多数情况下 v-for 的节点内并不只有文本节点，那么 VNode 的字节点就要进行销毁和创建的操作。
相比替换文本带来的一丢丢提升，这部分会消耗更多的性能，得不偿失。
了解了就地修改，那么我们在一些简单节点上可以选择不绑定 key，从而提高性能。
如果你喜欢我的文章，希望可以关注一下我的公众号【前端develop】
E. 面试中的网红Vue源码解析之虚拟DOM，你知多少呢深入解读diff算法
众所周知，在前端的面试中，面试官非常爱考dom和diff算法。比如，可能会出现在以下场景
滴滴滴，面试官发来一个面试邀请。接受邀请📞
我们都知道， key 的作用在前端的面试是一道很普遍的题目，但是呢，很多时候我们都只浮于知识的表面，而没有去深挖其原理所在，这个时候我们的竞争力就在这被拉下了。所以呢，深入学习原理对于提升自身的核心竞争力是一个必不可少的过程。
在接下来的这篇文章中，我们将讲解面试中很爱考的虚拟DOM以及其背后的diff算法。 请认真阅读本文～文末有学习资源免费共享！！！
虚拟DOM是用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。本质上是JS 和 DOM 之间的一个映射缓存。
要点：虚拟 DOM 是 JS 对象；虚拟 DOM 是对真实 DOM 的描述。
diff发生在虚拟DOM上。diff算法是在新虚拟DOM和老虚拟DOM进行diff（精细化比对），实现最小量更新，最后反映到真正的DOM上。
我们前面知道diff算法发生在虚拟DOM上，而虚拟DOM是如何实现的呢？实际上虚拟DOM是有一个个虚拟节点组成。
h函数用来产生虚拟节点（vnode）。虚拟节点有如下的属性：
1）sel： 标签类型，例如 p、div；
2）data： 标签上的数据，例如 style、class、data-*；
3）children ：子节点；
4） text： 文本内容；
5）elm：虚拟节点绑定的真实 DOM 节点；
通过h函数的嵌套，从而得到虚拟DOM树。
我们编写了一个低配版的h函数，必须传入3个参数，重载较弱。
形态1：h('div', {}, '文字')
形态2：h('div', {}, [])
形态3：h('div', {}, h())
首先定义vnode节点，实际上就是把传入的参数合成对象返回。
[图片上传失败...(image-7a9966-1624019394657)]
然后编写h函数，根据第三个参数的不同进行不同的响应。
当我们进行比较的过程中，我们采用的4种命中查找策略：
1）新前与旧前：命中则指针同时往后移动。
2）新后与旧后：命中则指针同时往前移动。
3）新后与旧前：命中则涉及节点移动，那么新后指向的节点，移到 旧后之后 。
4）新前与旧后：命中则涉及节点移动，那么新前指向的节点，移到 旧前之前 。
命中上述4种一种就不在命中判断了，如果没有命中，就需要循环来寻找，移动到旧前之前。直到while(新前<=新后&&旧前<=就后)不成立则完成。
如果是新节点先循环完毕，如果老节点中还有剩余节点(旧前和旧后指针中间的节点)，说明他们是要被删除的节点。
如果是旧节点先循环完毕，说明新节点中有要插入的节点。
1.什么是Virtual DOM 和Snabbdom
2.手写底层源码h函数
3.感受Vue核心算法之diff算法
4.snabbdom之核心h函数的工作原理
1、零基础入门或者有一定基础的同学、大中院校学生
2、在职从事相关工作1-2年以及打算转行前端的朋友
3、对前端开发有兴趣人群
F. vue3源码分析-实现props,emit，事件处理等
>
本期来实现， setup里面使用props,父子组件通信props和emit等 ，所有的源码请查看
在render函数中， 可以通过this,来访问setup返回的内容，还可以访问this.$el等
由于是测试dom,jest需要提前注入下面的内容，让document里面有app节点，下面测试用例类似在html中定义一个app节点哦
本功能的测试用例正式开始
上面的测试用例
解决这两个需求:
针对上面的分析，需要在setupStatefulComponent中来创建proxy并且绑定到instance当中,并且setup的执行结果如果是对象，也已经存在instance中了，可以通过instance.setupState来进行获取
通过上面的操作，从render中this.xxx获取setup返回对象的内容就ok了，接下来处理el
需要在mountElement中，创建节点的时候，在vnode中绑定下，el，并且在setupStatefulComponent 中的代理对象中判断当前的key
看似没有问题吧，但是实际上是有问题的，请仔细思考一下， mountElement是不是比setupStatefulComponent 后执行，setupStatefulComponent执行的时候，vnode.el不存在，后续mountelement的时候，vnode就会有值，那么上面的测试用例肯定是报错的，$el为null
解决这个问题的关键，mountElement的加载顺序是 render -> patch -> mountElement，并且render函数返回的subtree是一个vnode,改vnode中上面是mount的时候，已经赋值好了el,所以在patch后执行下操作
在vue中，可以使用onEvent来写事件，那么这个功能是怎么实现的呢，咋们一起来看看
在本功能的测试用例中，可以分析以下内容：
解决问题:
这个功能比较简单，在处理prop中做个判断， 属性是否满足 /^on[A-Z]/i这个格式，如果是这个格式，则进行事件注册，但是vue3会做事件缓存，这个是怎么做到？
缓存也好实现，在传入当前的el中增加一个属性 el._vei || (el._vei = {}) 存在这里，则直接使用，不能存在则创建并且存入缓存
事件处理就ok啦
父子组件通信，在vue中是非常常见的，这里主要实现props与emit
根据上面的测试用例，分析props的以下内容：
解决问题：
问题1： 想要在子组件的setup函数中第一个参数， 使用props,那么在setup函数调用的时候，把当前组件的props传入到setup函数中即可 问题2： render中this想要问题，则在上面的那个代理中，在 加入一个判断，key是否在当前instance的props中 问题3： 修改报错，那就是只能读，可以使用以前实现的 api shallowReadonly来包裹一下 既可
做完之后，可以发现咋们的测试用例是运行没有毛病的
上面实现了props,那么emit也是少不了的，那么接下来就来实现下emit
根据上面的测试用例，可以分析出：
解决办法： 问题1： emit 是setup的第二个参数， 那么可以在setup函数调用的时候，传入第二个参数 问题2： 关于emit的第一个参数， 可以做条件判断，把xxx-xxx的形式转成xxxXxx的形式，然后加入on，最后在props中取找，存在则调用，不存在则不调用 问题3：emit的第二个参数， 则使用剩余参数即可
到此就圆满成功啦！