曹儒士子的博客

发表于 更新于 分类于 Waline： 阅读次数：

Virtual DOM 及 Diff 算法

1. JSX 到底是什么

使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API.

阅读全文 »

发表于 更新于 分类于 Waline： 阅读次数：

  1. 说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。

    application/x-www-form-urlencoded 方式是 Jquery 的 Ajax 请求默认方式，这种方式的好处就是浏览器都
    支持，在请求发送过程中会对数据进行序列化处理，以键值对形式，例如:

    阅读全文 »

发表于 更新于 分类于 Waline： 阅读次数：

从 2020 年初到现在已经开坑了快一年了。其实我最初想做一个完全模仿百度网盘的客户端程序，那时候还是 2019 年年初的时候，最初就是想做一个客户端，用来上传静态的网站到七牛云方便一些，以下是软件的截图。

图片

阅读全文 »

发表于 更新于 分类于 Waline： 阅读次数：

Vue 3.0 性能提升主要是通过哪几方面体现的？

  • 响应式系统升级：vue3 使用了 proxy 重写了响应式系统，因为 proxy 可以对整个对象进行监听，所以不需要对整个对象深度遍历
  • 编译优化：vue3 中标记和提升所有的静态节点，diff 过程中只需要对比动态节点
  • 源码体积优化：vue3 中移除了不经常使用的 API，tree-sharking 减小打包体积
阅读全文 »

发表于 更新于 分类于 Waline： 阅读次数：

一、简答题

当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。

1
2
3
4
5
6
7
8
9
10
11
12
13
let vm = new Vue({
  el: "#el",
  data: {
    o: "object",
    dog: {},
  },
  method: {
    clickHandler() {
      // 该 name 属性是否是响应式的
      this.dog.name = "Trump";
    },
  },
});
阅读全文 »

发表于 更新于 分类于 Waline： 阅读次数：

一、简答题

1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。

  1. 根据用户在命令窗口输入的参数以及 webpack.config.js 文件的配置，得到最后的配置。
  2. 根据上一步得到的最终配置初始化得到一个 compiler 对象，注册所有的插件 plugins，插件开始监听 webpack 构建过程的生命周期的环节（事件），不同的环节会有相应的处理，然后开始执行编译。
  3. 根据 webpack.config.js 文件中的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下去。
  4. 递归过程中，根据文件类型和 loader 配置，调用相应的 loader 对不同的文件做不同的转换处理，再找出该模块依赖的模块，然后递归本步骤，直到项目中依赖的所有模块都经过了本步骤的编译处理。编译过程中，有一系列的插件在不同的环节做相应的事情，比如 UglifyPlugin 会在 loader 转换递归完对结果使用 UglifyJs 压缩覆盖之前的结果；再比如 clean-webpack-plugin ，会在结果输出之前清除 dist 目录等等。
  5. 递归结束后，得到每个文件结果，包含转换后的模块以及他们之间的依赖关系，根据 entry 以及 output 等配置生成代码块 chunk。
  6. 根据 output 输出所有的 chunk 到相应的文件目录。
阅读全文 »
0%