前端面试 -- vue系列

Vue系列

- - [1. vue理解：](#1. vue理解：)
  - [2. SPA（单页面应用理解）](#2. SPA（单页面应用理解）)
  - [3. vue实例挂载的过程](#3. vue实例挂载的过程)
  - [4. v-for和v-if优先级](#4. v-for和v-if优先级)
  - [5. SPA首屏加载速度慢的原因和解决办法](#5. SPA首屏加载速度慢的原因和解决办法)
  - [6. Vue中给对象添加新属性界面不刷新（直接给对象添加属性）](#6. Vue中给对象添加新属性界面不刷新（直接给对象添加属性）)
  - [7. vue组件之间的通信方式有哪些](#7. vue组件之间的通信方式有哪些)
  - [8. 对nextTick理解](#8. 对nextTick理解)
  - [9. slot（插槽）理解](#9. slot（插槽）理解)
  - [10. 对keep-alive理解](#10. 对keep-alive理解)
  - [11. vue常用的修饰符](#11. vue常用的修饰符)
  - [12. 自定义指令以及使用场景](#12. 自定义指令以及使用场景)
  - [13. SPA和SSR有何异同](#13. SPA和SSR有何异同)
  - [14. vue项目中如何解决跨域问题](#14. vue项目中如何解决跨域问题)
  - [15. vue3新特性相比于vue2](#15. vue3新特性相比于vue2)

1. vue理解：

核心特性:

1. 数据驱动（MVVM）
  Model：模型层，负责处理业务逻辑以及和服务器端进行交互。
  View：视图层，负责将数据模型转化为UI展示出来，可以简单理解为HTML页面。
  ViewModel：视图模型层，用来连接Model和view，是Model和View之间的通信桥梁。
1. 组件化
  图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发模式，在vue中每一个.vue文件都可以视为一个组件。
  优点：高内聚，低耦合；更好的复用；可维护性；扩展性。
1. 指令系统
  指令是指带有v-前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。
  v-if：条件渲染指令。
  v-for：列表渲染。
  v-bind：属性绑定。
  v-on：事件绑定。
  v-model：双向数据绑定。

2. SPA（单页面应用理解）

动态重写当前页面与用户交互，避免了页面之前切换而影响用户体验。他将所有的活动局限在一个web页面中，仅在该web页面初始化时加载相应的HTML，JS，CSS资源。一旦页面加载完成，spa不会因为用户操作而进行页面的重新加载或跳转，而是利用JS动态变化HTML从而实现交互。

优点：
1. 用户体验好，内容的改变不需要重新加载整个页面。
2. 良好的前后端分离。
3. 减轻服务器压力，只提供数据，不用负责逻辑与页面的合成。
缺点：
1. 不利于搜索引擎的抓取，所有内容都在一个页面中动态替换显示。
2. 首次渲染速度相对较慢，为实现单页面web应用功能及显示，需要在加载页面的时候将JS、CSS同一加载，部分页面可在需要时加载，所以必须对JS及CSS代码进行合并压缩处理。
  
  | SPA | MPA
  组成 | 一个主页面和多个页面片段 | 多个主页面
  刷新方式 | 局部刷新 | 整页刷新
  url模式 | 哈希模式 | 历史模式
  SEO搜索引擎优化 | 难实现，可使用SSR方式改善 | 容易实现
  数据传递 | 容易 | 通过url,cookie,localStorage等传递
  页面切换 | 速度快、用户体验良好 | 切换加载资源、速度慢、用户体验不好
  维护成本 | 相对容易 | 相对复杂

3. vue实例挂载的过程

数据绑定 -》数据渲染 -》视图

1. 初始化 ：执行一系列初始化操作，包括实例化Vue、初始化生命周期、事件系统、响应式数据等。
1. 模板编译 ：vue对模板进行编译，将其转化为渲染函数，渲染函数接收数据并返回生成的虚拟DOM。
1. 挂载：当渲染函数生成虚拟DOM之后，vue会将渲染成真实DOM并将其挂载到指定目标元素上。
1. 更新：实例被成功挂载后，如果响应式数据发生变化，vue会自动进行重新渲染。

注意：当数据发生变化时，vue会通过依赖追踪机制自动识别出那些组件需要重新渲染，然后再执行渲染函数，生成新的虚拟DOM，并将与旧的虚拟DOM进行比较，找出需要更新的节点，最后将其更新后的节点渲染为真实的DOM。

4. v-for和v-if优先级

vue2中，v-for优先级高于v-if
vue3中，v-if优先级高于v-for

解决办法：外层嵌套template（页面渲染不生产dom节点），将优先级低的放入外层嵌套中。

5. SPA首屏加载速度慢的原因和解决办法

速度慢的原因：

网络延迟
资源文件体积过大
资源是否重复发送请求加载
加载脚本的时候，渲染内容堵塞

解决办法：

减小入口文件体积（路由懒加载）
静态资源本地缓存（采用HTTP缓存，设置Cache-Control,Last-Modified,Etag等响应头；合理使用localStorage；采用service Worker离线缓存）
UI框架按需加载（对使用的element-UI框架按需加载）
组件重复打包（在webpack的config文件中，修改CommonsChunkPlugin的配置）

minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

图片资源的压缩（将众多小图标合并到一张图上，减轻HTTP请求压力）
使用SSR
开启GZip压缩

6. Vue中给对象添加新属性界面不刷新（直接给对象添加属性）

vue2采用Object.defineProperty()设置响应式数据，对新添加的属性，没有通过Object.defineProperty()给属性添加getter和setter，所以新添加的属性并不是响应式数据。

解决办法：

采用**vue.set(target, propertyName/index, value)**添加少量属性值。
Object.assign()创建新对象，再将合并。

注意：vue3通过proxy实现数据响应式，直接动态添加新属性任然可以实现数据响应式。

7. vue组件之间的通信方式有哪些

1. 通过props传递：子组件设置props属性，定义接收父组件传递过来的参数。 --父给子传递
1. e m i t 触发自定义事件：通过 emit触发自定义事件：通过 emit触发自定义事件：通过emit触发自定义事件。 --子给父传递
1. ref：给子组件设置ref，父组件通过设置子组件ref获取数据。
1. EventBus：Vue.prototypr.$bus = new Vue() 。 --兄弟组件之间传递
1. a t t r s 和 attrs和 attrs和listeners：--祖先传递数据给子孙。
1. provide与inject：祖先组件定义provide属性，返回传递的值；在后代组件通过inject接收组件传递过来的值。 --祖先传递数据给子孙
1. vuex：存储共享变量的容器。 --复杂关系的组件数据传递。

8. 对nextTick理解

当数据改变的时候，vue并不会立即去更新DOM，而是将修改数据的操作放在一个异步操作的队列中，如果一直修改相同的数据，异步操作队列还会进行去重，所以等待同一事件中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新。

使用场景：

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

9. slot（插槽）理解

插槽就是子组件中提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等

默认插槽

js 复制代码

// 子组件
<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>
// 父组件
<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

js 复制代码

// 子组件
<template>
   <slot>插槽后备的内容</slot>
   <slot name="content">插槽后备的内容</slot>
</template>
// 父组件
<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接收的对象上。 v-slot:(简写为#)

js 复制代码

// 子组件
<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>
// 父组件
<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">来⾃⼦组件数据：{{slotProps.testProps}}</template>
</child>

10. 对keep-alive理解

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

可以设置以下属性：

include：只有名称匹配的组件会被缓存。
exclude：匹配的组件都不会被缓存。
max：数字。 --最多可以缓存多少组件实例。

注意：设置keep-alive会多出两个生命周期。（activated与deactivated）

11. vue常用的修饰符

修饰符是用于限定类型以及类型成员的声明的一种符号。

表单修饰符 v-model.trim
- trim ：自动过滤用户输入的首空格字符，而中间的空格不会被过滤。
- number ：自动将用户输入值转为数值类型。
事件修饰符 @click.stop
- stop ：阻止事件冒泡。
- prevent ：阻止事件默认行为。
- once ：绑定事件只触发一次。
- native ：让组件变成像HTML内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件（$emit）。
键盘修饰符 @keyup.enter
- 普通键 enter...

12. 自定义指令以及使用场景

通过Vue.directive(指令名字，对象数据（指令函数）)进行注册。

应用场景：

表单防止重复提交（节流）
图片懒加载
一键copy的功能

13. SPA和SSR有何异同

SPA：单页面应用（客户端渲染）

SSR：多页面应用（服务端渲染）
SPA应用只会首次请求HTML文件，（得到的是一个空的HTML），后续只需要请求JSON数据即可 ，用户体验更好，节约流量，服务端压力比较小。但是首屏加载的时间会变长，而且SEO不友好。为了解决以上，SSR方案，HTML内容在服务器一次性生成出来，首屏加载快，搜索引擎可以方便抓取页面信息。

14. vue项目中如何解决跨域问题

同源策略：协议相同、主机相同、端口相同。 ---若存在一个不同，就会产生跨域问题。

JSONP
CORS ---服务端设置
Proxy ---vue.config.js中设置

js 复制代码

 devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }

15. vue3新特性相比于vue2

1. Tree-shaking ：在vue2中很多函数都是挂载在全局Vue对象上，比如nexttick等，虽然我们可能用不到，但打包只要引入vue这些全局函数任然会打包进bundle中。 vue3采用ES6模块引入方式。
1. 响应式API ：采用ref和reactive创建响应式数据。

ref利用object.defieProperty(), reactive采用proxy()返回一个代理对象。

1. 生命周期 ：
  beforeCreate ==> setup
  create ==> setup
  beforeMounted ==> onBeforeMounted
  mounted ==> onMounted
  beforeUpdate ==> onBeforeUpdate
  updated ==> onUpdated
  beforeUnmount ==> onBeforeUnmounted
  unmounted ==> onUnmounted
1. 新组件 ：Fragment(没有根标签，多个标签包裹在一个Fragment虚拟元素中)
  Teleport(组件HTML结构移动到指定位置)
  Suspense(等待异步组件时渲染一些额外内容)