前端面试 -- vue系列

1. vue理解：

核心特性:

• 1. 数据驱动（MVVM）
     Model：模型层，负责处理业务逻辑以及和服务器端进行交互。
     View：视图层，负责将数据模型转化为UI展示出来，可以简单理解为HTML页面。
     ViewModel：视图模型层，用来连接Model和view，是Model和View之间的通信桥梁。
• 2. 组件化
     图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发模式，在vue中每一个.vue文件都可以视为一个组件。
     优点：高内聚，低耦合；更好的复用；可维护性；扩展性。
• 3. 指令系统
     指令是指带有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、初始化生命周期、事件系统、响应式数据等。
• 2. 模板编译：vue对模板进行编译，将其转化为渲染函数，渲染函数接收数据并返回生成的虚拟DOM。
• 3. 挂载：当渲染函数生成虚拟DOM之后，vue会将渲染成真实DOM并将其挂载到指定目标元素上。
• 4. 更新：实例被成功挂载后，如果响应式数据发生变化，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属性，定义接收父组件传递过来的参数。 --父给子传递
• 2. $emit触发自定义事件：通过$emit触发自定义事件。 --子给父传递
• 3. ref：给子组件设置ref，父组件通过设置子组件ref获取数据。
• 4. EventBus：Vue.prototypr.$bus = new Vue() 。 --兄弟组件之间传递
• 5. $attrs和$listeners：–祖先传递数据给子孙。
• 6. provide与inject：祖先组件定义provide属性，返回传递的值；在后代组件通过inject接收组件传递过来的值。 --祖先传递数据给子孙
• 7. vuex：存储共享变量的容器。 --复杂关系的组件数据传递。

8. 对nextTick理解

当数据改变的时候，vue并不会立即去更新DOM，而是将修改数据的操作放在一个异步操作的队列中，如果一直修改相同的数据，异步操作队列还会进行去重，所以等待同一事件中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新。
使用场景：
想要修改数据后立即得到更新后的DOM结构，可以使用Vue.nextTick()。

9. slot（插槽）理解

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

• 默认插槽

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

• 具名插槽

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

• 作用域插槽

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

// 子组件
<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中设置

 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模块引入方式。
• 2. 响应式API ：采用ref和reactive创建响应式数据。

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

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