Vue

vue相关面试题

有使用过vue吗？说说你对vue的理解？

有用过vue，vue是一个开源的JS框架，是根据MVVM设计架构实现的框架，主要的特点有声明式编程、组件化、响应式、虚拟DOM。

1. vue是数据驱动的MVVM框架，相比传统的DOM库，vue有一层虚拟DOM。每当数据发生更新时，会触发虚拟DOM进行diff运算，找出最小的变化节点，大大地节省了DOM操作性能。

2. vue是组件化的，在单页面应用程序中，每一个组件相当于是一块积木，搭建起庞大的应用系统。

3. 组件，可以理解成更大粒度的“HTML元素”，有利于快速开发、组件的高效复用。

4. vue有一整套指令，大大地降低了开发者的开发难度，提升了开发效率。

5. 虽然vue有诸多优点，但仍然有一些缺陷，比如复杂的业务页面通常过长，data、methods、computed、watch对应的数据和逻辑交织在一起，难以维护。

与react的区别：

1. 数据流向不同：vue是双向数据流，react是单向数据流

2. 响应式原理不同：react主要通过setState()更新状态，组件也会重新渲染

3. 组件写法不同：vue是通过template的单文件格式，react是通过jsx将html和css都写在js代码中

4. ** diff算法不同：在vue中如果元素相同但className不同，则会认为是不同的节点，会进行删除重建，在react中则会认为是相同的节点，只会修改属性**

你知道vue中的MVVM模式吗？

是的，我知道。 在Vue中，MVVM是指Model-View-ViewModel的设计模式。它将应用程序的逻辑和数据分离，使得数据的变化能够自动更新到视图中，而视图的改变也能够反映到数据模型中。其中，Model代表数据模型，View代表视图，ViewModel是连接两者的桥梁，负责处理数据和逻辑的交互。Vue通过双向绑定和响应式系统，实现了MVVM模式，使得开发者可以更方便地管理和更新应用程序的状态。

vue的原理是什么？

Vue的原理是使用虚拟DOM（Virtual DOM）实现数据驱动视图更新。它通过创建一个JavaScript对象来表示真实的DOM树，然后通过对比新旧虚拟DOM树的差异，最小化地更新真实的DOM。

具体来说，Vue的原理包括以下几个步骤：

1. 数据响应：Vue通过使用响应式数据的规则来追踪数据的变化。当数据发生变化时，Vue会自动更新相关的视图。

2. 模板编译：Vue使用模板语法来将模板转换成渲染函数。模板语法允许开发者使用简洁的HTML模板来描述视图，而不必直接操作DOM。

3. 虚拟DOM：Vue通过使用虚拟DOM来代替直接操作真实的DOM，从而实现高效的视图更新。在每次数据变化后，Vue会创建一个新的虚拟DOM树，并且通过对比新旧虚拟DOM树的差异，找出需要更新的部分。

4. 渲染：最后，Vue将新的虚拟DOM树渲染成真实的DOM，并将更新的部分应用到页面上。通过使用虚拟DOM，Vue能够最小化地更新DOM，提高性能。

总的来说，Vue的原理是通过数据响应、模板编译、虚拟DOM和渲染这几个步骤来实现数据驱动视图更新。通过这种方式，Vue使得开发者可以更方便地编写和维护复杂的前端应用。

vue父子传值

在Vue中，父组件向子组件传值可以通过props，子组件向父组件传值可以通过$emit。下面是一个简单的示例：

父组件：

<template>
  <div>
    <child :message="message" @update="handleUpdate"></child>
    <p>子组件传递的值：{{ childValue }}</p>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    handleUpdate(value) {
      this.childValue = value
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>父组件传递的值：{{ message }}</p>
    <button @click="updateParent">更新父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    updateParent() {
      this.$emit('update', '子组件传递的值')
    }
  }
}
</script>

在父组件中，通过:message="message"将父组件的message传给子组件。在子组件中，通过props接收父组件传递过来的值，并在按钮的点击事件中通过$emit向父组件传递值。 通过以上的代码，父组件可以获取到子组件传递的值，并在页面上进行展示。同时，父组件也可以通过绑定的方法来处理子组件传递的值。

vue项目搭建流程?

