

首页  思维导图  详情



前端vue知识复习

2021-07-14 10:08:45   0  举报





AI智能生成

用于前端vue的知识体系，还有一些知识点还没加入，后续会慢慢完善

前端知识体系

前端流程图

模版推荐

作者其他创作

大纲/内容

webpack

前端资源构建工具，一个静态资源打包器

五个核心概念

Entry

入口，指示webpack以哪个文件为入口起点进行打包，分析构建内部依赖图

Output

Loader

plugins

Mode

小程序

asiox

异步

宏任务和微任务

哪些是宏任务哪些是微任务

微任务是es6规定，宏任务是浏览器规定

宏任务是在dom渲染之后触发，微任务是在dom渲染之前触发

async和await

事件轮询 event loop

执行顺序

1：call Stack清空之后（同步代码执行完成之后）2：执行当前的微任务 3：尝试Dom渲染 4：触发event loop 执行宏任务

同步

上面的代码块执行完，再执行下面的代码块

es6

vue

vue源码

MVVM

源码分析

解释干嘛用的

M是数据模型，V是视图 VM是视图模型，同步视图和数据的对象，负责监听model的数据改变和通知视图的更新

vuex

作用、使用以及了解原理，记住那张官方图

什么是vuex

vuex原理和介绍相关

源码流程

调用Vue.use(Vuex) 会调用install方法，这个方法主要是在每个组件上的beforeCreate声明周期中混入$store，所以在每个组件上都可以使用$store来获取到Store，然后是Vue.Store构造函数，在Store的构造函数中定义空的对象来设置复制state，mutation，action，getter和moudle，首先是递归遍历modules，调用modulesCollection函数返回根的modules以及_children对象存储对应的子模块。然后根据这个rootModules进行一些action，mutation，getter的遍历操作。这中间会先去寻找local对象，根据是否存在命名空间来判断当前的module是根还是子的module，然后去遍历操作，module遍历mutation，action，getter，然后再去遍历是否有_children,有的话就继续遍历子模块，子模块再重复上面流程完成内置变量的赋值，如果是根的话local对应的就是store的方法，local有两个重写的方法dispatch和commit，如果是子module的话就会重置这两个方法，会添加上命名空间。

题目

为什么mutation中不能进行异步操作

父子组件传递方式

eventBus

原理

需要一个空的公共实例来触发，可以使用空的vue实例作为中央数据总线

如何使用

vue3和vue2区别

生命周期

有什么生命周期以及对应生命周期做什么事情

计算属性和监听器

作用和区别以及实现原理

封装组件

指令

自定义指令 

官方提供的指令

插槽slot

混入mixin

路由

hash和history两种方式区别和实现

动态路由

keep-alive

nextTick

需要结合event loop ，在下一次Dom更新的时候进行的回调函数，以及在数据修改时可以通过这个函数获取到最新的dom数据。

原理

在同一事件轮询中，执行完同步函数之后就会去执行异步队列中的异步任务，然后再微任务执行完之后就会去执行Dom的操作，当Dom更新完成时再调用nextTick函数获取到最新的Dom节点

虚拟dom

diff算法

心得

1：key是唯一标识，告诉diff算法前后是否是同一个DOM节点

2：只有是同一个DOM节点才能进行精细化比较，否则就暴力删除旧的，插入新的节点

3：只进行同层比较，不会跨层比较

真实dom的缺点

真实的dom操作会大量消耗性能，界面假如接受到10次更新dom的操作的话，在进行第一次更新时候是不知道后面9次的操作，所以会马上执行流程，执行10次，第一次计算完紧接着第二次计算，然后这个节点坐标发生变化，导致前面的计算都是无用的。所以比较消耗性能

为什么需要使用虚拟dom

虚拟DOM是为了解决浏览器性能问题而设计出来的，在更新10次DOM操作的时候，虚拟dom不会立即操作DOM，而是将10次更新的diff内容一次性attach到DOM树上，再进行后续的操作，减少了大量的无效计算。用JS对象模拟DOM节点的好处是，页面的更新可以先全部用JS对象模拟(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

流程

vNode是一个包含dom属性的对象，每一个dom对象都可以用vNode来描述

调用patch函数打补丁，通过传入新旧节点来判断是否是同一节点，是同一节点的话就调用patchVnode来处理，不是同一节点的话就直接移除旧节点，更新新的节点

当我们确定两个节点值得比较之后我们会对两个节点指定 patchVnode 方法，patchVnode函数也是传入新旧节点，判断几种情况，1：新旧节点都是文本节点，但是文本不同，更换新节点的文本，2：新节点有子节点，旧节点没有子节点，直接替换为新节点 3：旧节点有子节点，新节点没有，把旧节点更新到新节点上 4：新旧节点都有子节点调用updateChildren方法

UpdateChuldren方法，将 Vnode 的子节点 Vch 和 oldVnode 的子节点 oldCh 提取出来 oldCh 和 vCh 各有两个头尾的变量 StartIdx 和 EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh 和 vCh 至少有一个已经遍历完了，就会结束比较。

css预编译器

promise源码

基本知识点

promise是异步解决方案，可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果，可以在对象之间传递和操作promise，帮助我们处理队列解决回调地狱问题。promise是构造函数，函数里面有一些函数和方法，使用通过new。

需要掌握的细节

源码分析