前端面试 -- vue系列（1）

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）