首先我要根据项目的需求确定要使用哪些技术点，然后创建项目、安装确定要使用的第 三方插件（比如vuex axios vue-router 第三方组件库 sass），安装完成之后启动项目进行 基础配置。创建style文件夹并创建公共样式表，比如：全局的公共样式、flex布局、icon 图标等。二次封装axios，配置axios的baseurl和timeout，并创建拦截器。创建路由文件 配置静态路由表，包括根页面、login页面、404页面

Vue的生命周期是什么？方法有哪些？

生命周期指的是组件从创建到卸载的过程，常见的生命周期有.....，并且每个生命周期都 提供一个钩子，用于在该阶段获取到对应的信息，使用keep-alive后还会额外生成两个 生命周期：activated、deactivated，分别在激活和失活的时候调用

• beforeCreate 在组件实例初始化完成之后立即调用。在当前阶段data、methods、computed 以及 watch 上的数据和方法都不能被访问，只能访问到props

• created 在组件实例处理完所有与状态相关的选项后调用。以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。在当前阶段要想与 DOM 进行交互，可以通过 $nextTick 来访问 DOM。

• beforeMount 在组件被挂载之前调用。（个人理解：作用与created无差别，比较多余）

• mounted 在组件被挂载之后调用。在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom节点。

• beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

• updated 发生在更新完成之后，当前阶段组件 Dom 已经完成更新。要注意的是避免在此期间更新数据，因为这个可能导致无限循环的更新，该钩子在服务器渲染期间不被调用（首次加载）。

• beforeDestroy/(beforeUnmount) 实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行 善后收尾工作，比如清除副作用(定时器)。

• destroy/(Unmounted) Vue实例销毁后调用。调用后，Vue实例指示的东西都会解绑定，所有的事件监听器会被移除，左右的子实例也会被销毁，该钩子在服务器端渲染不被调用。

• activated (keep-alive 专属) 组件被激活时调用

• deactivated (keep-alive 专属) 组件被销毁时调用

Vue的生命周期是Vue实例从创建到销毁的整个过程中，会经历一系列的阶段，在不同的阶段可以执行不同的操作。Vue的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。常用的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。

在实际使用中，我会根据需要在合适的生命周期阶段使用相应的钩子函数来执行一些操作。例如，在created阶段可以进行一些初始化操作，mounted阶段可以获取DOM元素、发送请求等等。在beforeDestroy阶段可以进行一些清理工作，如取消订阅、销毁定时器等等。具体的使用场景和操作根据实际需求而定。

vue中的组件化和模块化是什么？

• 组件化是指将界面拆分为一个个独立、可复用的组件来进行开发。这些组件通常包含特定的功能和样式，可以在不同的页面或应用程序中进行重用。使用组件化可以有效地提高代码的重用性和可维护性，降低开发成本和时间，并使代码更易于理解和管理。

• 模块化是指将代码拆分为相互依赖但相对独立的模块。每个模块都有自己的作用域和接口，可以导出数据和/或函数，并且可以从其他模块中导入数据和或函数。使用模块化可以避免全局变量和命名冲突问题，提高代码的可读性和可维护性，以及方便代码的测试和调试。

为什么data属性是一个函数而不是一个对象？

在一个项目中会有很多组件，它们最终是存放到同一个根节点上，如果采用对象形式存放都处于一个作用域就会造成属性污染，采用函数形式存放则不存在污染，因为函数作用域是互相隔离的

NextTick是什么？

1. NextTick是官方提供的一个方法，作用是获取更新后的DOM

2. 因为vue的更新机制是异步的，所以在数据发生改变后无法立即获取到更新后的dom，此时就可以通过NextTick获取

v-if和v-show的区别？

1. 共同点：

   1. 都是条件判断渲染指令，判断结果true则显示该元素，反之则都隐藏

   2. 它们隐藏时都不占位

2. 不同点：

   1. v-if是根据条件去创建或销毁元素，v-show是通过css的display属性控制元素的显示或隐藏

   2. v-show的原理就是判断是否为true，如果不为true直接设置display:none，v-if则更复杂，因为还有else-if、else等条件需要处理

说说你对vue的mixin的理解，有什么应用场景？

