FEIQs

Appearance

【vue3js.cn】Vue2 系列 ​

原文：https://vue3js.cn/interview/vue/vue.html

1. 有使用过vue吗？说说你对vue的理解？ ​

Vue核心特性

  • 数据驱动（MVVM)
    • MVVM表示的是 Model-View-ViewModel
      • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
      • View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
      • ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
    • 组件化
      • 什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件2.组件化的优势
        • 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
        • 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
        • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
    • 指令系统
      • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
        • 常用的指令
          • 条件渲染指令 v-if
          • 列表渲染指令v-for
          • 属性绑定指令v-bind
          • 事件绑定指令v-on
          • 双向数据绑定指令v-model
    • Vue和React对比
      • 这里就做几个简单的类比吧，当然没有好坏之分，只是使用场景不同
      • 相同点
        • 都有组件化思想
        • 都支持服务器端渲染
        • 都有Virtual DOM（虚拟dom）
        • 数据驱动视图
        • 都有支持native的方案：Vue的weex、React的React native
        • 都有自己的构建工具：Vue的vue-cli、React的Create React Apps
      • 不同点
        • 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
        • 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
        • 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
        • diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

2. 你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢 ​

什么是SPA SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面 SPA和MPA的区别

单页面应用（SPA）多页面应用（MPA）
组成一个主页面和多个页面片段多个主页面
刷新方式局部刷新整页刷新
url模式哈希模式历史模式
SEO搜索引擎优化难实现，可使用SSR方式改善容易实现
数据传递容易通过url、cookie、localStorage等传递
页面切换速度快，用户体验良好切换加载资源，速度慢，用户体验差
维护成本相对容易相对复杂

单页应用优缺点

优点：

  • 具有桌面应用的即时性、网站的可移植性和可访问性
  • 用户体验好、快，内容的改变不需要重新加载整个页面
  • 良好的前后端分离，分工更明确

缺点：

  • 不利于搜索引擎的抓取
  • 首次渲染速度相对较慢

如何给SPA做SEO

  • SSR服务端渲染
    • 将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js
  • 静态化
    • 目前主流的静态化主要有两种：
      • 一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中
      • 另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
  • 使用Phantomjs针对爬虫处理
    • 原理是通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫

3. v-show和v-if有什么区别？使用场景分别是什么？ ​

v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示

在用法上也是相同的

vue
<Model v-show="isShow" />
<Model v-if="isShow" />
  • 当表达式为true的时候，都会占据页面的位置
  • 当表达式都为false时，都不会占据页面位置

v-show与v-if的区别

  • 控制手段不同
  • 编译过程不同
  • 编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

  • v-show 由false变为true的时候不会触发组件的生命周期
  • v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

v-show与v-if原理分析 具体解析流程这里不展开讲，大致流程如下

  • 将模板template转为ast结构的JS对象
  • 用ast得到的JS对象拼装render和staticRenderFns函数
  • render和staticRenderFns函数被调用后生成虚拟VNODE节点，该节点包含创建DOM节点所需信息
  • vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点

v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

4. Vue实例挂载的过程中发生了什么？ ​

  • new Vue的时候调用会调用_init方法
    • 定义 $set、$get 、$delete、$watch 等方法
    • 定义 $on、$off、$emit、$off等事件
    • 定义 _update、$forceUpdate、$destroy生命周期
  • 调用$mount进行页面的挂载
  • 挂载的时候主要是通过mountComponent方法
  • 定义updateComponent更新函数
  • 执行render生成虚拟DOM
  • _update将虚拟DOM生成真实DOM结构，并且渲染到页面中

5. 请描述下你对vue生命周期的理解？ ​

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

生命周期描述
beforeCreate组件实例被创建之初
created组件实例已经完全创建
beforeMount组件挂载之前
mounted组件挂载到实例上去之后
beforeUpdate组件数据发生变化，更新之前
updated组件数据更新之后
beforeDestroy组件实例销毁之前
destroyed组件实例销毁之后
activatedkeep-alive 缓存的组件激活时
deactivatedkeep-alive 缓存的组件停用时调用
errorCaptured捕获一个来自子孙组件的错误时被调用

6. v-if和v-for的优先级是什么？ ​

  • 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
  • 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
  • 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

//: # (如果为对象添加少量的新属性，可以直接采用Vue.set())

//: # (- 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象)

//: # (- 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议))

//: # (- 组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue)

//: # (- 插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身)

11. 双向数据绑定是什么 ​

