掌握Vue技术：精选面试题及答案（3）

小犇孩
99 阅读7分钟

1. ref 和 reactive 的简单理解

  1. ref 和 reactive 都是 vue3 的监听数据的方法，本质是 proxy
  2. ref 基本类型复杂类型都可以监听(我们一般用 ref 监听基本类型)，reactive 只能监听对象（arr，json）
  3. ref 底层还是 reactive，ref 是对 reactive 的二次包装， ref 定义的数据访问的时候要多一个.value

1. 谈谈你对 Vue3.0 有什么了解？

  • 新增亮点

    1. 性能比 vue2.x 快 1.2~2 倍
    2. 支持 tree-shaking，按需编译，体积比 vue2.x 更小
    3. 支持组合 API
    4. 更好的支持 TS
    5. 更先进的组件

  • 性能比 vue2.x 快 1.2~2 倍如何实现的呢

    1. diff 算法更快

      • vue2.0 是需要全局去比较每个节点的，若发现有节点发生变化后，就去更新该节点
      • vue3.0 是在创建虚拟 dom 中，会根据 DOM 的的内容会不会发生内容变化，添加静态标记， 谁有 flag！比较谁。

    2. 静态提升

      • vue2 中无论元素是否参与更新，每次都会重新创建，然后再渲染 vue3 中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可

    3. 事件侦听缓存

      • 默认情况下，onclick 为动态绑定，所以每次都会追踪它的变化，但是因为是同一函数，没有必要追踪变化，直接缓存复用即可
      • 在之前会添加静态标记 8 会把点击事件当做动态属性 会进行 diff 算法比较， 但是在事件监听缓存之后就没有静态标记了，就会进行缓存复用

  • 为什么 vue3.0 体积比 vue2.x 小

    • 在 vue3.0 中创建 vue 项目 除了 vue-cli，webpack 外还有 一种创建方法是 Vite Vite 是作者开发的一款有意取代 webpack 的工具，其实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间

3. 你做过哪些 Vue 的性能优化

  1. 首屏加载优化

  2. 路由懒加载

  3. 开启服务器 Gzip

    • 开启 Gzip 就是一种压缩技术，需要前端提供压缩包，然后在服务器开启压缩，文件在服务器压缩后传给浏览器，浏览器解压后进行再进行解析。首先安装 webpack 提供的 compression-webpack-plugin 进行压缩,然后在 vue.config.js：

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    const productionGzipExtensions = ['js', 'css']......plugins: [
        new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8
        })
    ]....

  1. 启动 CDN 加速

    • 我们继续采用 cdn 的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。

  2. 代码层面优化

    • computed 和 watch 区分使用场景

      • computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
      • watch：类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

    • v-if 和 v-show 区分使用场景 v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-if，因为减少了 dom 数量。

    • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if v-for 遍历必须为 item 添加 key，循环调用子组件时添加 key，key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key 避免同时使用 v-if，v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度。

  3. Webpack 对图片进行压缩

  4. 避免内存泄漏

  5. 减少 ES6 转为 ES5 的冗余代码

4.如何理解数据驱动视图

数据驱动视图是一种编程范式，通常用于描述前端框架（比如Vue.js和React）中的工作方式。它的核心思想是，视图（用户界面）的状态和展示是由数据的变化来驱动的，而不是由手动操作DOM元素来实现的。以下是对数据驱动视图的理解：

  1. 数据作为核心：在数据驱动视图的模式下，视图的状态和展示取决于数据的状态。当数据发生变化时，视图会自动更新以反映最新的数据状态。
  2. 声明式编程：采用数据驱动视图的框架通常支持声明式编程，即通过描述数据应该如何展示来构建用户界面，而不是手动操作DOM元素。这样可以减少对DOM的直接操作，提高开发效率和可维护性。
  3. 单向数据流：在数据驱动视图的框架中，通常采用单向数据流的模式，即数据从父组件流向子组件，子组件通过props接收数据，而不会直接修改父组件的数据。这种单向数据流的模式有利于数据的追踪和调试。
  4. 响应式更新：数据驱动视图的框架通常会实现响应式更新，即当数据发生变化时，相关的视图会自动进行更新，而无需手动干预。这种机制可以减少手动DOM操作，提高开发效率。

总的来说，数据驱动视图是一种通过数据状态来驱动用户界面展示的编程模式，它通过声明式编程、单向数据流和响应式更新等特性，提高了开发效率、可维护性和用户界面的一致性。Vue.js和React等流行的前端框架都采用了数据驱动视图的理念。

5.组件化开发

JavaScript组件化开发是一种通过将应用程序拆分为独立、可重用的组件来构建应用程序的方法。以下是JavaScript组件化开发的一些优势：

  1. 可维护性：组件化开发使得应用程序结构更清晰，代码更易于维护。每个组件都是独立的，可以单独开发、测试和维护，从而降低了代码的复杂性。
  2. 可重用性：组件化开发可以促进代码的重用。可以将通用的组件抽象出来，然后在不同的地方多次使用，从而减少重复编写代码的工作量。
  3. 可扩展性：通过组件化开发，可以更容易地扩展应用程序。可以根据需要添加、修改或删除组件，而不会对整个应用程序产生太大的影响。
  4. 并行开发：不同团队成员可以并行开发不同的组件，而不会相互干扰，从而提高开发效率。
  5. 更好的代码组织：组件化开发促进了更好的代码组织，使得代码更易于理解和维护。每个组件都有自己的职责范围，使得代码更加模块化。
  6. 更好的测试性：组件化开发使得单元测试更容易，因为每个组件都可以单独进行测试，从而提高了应用程序的质量。

总的来说，JavaScript组件化开发可以提高代码的可维护性、可重用性、可扩展性，促进并行开发，改善代码组织和测试性。这些优势使得组件化开发成为构建现代Web应用程序的重要方法之一。

avatar
文章
阅读
粉丝