前端vue知识复习
2021-07-14 10:08:45 0 举报
AI智能生成
用于前端vue的知识体系,还有一些知识点还没加入,后续会慢慢完善
作者其他创作
大纲/内容
前端知识复习
webpack
前端资源构建工具,一个静态资源打包器
五个核心概念
Entry
入口,指示webpack以哪个文件为入口起点进行打包,分析构建内部依赖图
Output
Loader
plugins
Mode
小程序
asiox
JS
异步
宏任务和微任务
哪些是宏任务哪些是微任务
微任务是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原理和介绍相关
源码流程
题目
为什么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。
需要掌握的细节
收藏
0 条评论
回复 删除
下一页