TNotes.vue

Appearance

to top

0014. 谈谈你知道的 Vue 的优点 ​

📝 summary ​

  • 这是一道面试题，可以尝试从以下这些角度来作答
    • 响应式系统
    • 组件化开发
    • 采用虚拟 DOM
    • 渐进式框架
    • 社区生态

📒 notes - 参考回答 ​

  • 响应式
    • Vue 的响应式系统通过双向数据绑定实现，这意味着数据的变化会自动更新视图，反之亦然。
    • 在 Vue2 中，Vue 通过 data 选项定义的数据属性会被转化为 getter 和 setter，Vue 会自动追踪这些依赖，并在它们发生变化时通知相关的视图更新。
    • 在 Vue3 中，Vue 提供了一系列响应式相关的 API，让我们可以更加灵活地自行配置哪些数据应该是响应式的数据，当这些数据被应用到 template 模板中时，在模板解析阶段，会自动进行 依赖收集 工作，让 Vue 知道这个组件的模板都依赖哪些响应式变量，当这些变量的值发生变更之后，会自动触发 派发更新 的逻辑，通过 diff 对比新旧 dom tree 的变化，找到最小更新量，更新 View 视图。
    • Vue 的响应式，简化了 DOM 操作，让开发者可以专注于业务逻辑而非手动更新界面。这也就是 Vue 最大的优点，通过 MVVM 思想实现数据的双向绑定，让开发者不用再频繁地操作 DOM 对象。而这部分逻辑是内部封装好的，对于开发者而言是 透明 的。
  • 组件化
    • Vue 采用了组件化的开发模式，将应用分解成可复用的组件，每个组件封装了自己的模板（template）、逻辑（script）和样式（style）。这种方式不仅使代码结构更加清晰，而且提升了代码的可维护性和重用性。
    • 整个应用是一个树，一颗 DOM Tree。每个组件是一部分 DOM Tree，所有节点组合起来，形成一颗完整的树，就是我们的应用程序。
    • 组件化类比
      • 在父组件中使用子组件 = 在父组件的某个位置挖一个坑
      • 实现子组件的逻辑 = 把这个坑填上
      • 通过不断地填、挖坑，最终实现整个应用程序。
    • 组件化优点
      • 组件可以在不同的项目中 复用，减少了重复代码的编写。
      • 组件之间相互独立，方便 debugger，即方便定位和修复问题。
      • 模块化的代码结构，使得代码易于理解和 维护。
      • 团队成员可以并行开发不同的组件，提升开发效率，便于 协同 开发。
  • 虚拟 DOM
    • 问：一句话说明虚拟 DOM 技术是什么？
      • 答：虚拟 DOM 技术是通过普通的 JS 对象来记录页面真实 DOM 结构，在更新真实 DOM 之前通过对普通的 JS 对象（虚拟 DOM）进行一系列 diff 计算，尽可能找到最小更新量，最终将变化作用到真实 DOM，以此来提升性能的技术手段。
    • 在传统的开发（这里指早期的命令式编程的写法）中，用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致在性能上面的开销特别的高。
    • 虚拟 DOM（Virtual DOM）是 Vue 提升性能的关键技术之一。Vue 会创建一个虚拟的 DOM 树（VNode），在内存中对其进行操作，然后将最终的变化应用到实际的 DOM 上。这种方式减少了直接操作 DOM 的次数，提升了性能。
    • 由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。
    • Virtual DOM 的优点
      • 减少了不必要的 DOM 操作，提升了渲染效率，以此来 提升性能。
      • 虚拟 DOM 提供了 跨平台 的可能性，例如与服务器端渲染（SSR）或原生应用开发（通过 Weex）结合。
  • 渐进式框架
    • Vue 是一个渐进式框架，可以根据项目需求逐步引入不同的功能，灵活性高，可以根据项目规模和需求调整使用方式。
    • 对于小型项目，可以只使用 Vue 的核心库，甚至单独抽离出其中的响应式逻辑来使用。
    • 对于大型项目，可以引入 Vue Router、Pinia、Vue-i18n 等生态系统的库。
    • 总结：按需引用，不需要的直接 shaking 掉。
  • 强大的生态系统
    • Vue 具有丰富的生态系统，包括官方的路由管理库（Vue Router）、状态管理库（Vuex（旧）、Pinia（新，推荐））以及构建工具（Vue CLI（旧），Vite（新，推荐））。这些工具和库无缝集成，为我们开发 Vue 应用提供了强大的支持，极大简化了开发成本，可以说大部分场景，都能找到对应的工具，不再需要我们去手写轮子，当然，这也是其他主流框架所具有的特点。
    • Vue 的 官方文档 详细且易于理解，写得可以说是非常良心了。文档中提供了大量示例，以及一些最佳实践。学习成本低，快速上手。