• Mixin就是将公共的逻辑或配置提取出来，哪个组件需要用到就将提取的内容混入到组件中。每个Mixin中都有data、methods、computed等

• 与vux的区别：

  • 都存放着公共的方法或属性

  • vux的数据不是独立的，组件间共享数据的状态，如果vux中的某个数据被修改了，那么其他所有引用vux数据的组件都会发生改变

  • Mixin中的属性和方法是独立的，组件间使用后进行修改也不会影响到其他引用了Mixin的组件

• 优点：

  • 提高代码复用性

  • 不用传递状态

  • 维护方便，只需要修改一个地方就行

• 缺点：

  • 命名冲突，如果和组件内的属性或方法发生命名冲突，默认情况组件内的属性或方法会覆盖Mixin中的，也可以自定义合并规则

  • 引用后不清楚具体来源，排查问题会比较麻烦

  • 不能滥用，否则后期很难维护

• 应用场景：一般应用于多个组件需要单独控制某个组件的状态，比如我自己封装了一个可以复用的弹窗组件，需要单独在多个组件中控制显示或隐藏，这时候就可以使用到Mixin

说说你对keep-alive的理解是什么？

1. Keep-alive是vue的内置组件，它的作用是帮我们缓存组件，当我们切换页面时不会销毁而是帮我们保留，使dom不会重复渲染，适用于不需要时刻获取最新数据的组件

2. 它的常用属性是include、exclude，包含与不包含，不常用属性min、max，最小缓存数与最大缓存数

3. 在后台管理项目中我也使用到了keep-alive，配合router-view共同使用。将keep-alive包裹在router-view中并在keep-alive中通过component动态渲染组件，（pinia底层通过proxy将方法代理到实例的第一层，这样就可以直接通过store.方法名调用）

对双向绑定的理解？

1. 所谓的双向绑定就是当视图发生变化，对应的数据更新，数据发生变化，对应的视图更新，双向绑定是MVVM的核心

2. 实现原理：

   1. 通过Object.defineProperty() + 订阅发布者模式实现

      1. 通过Object.defineProperty中的get和set对数据进行劫持，假如数据发生改变会调用set方法对数据进行修改，并通过订阅发布者模式对所有使用到这个数据的订阅者发送最新的数据进行更新，

组件通信

1. 父子组件通信

   1. props 父传子 子组件通过props接收

   2. emits 子传父 子组件触发自定义事件并传递数据

   3. ref 给子组件设置ref获取子组件的实例拿到对应数据

   4. solt 作用域插槽，子组件可以通过作用域插槽向父组件传递参数

   5. $parent 获取父组件的实例拿到对应数据

   6. $children 获取子组件的实例拿到对应的数据

2. 兄弟组件通信

   1. 通过共同的父组件或根组件进行传递

   2. Eventbus 在需要传递数据的组件使用this.$bus.emit创建自定义事件并发送数据，接收数据的组件使用this.$bus.on监听事件并接收数据（this.$bus.off移除监听）

3. 祖孙与后代组件通信

   1. prvide和inject 在祖先组件定义provide，在后代组件通过inject接收数据

4. 非关系组件通信

   1. Vuex 公共状态仓库

      1. State 存放响应式数据，底层通过vue的reactive进行代理

      2. Mutations 定义方法，是vuex中唯一修改state的方式

      3. Getters 相当于计算属性，具有缓存机制，底层通过vue的computed进行代理

      4. Actions 可以进行异步操作，触发mutations

      5. Moudules 将不同功能的模块组合成一个模块，并且每个模块都拥有各自的状态和方法

   2. Pinia vuex的迭代版本，核心模块变为3模块

      1. State 存放响应式数据

      2. Getters 相当于计算属性，具有缓存机制，底层通过vue的computed进行代理

      3. Actions 执行异步操作，修改数据

vue2 核⼼ diff 算法 采⽤的是双端比较算法 vue3 核⼼ diff 算法采⽤的是去头尾的最长递增子序列算法 Anthony fu

说说你对slot的理解？slot使用场景有哪些？

