番外

Rubin93
6,773 阅读4分钟

一、数据流

1.单向数据流

  • 什么是单向数据流？
    • 单向数据流指两个相互独立的数据流之间，只能从一个方向来修改状态。
  • vue/react 中的单向数据流
    1. 父组件总是通过 props 向子组件传递数据；
    2. 子组件不可以直接修改 props；
    3. 父级组件发生更新时，子组件中的 props 将会刷新为最新的值；
  • 优点
    1. 所有状态的改变可记录、可跟踪，源头易追溯；
    2. 所有的数据，具有唯一出口和入口，使得数据操作更直观更容易理解，可维护性强；
    3. 当数据变化时，页面会自动变化
  • 缺点
    1. 页面渲染完成后，有新数据不能自动更新，需要手动整合新数据和模板重新渲染
    2. 代码量上升，数据流转过程变长，代码重复性变大
    3. 在处理局部状态较多的场景时，代码会变得繁琐

2.双向数据流

  • 什么是双向数据流？

    在双向数据流中，Model（可以理解为状态的集合） 中可以修改自己或其他Model的状态， 用户的操作（如在输入框中输入内容）也可以修改状态。（双向数据流也可以叫双向数据绑定）

    将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致

    image.png

    页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据

    image.png

  • 优点
    1. 数据模型变化与更新，会自动同步到页面上，用户在页面的数据操作，也会自动同步到数据模型
    2. 无需进行和单向数据绑定的那些相关操作；
    3. 在表单交互较多的场景下，会简化大量业务无关的代码。
  • 缺点
    1. 无法追踪局部状态的变化；
    2. “暗箱操作”，增加了出错时 debug 的难度；
    3. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱。

二、vite 比 webpack 快在哪里？

  1. webpack 先打包再工作，vite 是运行中直接利用浏览器对ESModule的支持，服务启动效率
  2. 热更新HMR的效率
  3. 预构建依赖esbuild，快速的构建速度
  4. 打包依赖Rollup，高质量代码，充分的优化JS bundle

三、什么是单一职责原则（SRP）

定义：一个组件/类/函数，只做好一件事 目的：提高内聚性，降低耦合性 意义：组件可读性，稳定性，可复用性

四、设计一个组件库要考虑哪些？

  1. 视觉设计
    • 设计规范，border padding全局
    • 支持响应式？
    • 视觉主题
  2. API规划
    • Props：清晰 可预测 减少暴漏，遵循规范
    • Events：命名规范，参数明确
    • Slots/Children：内容分发形式一致，明确，灵活
  3. 框架选择
    • react / vue
    • 原生跨框架 web components
    • 无框架
  4. 样式选择
    • CSS modules / sass / less
    • css-in-js
    • Tailwind CSS
  5. 模块化和打包
    • ES modules (优先)
    • Tree sharking 支持
    • 输出格式 ESM / UMD / CJS
  6. 文档
    • 清晰，全面
  7. 测试
    • 单元测试：jest
    • 集成测试：integration tests

五、理解计算机语言类型

计算机不能理解高级语言，只能理解机器语言，所以需要把高级语言转为机器语言，才能只执行高级语言编写的程序。根据执行语言的流程，把语言分为编译型语言和解释型语言。

  1. 编译型语言：程序在执行之前，把程序编译成为机器语言的文件，运行时不需要重新翻译，可以直接使用。程序执行效率高，依赖编译器，跨平台性差些。如C、++、90等

    执行过程:
    源代码--> 语言分析--> AST--> 语义分析--> 中间代码--> 代码优化--> 二进制文件--> 直接执行--> 执行

  2. 解释型语言： 程序在运行时才翻译成机器语言，每执行一次都要翻译一次。程序执行效率低，依赖解释器，跨平台性好。

    执行过程:
    源代码--> 语言分析--> AST--> 语义分析--> 字节码--> 解释执行--> 执行

  3. JS执行过程：

    • JavaScropt--> 词法分析--> 词法单元（Token）--> 语法分析--> 抽象语法树（AST）--> 解释--> 字节码--> 优化字节码--> 机器码--> 执行

六、理解TS解释文件

vite-env.d.ts的作用

// .d.ts
/// <reference types="vite/client" /> // TS引入文件时声明
avatar
文章
阅读
粉丝