我们还是以Vue为例，先来看看Vue中的双向绑定流程是什么的

  • new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中
  • 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
  • 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
  • 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
  • 将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

12. Vue中的$nextTick有什么作用？ ​

我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

  • 第一个参数为：回调函数（可以获取最近的DOM结构）
  • 第二个参数为：执行函数上下文

13. 说说你对vue的mixin的理解，有什么应用场景？ ​

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

  • 替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
  • 合并型策略是data, 通过set方法进行合并和重新赋值
  • 队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
  • 叠加型有component、directives、filters，通过原型链进行层层的叠加

14. 说说你对slot的理解？slot使用场景有哪些？ ​

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

分类 slot可以分来以下三种：

  • 默认插槽
  • 具名插槽
  • 作用域插槽 特点
  • v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
  • 默认插槽名为default，可以省略default直接写v-slot
  • 缩写为#时不能不写参数，写成#default
  • 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

15. Vue.observable你有了解过吗？说说看 ​

使用场景

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择

16. 你知道vue中key的原理吗？说说你对它的理解 ​

当我们在使用v-for时，需要给单元加上key

  • 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

  • 当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

17. 说说你对keep-alive的理解是什么 ​

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive可以设置以下props属性：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
  • max - 数字。最多可以缓存多少组件实例

使用场景 从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

18. Vue常用的修饰符有哪些有什么应用场景 ​

vue中修饰符分为以下五种：

  • 表单修饰符
  • 事件修饰符
  • 鼠标按键修饰符
  • 键值修饰符
  • v-bind修饰符

根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

  • .stop：阻止事件冒泡
  • .native：绑定原生事件
  • .once：事件只执行一次
  • .self ：将事件绑定在自身身上，相当于阻止事件冒泡
  • .prevent：阻止默认事件
  • .caption：用于事件捕获
  • .once：只触发一次
  • .keyCode：监听特定键盘按下
  • .right：右键

19. 你有写过自定义指令吗？自定义指令的应用场景有哪些？ ​

注册一个自定义指令有全局注册与局部注册

全局注册主要是通过Vue.directive方法进行注册

Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

自定义指令也像组件那样存在钩子函数：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  • unbind：只调用一次，指令与元素解绑时调用

所有的钩子函数的参数都有以下：

  • el：指令所绑定的元素，可以用来直接操作 DOM
  • binding：一个对象，包含以下 property：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
  • vnode：Vue 编译生成的虚拟节点
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

20. 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路 ​

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

21. 你了解vue的diff算法吗？说说看 ​

  • 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
  • 通过isSameVnode进行判断，相同则调用patchVnode方法
  • patchVnode做了以下操作：
    • 找到对应的真实dom，称为el
    • 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
    • 如果oldVnode有子节点而VNode没有，则删除el子节点
    • 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
    • 如果两者都有子节点，则执行updateChildren函数比较子节点
  • updateChildren主要做了以下操作：
    • 设置新旧VNode的头尾指针
    • 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

22. SSR解决了什么问题？有做过SSR吗？你是怎么做的？ ​

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

我们从上门解释得到以下结论：

  • Vue SSR是一个在SPA上进行改良的服务端渲染
  • 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
  • Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA
  • 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例
  • 实现ssr需要实现服务端首屏渲染和客户端激活
  • 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
  • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
  • 切换组件通过mixin混入，在beforeMount钩子完成数据获取

23. Vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？ ​

前端权限控制可以分为四个方面：

  • 接口权限
  • 按钮权限
  • 菜单权限
  • 路由权限

关于权限如何选择哪种合适的方案，可以根据自己项目的方案项目，如考虑路由与菜单是否分离

权限需要前后端结合，前端尽可能的去控制，更多的需要后台判断

24. Vue项目中你是如何解决跨域的呢？ ​

所谓同源（即指在同一个域）具有以下三个相同点

  • 协议相同（protocol）
  • 主机相同（host）
  • 端口相同（port）

解决跨域的方法有很多，下面列举了三种：

  • JSONP
  • CORS
  • Proxy

而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开

25. 你是怎么处理vue项目中的错误的？ ​

主要的错误来源包括：

  • 后端接口错误
  • 代码中本身逻辑错误

后端接口错误 通过axios的interceptor实现网络请求的response先进行一层拦截

ts
apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: "Login" });
    } else {
      message.error("出错了");
      return Promise.reject(error);
    }
  }
);

代码逻辑问题 设置全局错误处理函数

ts
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

Released under the MIT License.

Copyright © 2023-present Qingyun119