• slot插槽，相当于一个占位符，父组件控制是否显示，子组件控制在哪显示，分为默认插槽、具名插槽、作用域插槽

  • 默认插槽：在子组件定义一个<slot>标签，就是一个默认插槽

  • 具名插槽：一个组件中含有多个插槽时，为了区分对应的插槽出口，会在<slot>标签中添加name属性，父组件在传递内容时通过<template>包裹并将插槽名称添加给v-slot指令，也可以简写为#，这样就会将内容传送到对应的插槽中

  • 作用域插槽：在子组件的<slot>标签中添加属性，就像传递props的方式，然后再父组件通过v-slot就可以接收到子组件传递的数据

• 使用场景：

  • 比如封装的组件大致内容或功能是相同的，少部分区域的内容需要修改，此时就可以使用到插槽，灵活的去修改，达到组件的复用

什么是虚拟DOM？

• 在前端开发中操作dom的方法有原生js、innerHTML模板、虚拟dom

• 原生js操作dom需要准确的找到要操作的dom节点然后进行增删改查操作，虽然说这种方式的性能是最好的，但在开发过程中需要使用到大量的代码去实现，对于开发者来说不友好，并且后期维护起来也不方便

• innerHTML模板，是根据事先定义好的HTML模板进行dom渲染，随着模板的增大渲染性能会降低

• 虚拟dom本质是一个对象，是根据dom结构生成的一种树状结构对象，也称为dom树。在这个对象中包含了元素标签、属性、样式、嵌套元素等，通过递归遍历创建真实的dom，性能比js原生操作dom差一点

vue为什么使用虚拟DOM？

• 因为真实的DOM包含着大量的属性，并且vue具有响应式直接操作dom节点不方便实现响应式，所以vue使用了虚拟dom的思想，将dom元素抽象成一个一个对象，需要什么属性或内容就自己添加，易于使用。

• 并且抽象成对象之后就不再局限于浏览器的dom，可以实现跨平台，通过不同的渲染引擎生成不同平台下的 UI

• 如果要修改某个dom节点的内容只需要修改对象的属性，底层通过diff算法将新旧虚拟dom进行对比，实现dom节点的创建、删除、修改

• 虚拟dom真正的不管数据怎么变化，都可以用最小的代价来更新 DOM，而且掩盖了底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。

虚拟DOM实际上是真实DOM的抽象，类似于js的对象，通过对象属性描述节点中的元 素、属性、子节点，在vue和react中都是用到了虚拟dom，编译过程中通过虚拟dom对象 中的属性创建真实的dom节点。之所以采用虚拟dom，是因为真实dom中包含着很多属 性，并且dom操作是修改一次就重新加载一次，频繁操作dom节点会导致性能损耗，甚 至卡顿，影响体验，而虚拟dom则是通过修改dom对象中的属性实现dom操作，且会在 多次修改后统一更新，降低了性能损耗

vue2和vue3的区别？

• 响应式原理发生改变

  • vue2采用的是(ES5中的)Object.definePropert实现响应式，vue3则改用为ES6中的Proxy

    • Vue中使用Object.defineProperty重新将对象中的属性定义，如果是数组的话需要重写数组原型上的方法

    • Proxy可以直接监听数组类型的数据变化，definepropert不能监听到数组的变化，而是通过重写数组的原型方法并修改数组的原型指向实现的

    • proxy可以直接删除/新增对象中的属性，definepropert中新增对象属性要通过合并新属性和旧对象，删除则要将删除属性后的对象深拷贝给新对象

    • proxy实现响应式不需要额外添加方法，可以通过第二个参数handler中的拦截器拦截到对象或数组的行为，提升了性能

  • vue2 只支持单个根节点 vue3支持多个根节点

  • vue3 使用组合式API，数据和方法都在setup中，连贯性和可读性更高。vue2 则是选项式API，数据和方法是分开的，可读性差

  • 生命周期发生变化，vue3中的setup相当于beforeCreate和created，beforeDestroyed和destroyed改名为beforeUnmount和Unmounted

  • diff算法变化

    • vue2 中的diff算法采用双端比较算法，新旧虚拟节点头头比较 尾尾比较，有变化则新节点替换旧节点，没有变化直接复用，对静态节点也会进行比较，损耗性能

    • vue3中的diff算法采用去头尾的最长递增子序列算法，并且会对静态节点添加静态标记，不进行比较渲染的时候直接复用

  • vue3新增了tree-sharking功能，在打包的时候可以去掉多余的代码，让代码体积减少

