前端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原理和介绍相关
源码流程
调用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 至少有一个已经遍历完了,就会结束比较。
oldCh 和 vCh 各有两个头尾的变量 StartIdx 和 EndIdx ,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了 key ,就会用 key 进行比较,在比较的过程中,变量会往中间靠,一旦 StartIdx>EndIdx 表明 oldCh 和 vCh 至少有一个已经遍历完了,就会结束比较。
css预编译器
promise源码
基本知识点
promise是异步解决方案,可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,可以在对象之间传递和操作promise,帮助我们处理队列 解决回调地狱问题。promise是构造函数,函数里面有一些函数和方法,使用通过new。
需要掌握的细节
源码分析
收藏
0 条评论
下一页