Vue

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

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

为何在v-for使用key

  • 必须用 key , 且不能是 indexrandom
  • diff 算法中通过 tagkey 来判断,是否是 sameNode
  • 减少渲染次数,提升渲染性能

Vue 组件生命周期(包括父子组件)

参考:Vue生命周期

Vue 组件如何通信(常见)

  • 父子组件 propsthis.$emit
  • 自定义事件 event.$no event.$off event.$emit
  • vuex

描述组件渲染和更新的过程


如上图所示,vue原理三大模块:响应式、模板渲染、vdom

初次渲染过程

  • 解析模板为 render 函数 (或在开发环境已完成,vue-loader
  • 触发响应式,监听 data 属性 gettersetter
  • 执行 render 函数,生成 vnodepatch(elem,vnode)

更新过程

  • 修改 data,触发 setter(此前在 getter 中已被监听)
  • 重新执行 render 函数,生成 newVnode
  • patch(vnode,newVnode)

with 语法

  • 改变 { } 内自由变量的查找规则,当做 obj 属性来查找
  • 如果找不到匹配的 obj 属性,就会报错
  • with 要慎用,它打破了作用域规则,易读性变差

vue为何是异步渲染

  • 减少 DOM 操作次数,提高性能

$nextTickDOM 渲染完后再回调,页面渲染时会将 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-showv-if
  • 合理使用 computed
  • v-for 时加 key,以及避免和 v-if 同时使用
  • 自定义事件、DOM事件及时销毁
  • 合理使用异步组件
  • 合理使用 keep-alive
  • data 层级不要太深
  • 使用 vue-loader 在开发环境做模板编译(预编译)
  • webpack层面的优化(传送门
  • 使用SSR

彩蛋

之前一直折腾美团那个项目,在视频介绍有说过,做完项目就继续整理我的笔记仓库。如下图所示,自己还是觉得有不错的回应吧,建立仓库之初还没有想过会有人给我 star,更别说 fork 之后 pull request 了。诶,没想到还真有,✿✿ヽ(°▽°)ノ✿


:sunny:小狮子前端の学习:cloud:整理笔记:heart:(传送门)

Vue全家桶+SSR+Koa2全栈开发:cloud:(传送门)

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

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

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

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

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

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

学如逆水行舟,不进则退