前端开发面试题总结-vue2框架篇（四）

文章目录

• [37、谈谈你对 keep-alive 的了解](#37、谈谈你对 keep-alive 的了解)
• 38、说一说Vue2的响应式原理?
• 39、你都做过哪些Vue项目上的性能优化
• 40、你知道style加scoped属性的用途和原理吗
• 41、mixins混入的理解
• 42、Vue路由懒加载怎么做的
• 43、SSR了解吗?
• 44、computed和watch的区别是什么?
• [45、 Vue项⽬的打包上线？](#45、 Vue项⽬的打包上线？)
• 46、vue中动态组件如何使用?

37、谈谈你对 keep-alive 的了解

1. 是什么？
   ● keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染, 一般结合路由和动态组件一起使用，用于缓存组件
2. 具体使用？
   2.1. 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated
   2.2. 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高

38、说一说Vue2的响应式原理?

Vue2的响应式原理核心是通过数据劫持结合发布-订阅模式实现的，具体步骤如下：

1. 数据劫持
   Vue2使用Object.defineProperty递归劫持对象的属性，将其转化为getter/setter。当读取数据时触发getter，修改数据时触发setter。
2. 依赖收集（Dep）
   每个被劫持的属性都有一个Dep实例（依赖管理器）。在getter中，若当前存在正在执行的Watcher（如组件渲染时的渲染Watcher），则将该Watcher存入Dep的订阅列表，建立属性与Watcher的依赖关系。
3. 派发更新（Watcher）
   当数据变化触发setter时，Dep会通知所有关联的Watcher执行更新（如重新渲染组件）。Watcher通过异步队列优化多次更新，确保性能。
4. 数组处理
   Object.defineProperty无法监听数组索引变化，Vue2重写了数组的push、pop等7个方法。调用这些方法时手动触发更新，并通过__ob__属性关联数组的Dep。
   局限
   ● 对象新增/删除属性需用Vue.set/Vue.delete。
   ● 数组直接通过索引修改或修改长度无法被监听，需用重写的方法或Vue.set

39、你都做过哪些Vue项目上的性能优化

1. v-if和v-for不能连用
2. 页面采用keep-alive缓存组件
3. 合理使用v-if和v-show
4. key保证唯一
5. 使用路由懒加载、异步组件、组件封装实现复用
6. 防抖、节流
7. 第三方模块按需导入
8. 图片懒加载
9. 精灵图的使用
10. 代码压缩
11. CDN外链
    a. 把项目中的三方库在打包的时候先排出
    b.使用CDN的外部链接引入, 这样就能减少包的体积, 提高首屏加载的速度

40、你知道style加scoped属性的用途和原理吗

1. 用途：防止全局同名CSS污染
2. 原理：在标签加上v-data-hash属性，在当前组件的所有css样式选择器时加上对应[v-data-hash]，即CSS带属性选择器，以此完成类似作用域的选择方式.

41、mixins混入的理解

1. 是什么
   ● mixins（混入），当发现多个vue组件的选项和钩子函数有部分或者较多的相同的代码, 此时就可以把相同代码的选项和钩子函数给抽到一个mixins对象, 在组件中导入该对象进行混入即可
2. 使用场景
   ● 不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来
3. 如何创建Mixins
   ● 在 src 目录下创建一个 mixins 文件夹，在文件夹下新建一个 myMixins.js 文件。
   ● 因为 mixins 是一个 js 对象，所以应该以对象的形式来定义 myMixins，在对象中可以和 vue 组件一样来定义 data、components、methods、created、computed 等属性，并通过 export 导出该对象
   ● 在需要调用的组件中引入 myMixins.js 文件，直接混入即可
   ● 使用注意点:
   ○ 有冲突先用组件自身:
   ■ 如果混入的和data/computed/methods选项中有重名的, 使用组件中定义的属性
   ○ 没有冲突则叠加:
   ■ 如果混入钩子函数代码, 优先执行混入的再去执行组件钩子函数内部的代码
4. 缺点
   ● 变量来源不明确
   ● 多 mixins 可能会造成命名冲突
   ● mixins 和组件出现多对多的关系，使项目复杂度变高
5. 解决缺点
   ● Vue3的组合API 解决了mixins引起的所有问题(不清晰的数据来源，命名冲突等)，这也是Vue3中组合式API出现的原因之一

42、Vue路由懒加载怎么做的

1. 是什么?
   ● 路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载
2. 为什么?
   ● 像vue这种单页面应用，如果没有懒加载，运用webpack打包后的文件将会异常的大
   ● 造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验
   ● 而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
3. 如何使用?
   ●import按需加载

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: () => import('@/components/HelloWorld.vue')
    }
]

