跳到主要内容

补充

axios如何取消请求​

这可以通过使用 Axios 提供的 CancelToken.source() 方法来实现。

对react和vue的理解，他们的异同​

相同点​

  • react和vue都推崇组件化，通过将页面拆分成一个一个小的可复用单元来提高代码的复用率和开发效率。 在开发时react和vue有相同的套路，比如都有父子组件传参，都有数据状态管理，都有前端路由等。
  • 都是用了Virtual DOM
  • 都提供了响应式和组件化的视图组件

数据流​

vue和react都是单项数据流，但vue也默认支持数据双向绑定

模板语法与 JSX​

  • React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;
  • Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件

心智模型​

  • React和Vue都属于视图层库/框架，但它们在实现上有一些差异。
  • React 可以被看作是 "V" (视图) 层。它并没有严格遵循传统的 MVC（Model-View-Controller） 或 MVVM（Model-View-ViewModel） 架构模式，而是专注于构建用户界面的库。
  • Vue则更接近MVVM（模型-视图-视图模型）的概念，它通过双向绑定和响应式系统将数据和视图连接起来，使得状态的变化能够自动反映在UI上，从而减少了手动的DOM操作。

diff算法​

  • Vue与React都使用了 Virtual DOM + Diff算法， 不管是Vue还是React，最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)。

  • 当每一次UI更新时，总会根据render重新生成最新的VNode，然后跟以前缓存起来老的VNode进行比对，再使用Diff算法（框架核心）去真正更新真实DOM（虚拟DOM是JS对象结构，同样在JS引擎中，而真实DOM在浏览器渲染引擎中，所以操作虚拟DOM比操作真实DOM开销要小的多）

  • react和vue的虚拟dom都是一样的， 都是用JS对象来模拟真实DOM，然后用虚拟DOM的diff来最小化更新真实DOM。但是两者对于dom的更新策略不太一样， react采用自顶向下的全量diff，vue是局部订阅的模式

  • react 会自顶向下全diff

    • 在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree, 新旧dom tree进行比较，局部更新dom。所以react为了避免父组件更新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程.

  • vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

    • 在 vue中， 通过Object.defineProperty 把这些 data 属性 全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。

响应式原理​

  • Vue

    • Vue依赖收集，自动优化，数据可变
    • Vue递归监听data的所有属性,直接修改
    • 当数据改变时，自动找到引用组件重新渲染

  • React

    • React基于状态机，手动优化，数据不可变，需要setState驱动新的state替换老的state。当数据改变时，以组件为根目录，默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

React 与 Vue 的 diff 算法有何不同​

没有区别​

  • react和vue的虚拟dom都是一样的， 都是用JS对象来模拟真实DOM，然后用虚拟DOM的diff来最小化更新真实DOM。
  • 除了极个别实现外，两者前半部分（用JS对象来模拟真实DOM）几乎是一样的。
  • 而对于后半部分（用虚拟DOM的diff来最小化更新真实DOM）两者算法也是类似的，包括增删移等
  • vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。
  • 按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component， 就会重新tree diff流程。
  • 但是两者对于dom的更新策略不太一样， react采用自顶向下的全量diff，vue是局部订阅的模式

DOM的更新策略不同​

  • react 会自顶向下全diff

    • 在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree, 新旧dom tree进行比较，局部更新dom。所以react为了避免父组件更新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程.

  • vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

    • 在 vue中， 通过Object.defineProperty 把这些 data 属性 全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。

  • Diff 算法都是借助元素的 Key 判断元素是新增、删除、修改，从而减少不必要的元素重渲染

vue2和vue3的diff算法有什么不同​

  • vue2、vue3 的 diff 算法实现差异主要体现在：处理完首尾节点后，对剩余节点的处理方式

  • vue2 是通过对旧节点列表建立一个 { key, oldVnode }的映射表，然后遍历新节点列表的剩余节点，根据newVnode.key在旧映射表中寻找可复用的节点，然后打补丁并且移动到正确的位置

  • vue3 则是建立一个存储新节点数组中的剩余节点在旧节点数组上的索引的映射关系数组，建立完成这个数组后也即找到了可复用的节点，然后通过这个数组计算得到最长递增子序列，这个序列中的节点保持不动，然后将新节点数组中的剩余节点移动到正确的位置

项目难点，如何解决的​

redux和vuex的区别​

  • Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可
  • Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可
  • Vuex数据流的顺序是：View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变(vue检测到数据变化自动渲染)。redux是view-->action-->reducer-->store-->view

封装组件：搜索框​

一个地方想搜素名字，一个地方要名字+价格，怎么封装

父组件调用函数，传给搜索框

  • 什么是线程，一个进程可以有多个线程吗

    • 进程是操作系统分配资源的最小单元, 线程是操作系统调度的最小单元。(一个是供分配， 一个是供调度)

    • 可以

  • 多线程会出什么问题，怎么解决

  • setTimeout为什么不准确。settimeout、setinterval定时任务的实现有什么区别

进程和线程​

  • 线程和进程是操作系统中的两个概念：
    • 进程(process)：计算机已经运行的程序，是操作系统管理程序的一种方式
    • 线程(thread)：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中
  • 听起来很抽象，这里还是给出我的解释：
    • 进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程)
    • 线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程
    • 所以我们也可以说进程是线程的容器;