Vue中组件和插件有什么区别？

• 组件：在开发过程中将功能模块或逻辑抽离成单独的文件，那个文件就叫做组件。在vue中一个 .vue 文件就是一个组件，在react中一个函数或一个类就是一个组件

• 插件：通常是为vue添加全局功能，如vux、vue-router，也可以添加全局方法、属性、指令

• 区别：

  • 编写形式的区别：

    • 组件的编写通常是写在 .vue文件，一个 .vue文件就是一个组件。

    • 插件的编写是写在js/ts文件中的install方法，第一个参数是vue构造器，第二个参数是一个对象，主要是通过vue构造器中的方法实现插件、指令、方法或属性的添加

  • 注册形式的区别：

    • 组件分为全局组件和局部组件，局部组件直接在需要使用的元素内引入vue3直接使用，vue2通过components声明后使用，全局组件则是在入口文件中通过vue.component注册使用

    • 插件是在入口文件中通过vue.use注册使用，（第一个参数是插件名称，第二个参数是可选的配置对象

vue的响应式API有哪些？

• ref

  • 使用ref创建变量，底层通过ref类先判断是否为ref对象，不是则创建ref实例，通过value属性访问到值，如果定义的是引用数据类型，会通过reactive代理为响应式数据。也是利用setter和getter对数据实现数据劫持

• reactive

  • 在vue2中是通过Object.defineProperty的getter和setter对数据实现数据劫持，vue3中改用proxy代理，只要是对数据进行操作都能被它拦截并且代理操作

• watch

  • 可以时时刻刻监听数据的变化，如果监听的对象是ref对象代理的响应式数据，直接在watch的()内写变量名即可，如果监听的对象是proxy代理的响应式数据，需要在watch的括号内写一个getter函数（也就是箭头函数）或者是添加deep属性

  • 它的属性：deep深度监听 immediate是否立即执行 flush执行时机，默认是pre数据发生变化后才执行，

• computed

  • 计算属性，通常是对某一个响应式数据进行逻辑处理，返回一个只读的ref数据类型。只有依赖发生变化才会重新计算，在template多处使用也只加载一次，因为它具有缓存

• readonly

  • 将一个响应式数据或非响应式的数据通过readonly包裹起来，readonly会将这个数据处理成只读的，它的底层是一个函数，里面有get和set方法，但是当我们执行set操作时会返回一个错误

• toRef

  • 将一个数据处理成ref对象，底层是一个ref对象类，使用toRef会new一个实例将传入的数据转为ref对象

• toRefs

  • 批量将数据处理成ref对象，toRefs会对传入数据的判断(判断是对象还是数组)，然后遍历需要处理的对象或数组，通过调用toRef方法将每一个属性转为ref对象

• isReadonly

  • 判断是否为可读数据

• shallowRef

  • 使用shallowRef转化的基本数据类型和使用ref没有差别，使用shallowRef转化的对象都会失去响应式

• shallowReactive

  • 只将对象第一层属性处理成响应式（浅响应式）。

vue项目搭建流程?

首先我要根据项目的需求确定要使用哪些技术点，然后创建项目、安装确定要使用的第三方插件（比如vuex axios vue-router 第三方组件库 sass），安装完成之后启动项目进行基础配置。创建style文件夹并创建公共样式表，比如：全局的公共样式、flex布局、icon图标等。二次封装axios，配置axios的baseurl和timeout，并创建拦截器。创建路由文件配置静态路由表，包括根页面、login页面、404页面。

Vue项目中你是如何解决跨域的呢？

• 跨域本质是浏览器基于同源策略的一种安全手段，也就是协议、端口、主机任意一个不同时就会产生跨域

• 解决跨域的方式：

  • JSONP 通过script标签的src属性实现跨域，现在不常用

  • Cors 通过增加http头让浏览器能够获取跨域请求的响应

  • Proxy 网络代理，通过webpack/vite启动一个代理服务器，通过这个代理服务器向后端服务器发送请求并接收服务器的响应，实现方式：vue.config.js中增加proxy配置、服务端实现代理转发、配置nginx

你知道vue中key的原理吗？说说你对它的理解?

