「2022」打算跳槽涨薪，必问面试题及答案——VUE篇

1、为什么选择VUE，解决了什么问题？

vue.js 正如官网所说的，是一套构建用户界面的渐进式框架。与其它重量级框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动。

vue.js 有声明式，响应式的数据绑定，组件化开发，并且还使用虚拟 DOM 等技术，统一编程规范和模块等，将项目功能模块化更方便组织和构建复杂应用，便于项目的扩展和维护。 vue 框架维护及时，且 Vue 3 将在 **2022 年 2 月 7 日 **成为新的默认版本。

2、如果加入 keep-alive，第一次进入组件会执行哪些生命周期函数？

会执行的钩子函数以及它们的顺序分别为：

beforeCreat、created、beforeMount、mounted、activated

3、key 的作用和工作原理。

key 的作用主要是为了高效地更新虚拟 DOM，其原理是 vue 中在 patch 过程中，通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能。

另外，若不设置 key 还可能在列表更新时，引发一些隐蔽的 bug 。vue 在使用相同标签名元素的过滤或切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过滤效果。

4、v-if 和 v-for 的优先级哪个高？

v-for 的优先级更高。

如果 v-if 和 v-for 同时出现，每次渲染都会先执行循环，再判断条件，无论如何循环都不可避免，浪费了性能。

情景一：每次遍历时，都需要执行 v-if 解析一次，浪费性能。

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

要避免出现这种情况，则在外层嵌套 template ，在这一层进行 v-if 判断，然后再内部进行 v-for 循环。可以改为：

<ul>
  <template v-if="shouldShowUsers">
   <li
     v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
 </template>
</ul>

情景二：v-if 和 v-for 同时出现在一个标签，过滤一个列表中的项目，比如：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

在这种情况下，请将 users 替换为一个计算属性，让其返回过滤后的列表。

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

5、谈谈对 vue 组件化的理解。

5.1、组件化的定义

组件是独立和可复用的代码组织单元，组价系统是 vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用。

也可以通俗介绍，把一些用户在程序中一些独立的功能和模块单独提取出来，然后切分为更小的块，这些块有独立的逻辑，有更好的复用性。

组件按照分类有：页面组件(导航)、业务组件(登录)、通用组件(输入框)。

5.2、组件化特点

vue 的组件是基于配置的，通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于 VueComponent 这个类扩展于 vue 。

常见的组件化技术有：prop 属性、自定义事件、插槽等，这些主要用于组件之间的通信等。

组件之间遵循单向数据流原则。

5.3、组件化的优点

组件化的开发能大幅提高开发效率、测试性和复用性等。

合理的划分组件能够大幅提升应用性能，组件应该是高内聚，低耦合的。

6、为什么 data 在组件内必须是函数，而 vue 的根实例则没有此限制？

vue 组件可能存在多个实例，如果使用对象形式定义 data ，则会导致它们公用一个 data 对象，那么状态变更将会影响所有组件实例，这是不合理的。

如果采用函数的形式，在实例化组件时，data 会被当做工厂函数返回一个全新的 data 对象，有效规避多实例之间状态污染问题。

所以在组件中的 data 必须是函数，不能使用对象形式。那为什么 vue 根实例没有限制呢？

在 vue 中根实例只能有一个，所以不需要担心多实例的问题，所以根实例中的 data 可以是函数也可以是对象。

7、你了解哪些 vue 性能优化的方法？

我所了解的 vue 性能优化方法分别有：

1>、路由懒加载

Vue.use(VueRouter)
// 传统写法
import Home from '@/views/login/index.vue'

//路由懒加载
const  Login = ()=> import('@/views/login/index.vue') 

const router = new VueRouter({
 routes: [
  { path: '/login', component: Login },
  { path: '/home', component: Home },
  ]
export default router

使用路由懒加载，项目打包的时候体积会大幅减小，访问项目时，这些组件也会按需进行加载，大大提升了项目性能。

2>、keep-alive 缓存页面

<template>
 <keep-alive>
  <router-view /> 
 </keep-alive>  
</template>

使用 keep-alive 之后会缓存页面，第一次加载之后，关闭再次打开，页面不会重新渲染。keep-alive 的属性：

• include：字符串或正则表达式。如果只缓存个别页面，可以使用 include 属性，只缓存匹配组件。
• exclude：字符串或正则表达式。如果个别页面不需要缓存时，可以使用 exclude 属性，任何匹配的组件都不会缓存。

3>、v-for遍历避免同时使用 v-if

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

4>、长列表性能优化

如果列表是纯粹的数据展示，不会有任何的改变，就不需要做响应式。

export default{
 data(){
  return {
   users:[]
  }
 },
 created(){
  const user = await axios("/api/user")
  this.users = Object.freeze(user)
 }
}

Object.freeze() 方法可以冻结一个对象，对象被冻结之后不能被修改，可以让性能大幅度提升。

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容。可采用三方 vue-virtual-scroll。

5>、事件的销毁

vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

created(){
 this.timer = setInterval( this.refresh, 2000 )
},
beforeDestory(){
 clearInterval( this.timer )
}

6>、图片懒加载

对于图片过多的页面，为了加快页面的加载速度，所以很多时候，需要把未出现在可视区域的图片暂不进行加载，滚动到可视区域之后再开始加载。

可以使用三方的 vue-lazyload 库。

<img v-lazy="/src/img/01.jpg" />

7>、第三方插件按需引用

使用三方库时，可以按需引入避免体积太大。比如 element-ui ：

import { Button  } from "element-ui"

8>、无状态的组件标记为函数式组件

<template functional>
 <div>组件内容</div>  
</template>

通过 functional 将组件标记为函数式组件，因为函数式组件没有实例，所以运行时耗费资源较少。

另外还有 v-show 复用 DOM、子组件分割、SSR 等。

8、computed 与 methods 、watch 的区别？

computed VS methods

computed:{
 yyds(){
  log("computed show")
  return "计算属性"
 }
},
methods:{
 show(){
  log("method show")
  return "计算属性"
 }
}

computed 是计算属性，methods 内都是方法，所以调用不同分别为：

<div>yyds</div>
<div>show()</div>

computed 是有缓存的，而 methods 没有缓存，所以 computed 性能比 methods 的好。

computed VS watch

computed 是计算某一个属性的改变，如果某一个值改变了，计算属性会监测到，然后进行返回值。

watch 是监听某一个数据或路由，改变了才会响应，只有改变了才会执行操作。

9、你怎么理解 vue 中的 diff 算法？

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；

另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。(what)

2.vue2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。(why)

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch。(where)

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；(How)

比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；

借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

10、props 和 data 的优先级谁高？

vue组件内数据相关的属性它们的样式优先级从高到底分别为：

props > methods > data > computed > watch

11、vue 组件之间的通信

vue 组件之间的关系有：父子关系、兄弟关系、隔代关系。

所以 vue 组件之间的通信可分为：父子组件之间通信，兄弟组件之间通信和跨层组件之间通信。

1>、父传子

可使用的方法有：

• 通过 props 传值
• 通过 refs 传值
• 通过 children 传值

2>、子传父

可使用的方法：

• $emit 自定义事件
• provide 和 inject

3>、兄弟组件之间

• 利用中央事件总线 bus 的 $emit 和 $on 。
• 笨办法，通过父组件共同传值

4>、跨层组件

• provide 和 inject

5>、没有关系的组件之间通信

• 可以使用 vuex 进行数据管理