【前端】那些容易忘掉的前端知识 Vue梳理篇
Vue
v-show和v-if有什么区别
v-show 通过 CSS display 控制显示和隐藏
v-if 组件真正的渲染和销毁，而不是显示和隐藏
为何在v-for使用key
必须用 key ， 且不能是 index 和 random
diff 算法中通过 tag 和 key 来判断，是否是 sameNode
减少渲染次数，提升渲染性能
Vue 组件生命周期（包括父子组件）
Vue 组件如何通信（常见）
父子组件 props 和 this.$emit
自定义事件 event.$no event.$off event.$emit
vuex
描述组件渲染和更新的过程
如上图所示，vue原理三大模块：响应式、模板渲染、vdom
初次渲染过程
解析模板为 render 函数 （或在开发环境已完成，vue-loader）
触发响应式，监听 data 属性 getter、 setter
执行 render 函数，生成 vnode ，patch(elem,vnode)
更新过程
修改 data，触发 setter（此前在 getter 中已被监听）
重新执行 render 函数，生成 newVnode
patch(vnode,newVnode)
with 语法
改变 { } 内*变量的查找规则，当做 obj 属性来查找
如果找不到匹配的 obj 属性，就会报错
with 要慎用，它打破了作用域规则，易读性变差
vue为何是异步渲染
减少 DOM 操作次数，提高性能
$nextTick 待 DOM 渲染完后再回调，页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次。
双向数据绑定 v-model 的实现原理
input 元素的 value = this.name
绑定 input 事件 this.name = $event.target.value
data 更新触发 re-render
对 MVVM 的理解
computed 有何特点
缓存，data 不变不会重新计算
提高性能
为何组件 data 必须是一个函数
如上图所示，这个不是 vue 相关问题，而是关于 js 方面问题。vue 文件编译之后实际上是 class ，是一个类。而对组件使用的时候，相当于对组件进行了实例化。如果 data 不是一个函数的话，那每一个组件实例就共享了，就会造成数据污染问题。而函数的话，就会形成闭包，保护变量，不会造成影响。
ajax 请求应该放在哪个生命周期
mounted
JS 是单线程的，ajax 异步获取数据
放在 mounted 之前没有用，只会让逻辑更加混乱
如何将组件所有 props 传递给子组件
$pros
用法：
<User v-bind="$props"/>
如何自己实现 v-model
多个组件有相同的逻辑，如何抽离
mixin
何时要使用异步组件
加载大文件
路由异步加载
优化性能
何时使用 keep-alive
缓存组件，不需要重复渲染
如多个静态 tab 页的切换
优化性能
何时需要使用 beforeDestory
解绑自定义事件 event.$off
清除定时器
解绑自定义的 DOM 事件，如window scroll 等
什么是作用域插槽
Vuex 中 action 和 mutation 有何区别
action 中处理异步，mutation 不可以
mutation 做原子操作（每次就做一个操作）
action 可以整个多个 mutation
Vue-router 常用的路由模式
hash 默认
H5 history（需要服务端支持）
如何配置 Vue-router 异步加载
请用 vnode 描述一个 DOM 结构
场景：
vnode:
diff 算法的时间复杂度
O(n)
在O(n^3)上做了优化
简述 diff 算法过程
patch ( elem , vnode ) 和 patch ( vnode , newVnode )
patchVnode 和 addVnodes 和 removeVnodes
updateChildren （key的重要性）
vue 常见性能优化方式
合理使用 v-show 和 v-if
合理使用 computed
v-for 时加 key，以及避免和 v-if 同时使用
自定义事件、DOM事件及时销毁
合理使用异步组件
合理使用 keep-alive
data 层级不要太深
使用 vue-loader 在开发环境做模板编译（预编译）
webpack层面的优化（传送门）
使用SSR
彩蛋
之前一直折腾美团那个项目，在视频介绍有说过，做完项目就继续整理我的笔记仓库。如下图所示，自己还是觉得有不错的回应吧，建立仓库之初还没有想过会有人给我 star，更别说 fork 之后 pull request 了。诶，没想到还真有，✿✿ヽ(°▽°)ノ✿
如果您觉得不错，那么请毫不留情地给个 star 吧，您的支持是我继续创作的动力！star 数越多，就会有更多的小伙伴能够看到，或许更多的人在前端有了方向不是。
目前，可以说前端知识梳理篇正式出炉啦，请读者跟上俺的步伐，一起学习前端知识吧，不妨关注一波不迷路~
此外，我的微信公众号：小狮子前端Vue 也运作啦，目前已经开设前端每日一题专栏，每天会发布一篇文章，具体如下图所示，仅需几分钟，就能获得知识，岂不是白嫖的感觉~
此次灵感也是来自于在微信 看一看 ，我看到了考研大军的激情，有着每日一句的专栏，每天可能就只需要那么几分钟的时间，就能学习英语。我觉得是挺不错的，那我也想尝试这样做，一方面，我能每天整理一点学习笔记来，另一方面，也算是自己每天学习打卡。一小步或许就是未来一大步，要来一起打卡吗✿✿ヽ(°▽°)ノ✿
最后，没啥要总结的了，小狮子笔记仓库会一直更新下去，每日一题专栏我也会坚持记录。我想，能影响一些人就已经不错啦，曾经也是受过很多dalao影响，目前也是在回馈开源。好啦，下期再见，一个不是只会写业务代码的前端攻城狮在下一期又会写什么呢？
点赞收藏评论，三连支持，下期早点见哈哈哈哈哈~
————————————————
版权声明：本文为CSDN博主「一百个Chocolate」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42429718/article/details/105927623