• key是每一个虚拟节点的唯一id，是diff算法的优化策略，可以通过key快速、准确的判断新旧虚拟节点是不是同一个

• 添加key和不添加key的区别：

  • 在vue的patch过程中，如果添加了key则会根据key去找到新节点然后进行比较，不按就地复用进行比较

  • 如果没有添加key，vue会根据默认的就地复用策略，尽可能的就地复用/更新，就可能会造成新旧节点不是同一个元素，从而造成频繁操作dom，损耗性能

• 注意事项：

  • 尽量避免使用index作为key来使用，因为使用index作为key的时候，如果删除某个节点，那么它后面的所有节点都需要重新渲染，造成性能损耗

  • 同一个父元素下面的子元素的id必须是唯一的

vue组件加载顺序加顺序：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

先创建父组件的响应式数据、计算属性、方法、侦听器然后再创建子组件的响应式数据、计算属性、方法、侦听器然后进行挂载，子组件挂载完成再进行父组件的挂载

异步引入子组件 加载顺序：父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted

先创建父组件的响应式数据、计算属性、

• 同步引入子组件

  • 载入

  • 方法、侦听器然后进行挂载，再创建子组件的响应式数据、计cong算属性、方法、侦听器然后进行挂载

• 同步异步引入子组件的更新顺序、卸载顺序都是一样的

  • 更新阶段：

    • 父beforeUpdate->子beforeUpdate->子updated->父updated

  • 销毁阶段：

    • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

• 不同点：

  • 同步引入子组件会在子组件挂载完成后父组件再挂载

  • 异步引入子组件父组件会先挂载然后再渲染子组件

传参方式有哪几种？

• 常用的传参方式分为两种，一个是params另一个是query

• 区别：

  • params传参必须要配合name属性使用，用来识别路径，query传参可以通过path属性识别路径但是在开发中为了和params保持一致，会使用name属性

  • params传递的参数不会显示在url上而是保存在内存中，刷新会丢失，query传递的参数会显示在url上，不存在刷新丢失参数的问题

  • params和query传参建议使用String类型传递参数，因为params和query都是通过浏览器的url传递的，而浏览器会强制转换String类型，类似于本地存储

  • 如果想要隐藏参数就用params，不想刷新后丢失传参就用query

• 特殊的传参方式

  • props

    • 通过在路由信息中配置props为true启用这个传参方式，配置后这个组件可以通过props接收传递的参数

    • 不局限于传递String类型

Axios 底层实现原理涉及到网络请求和异步操作？

• axios是一个第三方的js库，可以实现网络请求和异步操作，它是通过封装js底层的XMLHttpRequest或Node.js中的http模块实现的网络请求，在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。

• 将HTTP请求封装成了promise，可以通过async/await、.then()、.catch()获取请求结果或者是做一些额外的操作

1. XMLHttpRequest 或者是 Node.js http 模块：Axios 在浏览器端使用 XMLHttpRequest对象，在 Node.js 环境中使用 http 模块作为底层通信工具。这些底层技术提供了发送HTTP 请求和接收响应的功能。

2. Promise：Axios 使用 Promise 对象来处理异步操作。它将 HTTP 请求封装成 Promise，并通过 Promise 的链式调用提供了更加优雅的代码编写方式。

3. 请求和响应拦截器：Axios 提供了请求拦截器和响应拦截器的功能。请求拦截器可以在发送请求之前对请求进行预处理，如设置请求头、添加认证信息等。响应拦截器可以对返回的响应进行统一处理，如解析数据、错误处理等。

4. 错误处理：Axios 在底层捕获所有的 HTTP 异常，例如网络错误或响应状态码不在 2xx 范围内的情况。它会根据错误类型抛出相应的错误，并返回一个 rejected 的 Promise 对象。

5. 取消请求：Axios 支持取消正在进行的请求，可以通过创建 CancelToken 实例并传递给请求配置中的 cancelToken 属性。通过执行 CancelToken 的 cancel 方法可取消请求，并且会在对应的请求 Promise 上触发一个 Cancel 错误。