vue异步组件

export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: resolve => require(['@/components/HelloWorld'], resolve)
    }
]

43、SSR了解吗?

1. 是什么
   ● SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
   ● SSR 是一种网页渲染技术，与传统的客户端渲染（Client-Side Rendering，CSR）相对应。在传统的客户端渲染模式下，浏览器首先加载 HTML 页面，这个 HTML 页面往往只有一个基本的结构，包含一些必要的脚本引用等，然后由浏览器中的 JavaScript 代码去获取数据，并动态地将数据填充到页面中，最终渲染出完整的、用户可见的页面内容。而服务器端渲染则是在服务器端就把完整的、包含了最终页面内容的 HTML 页面直接生成好，然后发送给浏览器，浏览器接收到后可以直接展示出来，后续再通过加载 JavaScript 等资源来进行交互等操作。
2. 优点和缺点
   优点:
   ● 更快的首屏加载速度
   ● 利于 SEO（搜索引擎优化）
   缺点:
   ● 增加服务器负载
   ● 上手成本高
3. 进行SSR开发, 可以用哪些技术栈?
   ● Next.js（基于 React）
   ●Nuxt.js (基于 Vue)

44、computed和watch的区别是什么?

计算属性computed：

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. 如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法
4. computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价
   侦听属性watch：
5. 不支持缓存，数据变，直接会触发相应的操作；
6. watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
7. immediate：组件加载立即触发回调函数执行
8. deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑
   5.watch擅长处理的场景：一个数据影响多个数据，例如搜索框

45、 Vue项⽬的打包上线？

1. ⼿动部署
   
   2.自动部署
   本地Vscode编写代码，git push 将代码上传到gitlab托管平台, 通过.gitlab-ci.yml配置⽂件执⾏部署流程
   
   1.gitlab是企业版，内部部署
   2.Linux服务器
   ● 安装 gitlab-runner ⽤于拉取仓库代码
   ● 安装 Nodejs ⽤于打包项⽬
   ● 安装 pm2 ⽤于启动静态资源托管，守护进程
   3.运维使⽤ Nginx 进⾏域名代理
   4.⽤户通过浏览器访问服务

46、vue中动态组件如何使用?

Vue中的动态组件允许根据条件动态切换不同的组件渲染，核心是通过  标签与 is 属性实现。以下是关键点：

1. 使用 ，通过 currentComponent 动态绑定要渲染的组件名或组件对象：

<!-- 动态切换组件 -->
<component :is="currentTab"></component>

2.组件类型

is 的值可以是：

○ 注册的组件名（字符串）

○ 组件选项对象（直接引入的组件）

○ 异步组件（结合 import() 动态加载）

3. 保持状态

用  包裹动态组件，避免切换时组件实例被销毁

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

使用场景:

1. Tab页切换
   多个标签页对应不同组件，通过切换标签动态渲染内容。
2. 条件渲染不同组件
   根据业务逻辑（如用户权限、数据状态）动态选择组件，例如：
   ○ 未登录时显示登录组件，登录后显示内容组件。
   ○ 根据设备类型（PC/移动端）渲染不同UI组件。
3. 异步加载组件
   结合动态导入（import()）实现按需加载，优化首屏性能：

components: {
  AsyncComponent: () => import('./AsyncComponent.vue')
}

表单步骤向导

多步骤表单流程，每一步骤对应一个子组件，通过动态组件切换步骤。