【前端】那些容易忘掉的前端知识 Vue梳理篇

Vue

v-show和v-if有什么区别

• v-show 通过 CSS display 控制显示和隐藏
• v-if 组件真正的渲染和销毁，而不是显示和隐藏

为何在v-for使用key

• 必须用 key ， 且不能是 index 和 random
• diff 算法中通过 tag 和 key 来判断，是否是 sameNode
• 减少渲染次数，提升渲染性能

Vue 组件生命周期（包括父子组件）

参考：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 了。诶，没想到还真有，✿✿ヽ(°▽°)ノ✿

☀️小狮子前端の学习☁️整理笔记❤️（传送门）

Vue全家桶+SSR+Koa2全栈开发☁️（传送门）

如果您觉得不错，那么请毫不留情地给个 star 吧，您的支持是我继续创作的动力！star 数越多，就会有更多的小伙伴能够看到，或许更多的人在前端有了方向不是。

目前，可以说前端知识梳理篇正式出炉啦，请读者跟上俺的步伐，一起学习前端知识吧，不妨关注一波不迷路~

此外，我的微信公众号：小狮子前端Vue 也运作啦，目前已经开设前端每日一题专栏，每天会发布一篇文章，具体如下图所示，仅需几分钟，就能获得知识，岂不是白嫖的感觉~

此次灵感也是来自于在微信 看一看 ，我看到了考研大军的激情，有着每日一句的专栏，每天可能就只需要那么几分钟的时间，就能学习英语。我觉得是挺不错的，那我也想尝试这样做，一方面，我能每天整理一点学习笔记来，另一方面，也算是自己每天学习打卡。一小步或许就是未来一大步，要来一起打卡吗✿✿ヽ(°▽°)ノ✿

最后，没啥要总结的了，小狮子笔记仓库会一直更新下去，每日一题专栏我也会坚持记录。我想，能影响一些人就已经不错啦，曾经也是受过很多dalao影响，目前也是在回馈开源。好啦，下期再见，一个不是只会写业务代码的前端攻城狮在下一期又会写什么呢？

点赞收藏评论，三连支持，下期早点见哈哈哈哈哈~

学如逆水行舟，不进则退