综上所述，Axios 的底层实现原理包括使用 XMLHttpRequest 或者是 Node.js http 模块进行网络通信，使用 Promise 来处理异步操作，并提供请求和响应拦截器、错误处理以及取消请求的功能，从而为开发者提供了简洁、灵活和强大的 HTTP 请求工具。

AJAX与Axios的区别？

1. 实现方式

• AJAX 是一种基于原生的 XMLHttpRequest 对象的技术，需要手动创建、配置和处理XMLHttpRequest 对象。

• Axios 是一个基于 Promise 的第三方库，封装了底层的 XMLHttpRequest 或者是 Node.js的 http 模块，提供了更简洁、灵活和易于使用的 API。

1. 语法和用法

• AJAX 的用法相对较繁琐，需要手动设置请求的参数、监听回调函数，并手动处理状态和响应数据。

• Axios 提供了更简单、直观的 API，可以通过链式调用的方式设置请求参数、处理响应，支持使用 async/await 或者 .then()/.catch() 的语法来处理异步操作。

1. 功能扩展

• AJAX 只是一种技术或者概念的定义，而 jQuery 对其进行了封装和简化，提供了更多功能，包括对 AJAX 请求的处理、事件绑定、DOM 操作等。

• Axios 专注于 HTTP 请求，提供了丰富的功能，如请求拦截器、响应拦截器、全局配置、取消请求、上传下载进度监控等。

1. 依赖和体积

• AJAX 并不依赖于特定的 JavaScript 框架，可以直接使用原生的 XMLHttpRequest 对象。

• Axios 是一个单独的第三方库，可以在浏览器端和 Node.js 环境中使用。但它需要引入额外的 JavaScript 文件，并增加项目的体积。

综上所述，AJAX 是一种概念或原生技术，而 Axios 则是一个基于 Promise 封装的 HTTP 请求库。Axios 提供了更简洁、灵活的 API，并具有丰富的功能扩展，适用于现代的 Web 开发。

Vue的挂载过程是指Vue实例将自身渲染到DOM中的过程。下面是Vue的挂载过程：

创建Vue实例：通过Vue构造函数创建一个Vue实例，可以传入一个配置对象，包含组件选项、数据、生命周期钩子等。 初始化生命周期：Vue实例会初始化一些核心属性，如$el（表示Vue实例要挂载到的目标元素）、$options（包含实例的初始化选项）、$data（存储Vue实例的数据对象）等。 编译模板：如果在Vue实例的配置对象中指定了template属性，则Vue会将template编译成渲染函数。 创建虚拟DOM：通过调用渲染函数，Vue会生成一个虚拟DOM树，虚拟DOM是对真实DOM的一种抽象表示，方便处理和更新。 挂载虚拟DOM到目标元素：Vue会将生成的虚拟DOM挂载到实例的$el属性所指定的目标元素上，将虚拟DOM转换为真实DOM，并插入到目标元素中。 数据响应式：在挂载完成后，Vue会对数据进行响应式处理，即将数据与虚拟DOM建立关联，当数据发生变化时，自动更新虚拟DOM和真实DOM。 调用生命周期钩子：在挂载完成后，Vue会依次调用生命周期钩子函数，如created、mounted等，这些钩子函数提供了在不同阶段执行任务的机会。 通过以上挂载过程，Vue实例将成功渲染到目标元素中，并建立起数据与视图之间的响应式关系。随后，当数据发生变化时，Vue会重新渲染虚拟DOM，并通过比对前后的虚拟DOM差异，高效地更新真实DOM，实现页面的动态更新。

Vueex和local story的区别？

VueX是Vue.js官方推荐的状态管理库，用于在Vue应用中管理全局的状态。它提供了一个集中式的存储容器，可以管理和更新应用的状态。

Local storage是浏览器提供的一种持久化存储数据的机制，可以在浏览器本地保存数据。它可以用来存储和获取一些简单的键值对数据。

VueX和local storage的主要区别在于作用和使用场景：

• VueX主要用于管理大型、复杂的应用状态，可以实现状态的集中管理、数据共享和响应式更新等功能。

• Local storage主要用于在浏览器本地保存少量的数据，例如用户的登录信息、用户偏好设置等。

另外，VueX存储在内存中，刷新页面后数据会丢失，而local storage存储在浏览器本地，刷新页面后数据仍然存在。