前端面试练习24.3.13

1.请描述下对vue生命周期的理解

Vue 组件的生命周期是指组件从创建、挂载到销毁的整个过程中所经历的一系列钩子函数的调用顺序。

在vue3 中，我们使用了组合式的API，使用了setup语法糖，提供了更灵活的方式来组织组件的逻辑，不再依赖于固定的生命周期钩子函数。

在vue2 中的一些生命周期钩子函数：

1. 创建阶段（Creation）：

   • beforeCreate：实例刚在内存中创建，但是尚未初始化数据、事件等。
   • created：实例已经完成数据观测、属性和方法的运算，但尚未挂载到页面上。

2. 挂载阶段（Mounting）：

   • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
   • mounted：实例已经挂载到页面上，此时组件已经可见。

3. 更新阶段（Updating）：

   • beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • updated：数据更新完成，DOM 重新渲染完成。

4. 销毁阶段（Destroying）：

   • beforeDestroy：实例销毁之前调用。此时实例仍然完全可用。
   • destroyed：实例销毁后调用，所有的事件监听器会被移除，所有的子实例也会被销毁。

在vue3 中生命周期钩子函数有了一些修改和引入：

1. 创建阶段（Creation）：

   • beforeCreate
   • created
   • beforeMount (此钩子函数也可以在创建阶段执行)

2. 挂载阶段（Mounting）：

   • onBeforeMount
   • onMounted

3. 更新阶段（Updating）：

   • onBeforeUpdate
   • onUpdated

4. 卸载阶段（Unmounting）：

   • onBeforeUnmount (Vue 2 中的 beforeDestroy 功能的扩展)
   • onUnmounted (Vue 2 中的 destroyed 功能的扩展)

5. 错误处理阶段（Error Handling）：

   • onErrorCaptured (捕获子组件错误)

2.双向数据绑定是什么

通俗的讲就是页面随着数据的变化而变化，数据也会因为页面的改变而变化

双向数据绑定是指数据模型（通常是应用的状态）和视图（用户界面）之间的一种机制，其中数据的变化会影响视图的更新，同时视图中用户的操作（如输入、点击等）也会反过来影响数据模型的变化。在双向数据绑定中，数据的变化会自动反映到视图中，而视图中的变化也会同步更新到数据模型中，实现了数据和视图的同步更新。

3.Vue组件之间的通信方式都有哪些?

1. Props 和 Events：

   • Props：父组件通过 props 把数据传递给子组件，子组件通过 props 接收父组件传递的数据。
   • Events：子组件通过触发事件并传递数据给父组件，来实现子组件向父组件通信。

2. $emit 和 $on：

   • **emit** ：在子组件中使用 `emit` 方法触发一个自定义事件，并传递数据给父组件。
   • **on** ：在父组件中使用 `on` 方法监听子组件触发的自定义事件，并处理传递过来的数据。

3. $refs ：父组件可以通过 ref 给子组件添加一个引用，然后直接通过这个引用访问子组件的属性和方法。

4. Provide 和 Inject：

   • Provide ：父组件通过 provide 提供数据或方法，然后子组件通过 inject 注入到自身，以便访问这些数据或方法。
   • Inject ：子组件通过 inject 注入父组件提供的数据或方法，并在组件内部使用。

5. Event Bus：可以创建一个全局的事件总线实例，然后在不同的组件中使用该实例来触发和监听事件，实现组件之间的通信。

6. Vuex：Vuex 是 Vue.js 的状态管理库，用于管理应用的所有组件的状态。通过在不同的组件中触发 mutations 来改变状态，然后通过 getters 获取状态，实现了组件之间的通信和状态共享。

7. **$parent 和 children** ：可以通过 `parent访问父组件的属性和方法，通过$children` 访问子组件的属性和方法。不过这种方式一般不推荐使用，因为会使得组件的耦合度增加，不利于组件的复用和维护。

4.为什么data属性是一个函数而不是一个对象?

在 Vue 组件中，data 选项可以是一个函数，也可以是一个对象。但是推荐将 data 选项定义为一个函数的形式，而不是一个对象。这是因为 Vue 组件的实例是可复用的，如果 data 是一个对象，则所有的实例都会共享同一个对象，这样会导致状态的共享和污染。而如果将 data 定义为一个函数，每次创建组件实例时，都会调用该函数，返回一个新的数据对象，从而保证了每个组件实例都有独立的数据对象，不会相互影响。

5.动态给vue2的data添加一个新的属性时会发生什么?怎样解决?

在 Vue 2 中，如果在组件实例创建之后动态给 data 添加一个新的属性，这个属性不会被响应式地追踪，也就是说 Vue 不会自动检测到这个新属性的变化，从而不会触发视图的更新。

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  created() {
    this.$data.newProperty = 'World';
  }
};

可以使用 Vue.set 或者 this.$set 方法来手动将属性添加到数据对象中，并使其成为响应式的。

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  created() {
    this.$set(this.$data, 'newProperty', 'World');
  }
};

6.v-if和v-for的优先级是什么

在 Vue.js 中，v-if 指令和 v-for 指令可以同时存在于同一个 DOM 元素上，但它们的优先级是不同的。

当 v-if 和 v-for 同时存在于同一个 DOM 元素上时，v-for 拥有更高的优先级 。这意味着 v-for 指令将在 v-if 指令之前被解析。

这意味着当 v-if 条件为 false 时，v-for 指令仍然会对其进行迭代，但是由于 v-if 的条件为假，因此渲染的结果将被隐藏 。因此，如果你的意图是在满足一定条件时渲染多个项目，你应该在包含 v-for 的父元素上使用 v-if。

7.v-show和v-if有什么区别?使用场景分别是什么?

区别：

1. v-show：

   • v-show 是一种简单的指令，它仅通过 CSS 控制元素的显示和隐藏。
   • 当条件为真时，元素会显示在 DOM 中，当条件为假时，元素会被设置为 display: none;，并保留在 DOM 中。
   • v-show 适用于需要频繁切换显示和隐藏的情况，因为元素会保留在 DOM 中，这样可以减少 DOM 的频繁创建和销毁。

2. v-if：

   • v-if 是一种更为灵活的指令，它会完全销毁和重建元素及其内部组件。
   • 当条件为真时，元素会被添加到 DOM 中，当条件为假时，元素会从 DOM 中移除。
   • v-if 适用于需要根据条件动态添加或移除元素的情况，因为它会真正地销毁和重建元素，可以节省 DOM 的内存占用。

使用场景：

• v-show 的使用场景：

  • 当需要频繁切换显示和隐藏元素时，可以使用 v-show，因为它只是通过 CSS 控制元素的显示和隐藏，不会频繁地创建和销毁 DOM 元素。
  • 例如，用于实现显示/隐藏菜单、折叠面板等。

• v-if 的使用场景：

  • 当需要根据条件动态添加或移除元素时，可以使用 v-if，因为它会真正地销毁和重建元素，可以节省 DOM 的内存占用。
  • 例如，用于实现条件性渲染组件、根据权限动态显示或隐藏某些内容等。

总的来说，如果需要频繁切换显示和隐藏元素，可以使用 v-show；如果需要根据条件动态添加或移除元素，可以使用 v-if。

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

在 Vue 中，key 是用于标识 Vue 实例中的节点的特殊属性。每个 key 必须是唯一的，并且用于帮助 Vue 识别节点的身份，从而在 DOM 更新时尽可能地复用和移动现有元素，而不是创建新的元素或销毁现有元素。

原理：

1. DOM Diff 算法 ：Vue 使用一种称为 Virtual DOM 的技术来高效地更新真实 DOM。在更新过程中，Vue 会比较新旧虚拟 DOM 树的节点，找出节点的差异，并根据这些差异来更新真实 DOM。key 就是在这个比较过程中用来识别节点的标识符。

2. 节点标识 ：当 Vue 更新虚拟 DOM 时，它会使用节点的 key 来判断是否是相同的节点。如果新节点和旧节点的 key 相同，则 Vue 认为它们是同一个节点，可以尝试复用现有的 DOM 元素。如果没有提供 key，Vue 会使用节点的索引来进行匹配，但这种方法可能导致 DOM 的不必要更新和重新渲染。

3. 性能优化 ：使用 key 可以帮助 Vue 优化 DOM 更新性能，减少不必要的 DOM 操作和重新渲染。特别是在列表渲染中，使用 key 可以确保正确地复用现有的 DOM 元素，从而提高渲染性能。

理解：

• key 的作用不仅仅是为了性能优化，更重要的是确保组件在进行增删操作时，能够正确地定位和识别每个节点。通过唯一的 key，Vue 可以更好地跟踪每个节点的状态和变化，确保组件的行为和预期一致。

• 在实际开发中，需要注意确保每个 key 是唯一的，并且尽量避免使用动态生成的索引作为 key，因为这可能导致不稳定的渲染结果和性能问题。

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

在 Vue 中，Mixin 是一种用于组件复用的机制，它允许将一些公共的功能和逻辑封装在一个对象中，然后在多个组件中进行复用。Mixin 可以包含任意组件选项，例如 data、methods、computed、watch 等，当组件使用 Mixin 时，它会将 Mixin 中的选项合并到组件自身的选项中，从而实现了代码的复用和分离。

理解：

1. 代码复用：Mixin 可以将一些通用的功能和逻辑封装起来，然后在多个组件中进行复用，避免了代码的重复编写。

2. 代码分离：将公共的功能和逻辑抽离到 Mixin 中，使得组件的代码更加清晰和易于维护。

3. 灵活性：Mixin 可以根据需要组合多个 Mixin，并且可以在组件中进行局部覆盖，从而实现更加灵活和精细的功能定制。

应用场景：

1. 公共功能封装：将一些常用的功能封装成 Mixin，如表单验证、数据请求、权限控制等，可以在多个组件中进行复用。

2. 代码复用：当多个组件具有相似的功能或行为时，可以将这些共同的部分提取出来作为 Mixin，避免代码的重复编写。

3. 代码分离：将不同组件中相似但又不完全相同的部分提取出来作为 Mixin，可以使组件的代码更加清晰和易于维护。

4. 功能扩展：Mixin 可以用于扩展组件的功能，为组件提供一些额外的功能或特性。

5. 跨项目复用：将一些通用的功能封装成 Mixin，可以在不同的项目中进行复用，提高了代码的可复用性和扩展性。

// 定义一个 mixin
const logMixin = {
  created() {
    console.log('Component created');
  },
  methods: {
    logMessage(message) {
      console.log('Message:', message);
    }
  }
};

// 在组件中使用 mixin
Vue.component('my-component', {
  mixins: [logMixin],
  template: '<button @click="logMessage(\'Clicked\')">Click me</button>'
});

在上面的示例中，我们定义了一个名为 logMixin 的 mixin，它包含了一个 created 钩子函数和一个 logMessage 方法。然后，在组件中使用了这个 mixin，并在模板中绑定了一个点击事件，当按钮被点击时会调用 logMessage 方法。

通过使用 mixin，我们可以在多个组件中复用 logMixin 中定义的功能和逻辑，从而减少了代码的重复编写，并且使得组件的代码更加清晰和易于维护。

10.Vue常用的修饰符有哪些有什么应用场景

.prevent：阻止默认行为，

即调用 event.preventDefault() 方法。常用于阻止表单提交或超链接跳转。

<a href="#" v-on:click.prevent="doSomething">Click me</a>

.stop：阻止事件冒泡，

即调用 event.stopPropagation() 方法。常用于防止事件向上传播到父元素。

<div v-on:click.stop="doSomething">Click me</div>

.capture：添加事件监听器时使用事件捕获模式。

常用于在父组件中捕获子组件触发的事件。

<div v-on:click.capture="doSomething">Click me</div>

.self：只当事件是从侦听器绑定的元素本身触发时才触发回调。

常用于在列表渲染中避免子元素的事件冒泡到父元素。

<div v-on:click.self="doSomething">Click me</div>

.once：只触发一次的事件监听器。

常用于只需要触发一次的事件处理逻辑。

<div v-on:click.once="doSomething">Click me</div>

.passive：

滚动事件的默认行为通常是不能被取消的，而添加 .prevent 会导致滚动事件的默认行为被阻止。在使用 v-on 监听滚动事件时，可以使用 .passive 修饰符，表示不会调用 event.preventDefault() 方法，可以提高滚动性能。

<div v-on:scroll.passive="handleScroll">Scroll me</div>

11.Vue中的$nextTick有什么作用?

$nextTick 是 Vue 提供的一个异步方法，它用于在 DOM 更新之后执行一段代码。它的主要作用是在更新数据之后等待 Vue 完成 DOM 更新，然后执行一段回调函数。这样可以确保在 DOM 更新完成后再进行一些操作，比如获取更新后的 DOM 元素的状态或进行其他操作。

具体来说，$nextTick 的作用包括：

等待 DOM 更新：

Vue 在更新数据后并不会立即更新 DOM，而是将 DOM 更新放入异步队列中，然后继续执行同步任务。使用 $nextTick 可以等待 Vue 更新 DOM 完成后再执行一段代码，确保在 DOM 更新后进行操作。

获取更新后的 DOM 元素状态：

有时我们需要在更新后获取 DOM 元素的状态或进行一些 DOM 操作，但直接在更新数据之后执行可能无法得到最新的 DOM 状态，此时可以使用 $nextTick 来确保在 DOM 更新完成后再进行操作。

避免异步更新问题：

在某些情况下，直接在更新数据后进行操作可能会导致一些异步更新的问题，比如在更新数据后立即获取更新后的 DOM 元素状态可能会获取到之前的状态。使用 $nextTick 可以避免这些问题，确保在更新后进行操作。

总的来说，$nextTick 是用于在 Vue 更新 DOM 完成后执行一段代码的方法，它可以确保在 DOM 更新后再进行操作，避免了一些异步更新的问题，提高了代码的可靠性和稳定性。

12.Vue实例挂载的过程

Vue 实例的挂载过程指的是将 Vue 实例与 DOM 元素建立关联，并将 Vue 实例的模板渲染到页面上的过程。这个过程包括了初始化 Vue 实例、编译模板、创建虚拟 DOM、将虚拟 DOM 渲染到页面等步骤。

下面是 Vue 实例挂载的主要过程：

创建 Vue 实例：

首先，我们需要创建一个 Vue 实例。可以使用 new Vue() 构造函数来创建一个 Vue 实例，并传入相应的选项。

初始化选项：

在创建 Vue 实例时，Vue 会初始化实例选项，包括数据对象、计算属性、方法、生命周期钩子函数等。

编译模板：

Vue 实例中的模板（template）会经过 Vue 的编译器编译成渲染函数。编译过程会将模板转换为虚拟 DOM 树。

创建虚拟 DOM：

通过渲染函数，Vue 将模板转换为虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个 JavaScript 对象，它是对真实 DOM 的抽象表示。

挂载虚拟 DOM：

接下来，Vue 将虚拟 DOM 挂载到页面上的一个真实的 DOM 元素上。可以使用 el 选项指定要挂载到的 DOM 元素，或者使用 $mount 方法手动挂载。

数据初始化：

在挂载前，Vue 会对数据进行初始化，将数据对象中的属性转换为响应式数据，建立数据与视图的关联。

渲染视图：

一旦 Vue 实例挂载到页面上，就会触发首次渲染。Vue 会根据虚拟 DOM 中的描述来创建真实的 DOM 元素，并将其插入到指定的挂载元素中，完成页面的初始化渲染。

监听数据变化：

Vue 实例会开始监听数据的变化，当数据发生变化时，Vue 会重新渲染虚拟 DOM，并将更新的内容更新到页面上，从而实现了数据驱动视图的更新。

总的来说，Vue 实例的挂载过程是一个初始化数据、编译模板、创建虚拟 DOM、渲染视图的过程。通过这个过程，Vue 实现了数据与视图的绑定，并且能够根据数据的变化动态地更新页面内容。

13.你了解vue的diff算法吗?

Vue 使用的 Virtual DOM 的 diff 算法是一种高效的算法，用于比较新旧虚拟 DOM 树的差异，并根据这些差异来更新真实 DOM。这个算法的核心思想是尽量复用已有的 DOM 元素，减少不必要的 DOM 操作，从而提高页面的性能和响应速度。

Vue2 的 diff 算法主要包括以下几个步骤：

1. 深度优先遍历：首先，Vue 会对新旧虚拟 DOM 树进行深度优先遍历，比较相同层级的节点。

2. 同级别比较：在比较过程中，Vue 会首先比较两个节点是否是同一类型的节点。如果不是同一类型的节点，直接将旧节点替换成新节点；如果是同一类型的节点，则继续比较子节点。

3. 节点复用 ：在比较子节点时，Vue 会尽可能地复用已有的 DOM 元素。通过给节点添加 key 属性，Vue 可以识别出哪些节点是相同的节点，从而可以复用这些节点。

4. 更新差异：在比较完成后，Vue 会得到两个虚拟 DOM 树的差异。根据这些差异，Vue 会生成一组最小的 DOM 操作指令，然后将这些指令应用到真实 DOM 上，完成页面的更新。

通过这样的 diff 算法，Vue 能够高效地更新页面，并且尽量减少不必要的 DOM 操作，从而提高页面的性能和响应速度。同时，通过合理使用 key 属性，开发者可以更好地控制节点的复用，避免一些意外的问题。Vue 的 diff 算法是 Vue 实现高效响应式的重要基础之一。

Vue 2 中的 diff 算法：

1. **递归遍历：**Vue 2 中的 diff 算法采用的是递归遍历的方式，逐层比较新旧虚拟 DOM 树的节点。

2. **同级比较：**在比较过程中，Vue 2 首先比较两个节点是否是同一类型的节点，然后继续比较子节点，直到比较完成。

3. 节点复用： Vue 2 中使用 key 属性来帮助识别哪些节点是相同的节点，从而实现节点的复用。

Vue 3 中的 diff 算法：

1. **编译优化：**Vue 3 中引入了编译优化，包括静态模板提升技术和更好的标记算法，可以提高模板编译的性能。

2. **双端比较：**Vue 3 中引入了双端比较（Two-Ended Diffing）的技术，在比较过程中同时从新旧节点的两端开始比较，以减少比较的层级，提高 diff 算法的效率。

3. **优化策略：**Vue 3 中对 diff 算法的一些细节进行了优化，例如增加了更高效的节点比较策略、提高了复用节点的几率等，从而进一步提高了 diff 算法的性能。

总的来说，Vue 3 在 diff 算法方面进行了一些改进和优化，包括引入编译优化和双端比较等技术，从而提高了 diff 算法的性能和效率。这些改进使得 Vue 3 在大型应用和大规模节点更新的场景下有了明显的性能提升。

14.Vue中组件和插件有什么区别?

Vue 中的组件和插件是两种不同的概念，它们在 Vue 应用中扮演着不同的角色和功能：

组件（Component）：

• 组件是 Vue 应用中的基本构建块，用于封装可复用的 HTML 元素和功能。
• 组件通常包含了模板（template）、脚本（script）和样式（style）等内容，用于定义组件的外观和行为。
• 组件可以在应用中被多次实例化和复用，使得应用的结构更加清晰和模块化。

插件（Plugin）：

• 插件是一种 Vue 的扩展机制，用于扩展 Vue 的全局功能和行为。
• 插件可以通过 Vue.use() 方法来注册到 Vue 实例中，从而为应用提供全局可用的功能。
• 插件通常包含了一些全局的功能或工具，如路由器、状态管理、数据验证、UI 库等。
• 插件可以访问 Vue 实例，并在其上注册全局方法、指令、混入等，以扩展 Vue 的功能。

简而言之，组件是用于封装 UI 元素和功能的可复用单元，而插件是用于扩展 Vue 的全局功能和行为的机制。在 Vue 应用中，我们既可以使用现有的组件来构建界面，也可以使用插件来扩展 Vue 的功能，从而实现更丰富和强大的应用。

15.Vue项目中你是如何解决跨域的呢?

使用代理（Proxy）：

• 在项目的配置文件（vue.config.js）中配置代理。通过将API请求代理到与前端应用程序相同的域，可以绕过浏览器的同源策略。
• 例如，如果你的Vue应用运行在 http://localhost:8080，而API服务器运行在 http://api.example.com，你可以配置代理将API请求发送到 /api 路径，然后让开发服务器将这些请求代理到正确的地址上。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

设置后端服务允许跨域请求：

• 如果你有权限修改后端服务的配置，可以在后端服务中配置允许跨域请求。这可以通过设置响应头中的 CORS（Cross-Origin Resource Sharing）来实现。
• 在Node.js中，你可以使用 cors 中间件来简化跨域请求的设置。

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

使用JSONP（仅限GET请求）：

• JSONP（JSON with Padding）是一种在不受同源策略限制的情况下获取数据的方法。它通过动态创建 <script> 标签来加载数据，因此只能用于GET请求。
• Vue本身不直接支持JSONP，但你可以使用库或手动创建JSONP请求来实现它。

CORS（跨域资源共享）：

• 如果后端支持CORS，Vue应用可以直接通过发送跨域请求来访问API。CORS是一种通过在HTTP响应头中添加特定字段来允许跨域请求的机制。

16.有写过自定义指令吗?自定义指令的应用场景有哪 些?

自定义指令是Vue.js中一种非常有用的功能，它允许你直接操作DOM。自定义指令的应用场景非常广泛，

总的来说，自定义指令可以用于几乎所有需要直接操作DOM或与DOM密切相关的场景，它为Vue.js提供了更大的灵活性和扩展性。

以下是一些常见的应用场景：

1. 操作DOM：自定义指令可以用于直接操作DOM元素，例如改变元素的样式、绑定事件、添加动画效果等。

2. 表单验证：你可以使用自定义指令来实现表单验证功能，例如检查输入的格式是否正确、比较两个输入字段的值是否相同等。

3. 权限控制：你可以使用自定义指令来根据用户的权限控制某些元素是否显示或可操作。

4. 懒加载：自定义指令可以用于实现图片懒加载，当图片进入视口时再加载图片资源，以提高页面性能。

5. 自定义输入框：你可以使用自定义指令来实现自定义的输入框功能，例如自动完成、密码强度提示等。

6. 集成第三方库：如果你需要在Vue.js项目中使用一些第三方库，但这些库没有Vue.js组件或插件，你可以使用自定义指令来集成这些库。

7. 响应式绑定：自定义指令可以用于实现与数据的响应式绑定，当数据发生变化时更新DOM。

8. 优化性能：有些情况下，直接操作DOM的性能可能比使用Vue.js的响应式系统更高效，你可以使用自定义指令来优化性能。

示例：

首先，在Vue.js应用程序中创建一个自定义指令文件，例如 focus.js：

// focus.js

// 定义一个名为v-focus的自定义指令
Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时调用
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

然后，在Vue组件中使用该自定义指令：

<!-- MyComponent.vue -->

<template>
  <div>
    <input v-focus>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

在这个示例中，我们创建了一个名为 v-focus 的自定义指令，并在 inserted 钩子中定义了聚焦元素的行为。在组件的输入框中使用了这个自定义指令，这样在该组件渲染时输入框就会自动聚焦。

17.Vue中的过滤器了解吗?过滤器的应用场景有哪些?

过滤器是Vue.js中一种用于数据处理的简单功能，可以在数据呈现到视图之前对其进行转换。过滤器通常用于格式化文本、处理日期、排序数据等。

这些内置过滤器可以通过管道符 | 与表达式一起使用。

下面是一些常见的过滤器的使用：

{{ expression | capitalize }}：将字符串的第一个字母转换为大写。

{{ expression | uppercase }}：将字符串全部转换为大写。

{{ expression | lowercase }}：将字符串全部转换为小写。

{{ expression | currency }}：格式化数字为货币格式。默认使用美元符号。

{{ expression | number }}：格式化数字。

{{ expression | date }}：格式化日期。

{{ expression | json }}：格式化JSON字符串。

自定义过滤器：

例如：

<!-- 格式化数字为货币格式 -->
{{ price | currency }}

<!-- 格式化日期 -->
{{ date | formatDate }}

// 在Vue实例中定义过滤器
Vue.filter('currency', function(value) {
  return '$' + value.toFixed(2);
});

Vue.filter('formatDate', function(value) {
  const date = new Date(value);
  return date.toLocaleDateString();
});

18.说说你对slot的理解?slot使用场景有哪些?

Slot（插槽）是Vue.js中一种非常强大和灵活的组件通信机制，它允许父组件向子组件传递内容，并在子组件中灵活地插入这些内容。Slot的作用类似于HTML中的占位符，可以让父组件动态地插入任意的内容到子组件中。

常见Slot的使用场景：

1. 内容分发：将父组件中的内容分发到子组件的特定位置。这样可以使子组件更加灵活，使父组件能够向子组件传递不同的内容。

2. 组件组合：通过Slot可以将不同的组件组合在一起，形成一个更复杂的组件。这样可以提高组件的复用性和可维护性。

3. 插件化开发：通过Slot可以使组件更加灵活和可配置，可以根据需要动态地插入不同的功能和布局。

4. 默认内容：可以在子组件中定义默认内容，当父组件没有提供内容时，将显示默认内容。

5. 作用域插槽：可以通过作用域插槽向插槽传递数据，这样可以在父组件中访问子组件的数据并进行处理。

6. 具名插槽：可以使用具名插槽来实现更复杂的组件通信，可以向不同的插槽传递不同的内容。

示例：

<!-- Button.vue -->
<template>
  <button class="button">
    <slot name="icon"></slot>
    <slot>Submit</slot>
  </button>
</template>

<script>
export default {
  name: 'Button'
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <Button>
      <i slot="icon" class="fas fa-check"></i>
      Submit
    </Button>
    <Button>
      <i slot="icon" class="fas fa-times"></i>
      Cancel
    </Button>
  </div>
</template>

<script>
import Button from './Button.vue';

export default {
  components: {
    Button
  }
}
</script>

在这个示例中，我们为 Button 组件添加了一个具名插槽，用于显示图标。在父组件中，我们使用 <i slot="icon"> 来为具名插槽传递图标内容。这样，我们就可以在 Button 组件中使用具名插槽，动态地插入图标到按钮中。

19.什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路

虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示的虚拟树结构，它是真实 DOM 的抽象，用于在内存中描述真实 DOM 的状态。虚拟 DOM 可以在内存中进行操作和计算，然后与实际的 DOM 进行比较，并只更新需要改变的部分，从而减少了对真实 DOM 的频繁操作，提高了性能。

实现一个简单的虚拟 DOM：

1. 定义虚拟 DOM 的结构：虚拟 DOM 是一个树状结构，每个节点表示一个真实 DOM 元素，包含标签名、属性、子节点等信息。

2. 实现创建虚拟 DOM 的函数：编写一个函数，用于根据传入的参数创建虚拟 DOM 对象。

3. 实现更新虚拟 DOM 的函数：编写一个函数，用于更新虚拟 DOM 对象的属性和子节点。

4. 实现比较虚拟 DOM 的函数：编写一个函数，用于比较两个虚拟 DOM 对象的差异，并返回需要更新的部分。

5. 实现渲染虚拟 DOM 的函数：编写一个函数，用于将虚拟 DOM 渲染成真实的 DOM。

// 定义虚拟 DOM 的结构
class VNode {
  constructor(tag, props, children) {
    this.tag = tag;
    this.props = props;
    this.children = children;
  }
}

// 创建虚拟 DOM 的函数
function createElement(tag, props, children) {
  return new VNode(tag, props, children);
}

// 更新虚拟 DOM 的函数
function updateElement(vnode, newProps, newChildren) {
  vnode.props = newProps;
  vnode.children = newChildren;
}

// 比较虚拟 DOM 的函数
function diff(oldVnode, newVnode) {
  // 省略比较逻辑
}

// 渲染虚拟 DOM 的函数
function render(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  
  const element = document.createElement(vnode.tag);
  for (const key in vnode.props) {
    element.setAttribute(key, vnode.props[key]);
  }
  vnode.children.forEach(child => {
    element.appendChild(render(child));
  });
  return element;
}

20.Vue项目中有封装过axios吗?主要是封装哪方面 的?

在Vue项目中通常会封装axios来进行HTTP请求的处理，主要目的是为了提高代码的可维护性和可复用性，并且统一处理请求和响应，加入一些公共的逻辑，例如请求拦截、响应拦截、错误处理等。

一些常见的axios封装方面：

1. 创建axios实例：封装一个axios实例，可以设置默认的请求配置，如baseURL、超时时间、请求头等。

2. 请求拦截器：在发送请求之前对请求进行处理，可以添加请求头、设置token等操作。

3. 响应拦截器：在接收到响应数据之后进行处理，例如统一处理响应数据、错误处理等。

4. 统一错误处理：封装一个统一的错误处理函数，用于处理请求过程中的错误，例如网络错误、服务器错误、接口异常等。

5. 统一loading处理：可以在请求开始时显示loading动画，请求结束时隐藏loading动画，提升用户体验。

6. 封装常用的请求方法：例如get、post、put、delete等请求方法，可以简化代码的书写。

7. 取消重复请求：避免用户频繁操作时发起多次重复请求，可以封装一个方法用于取消重复请求。

8. 统一管理接口地址：将接口地址集中管理，便于维护和修改。

示例：

// axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  // 添加token等操作
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

export default instance;

21.是怎么处理vue项目中的错误的?

一般就是在写代码过程中遇见可能会抛出错误的地方进行try...catch捕获。

然后开发过程中尽量把不确定的地方写上console。log（）进行控制台打印

遇到错误了到浏览器查看报错地点与原因

1. 错误捕获：

   • 使用Vue的try...catch结构来捕获可能发生的错误。
   • 利用Vue.config.errorHandler来自定义错误处理逻辑，这个配置函数会在全局范围内捕获所有的JavaScript错误。

2. 日志记录：

   • 使用控制台日志（console.log, console.error等）来记录错误信息。
   • 引入日志库，如log4javascript或sentry，以便更好地管理和分析错误日志。

3. 调试工具：

   • 使用浏览器的开发者工具进行调试，查看错误发生的上下文。
   • 使用Vue Devtools来检查组件状态和侦测性能问题。

4. 代码审查：

   • 通过代码审查来发现潜在的错误和改进代码质量。
   • 使用静态代码分析工具，如ESLint，来自动检测代码中的问题。

5. 单元测试和端到端测试：

   • 编写单元测试（使用Jest、Mocha等）来验证组件和函数的正确性。
   • 使用端到端测试框架（如Cypress、Nightwatch等）来模拟用户操作，确保应用在不同场景下的行为符合预期。

6. 错误报告：

   • 配置错误报告服务，如Sentry或BugSnag，自动收集和分析错误报告。
   • 提供用户友好的错误报告界面，让用户能够轻松地反馈问题。

7. 持续集成/持续部署（CI/CD）：

   • 在CI/CD流程中集成测试和部署，确保代码质量并在部署前捕获潜在的错误。

8. 性能监控：

   • 使用性能监控工具，如New Relic或Datadog，来跟踪应用的性能指标，及时发现性能瓶颈。

9. 错误修复和回滚：

   • 一旦识别出错误，迅速修复并进行回归测试。
   • 如果新部署引入了问题，准备好快速回滚到上一个稳定版本。

10. 用户通知：

    • 当错误影响到用户时，及时通知用户，并提供可能的解决方案或补救措施。

22.你了解axios的原理吗?有看过它的源码吗?

axios是一个基于Promise的HTTP客户端，用于在浏览器和Node.js中发起HTTP请求。它的主要特点包括可取消的请求、全局错误处理、请求和响应拦截器等。下面是axios的基本工作原理：

1. 创建axios实例：在使用axios时，可以创建一个axios实例，并配置一些默认参数，如baseURL、超时时间、请求头等。

2. 发送请求：通过axios实例的各种方法（如axios.get、axios.post等）发送请求。这些方法返回一个Promise对象，用于处理请求的响应。

3. 处理请求：在发送请求之前，axios会将请求参数转换为请求配置对象，并且在请求之前调用请求拦截器对请求进行处理，例如添加请求头、设置token等。

4. 发送请求：axios使用XMLHttpRequest或者fetch API来发送HTTP请求，并且返回一个Promise对象，用于处理请求的响应。

5. 处理响应：在接收到响应数据之后，axios会将响应数据转换为响应对象，并且在接收到响应数据之后调用响应拦截器对响应进行处理，例如统一处理响应数据、错误处理等。

6. 返回响应结果：axios最终会返回一个Promise对象，用于处理请求的响应结果。在使用axios的then()方法或者catch()方法时，可以处理请求成功和失败的情况。

至于axios的源码，它相对比较庞大，但基本原理是通过XMLHttpRequest或fetch API来发送请求，并通过Promise来处理异步操作。

23.vue要做权限管理该怎么做?

操作：

1. 定义权限规则：首先需要定义权限规则，明确不同用户或角色对应的权限。权限可以分为路由级别的权限、页面级别的权限、按钮级别的权限等。

2. 获取用户权限信息：在用户登录时，从后端获取用户的权限信息，并保存到前端，通常使用 Vuex 进行状态管理，将权限信息存储在全局的状态中。

3. 路由权限控制 ：根据用户的权限信息动态生成路由表，然后在路由跳转前进行权限验证，判断用户是否有权限访问目标页面。可以通过路由守卫实现，例如 beforeEach 守卫或者 beforeResolve 守卫。

4. 页面级别的权限控制：在页面渲染前，根据用户的权限信息动态展示页面的部分内容，例如菜单、按钮等。可以通过指令或者组件来实现。

5. 按钮级别的权限控制：在页面中根据用户的权限信息动态展示或隐藏按钮，使用户只能看到有权限操作的按钮。可以通过指令或者动态生成组件来实现。

6. 后端权限验证：前端权限控制只是用来提高用户体验和安全性，真正的权限验证还是应该在后端进行。因此，在前端进行权限控制时，也需要在后端进行相应的权限验证，防止用户绕过前端控制直接访问受限资源。

示例：

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue'),
    },
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue'),
      meta: { requiresAuth: true }, // 添加路由元信息，表示需要登录才能访问
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/Admin.vue'),
      meta: { requiresAdmin: true }, // 添加路由元信息，表示需要管理员权限才能访问
    },
  ],
});

// 路由守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isAuthenticated = store.getters['auth/isAuthenticated'];
  // 判断用户是否有访问权限
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin);

  if (requiresAuth && !isAuthenticated) {
    next('/login'); // 如果需要登录但用户未登录，则跳转到登录页面
  } else if (requiresAdmin && !isAuthenticated) {
    next('/login');
  } else {
    next(); // 否则放行
  }
});

export default router;

在这个示例中，我们使用路由元信息来标记需要登录或需要管理员权限才能访问的路由。然后通过路由守卫，在路由跳转前进行权限验证，根据用户的登录状态和权限信息进行跳转。

24.说说你对keep-alive的理解是什么?

<keep-alive> 是 Vue.js 提供的一个内置组件，用于缓存和管理组件的状态。当组件被包裹在 <keep-alive> 标签内时，组件会被缓存，而不是每次都重新渲染。

基本原理如下：

1. 当包裹的组件第一次被渲染时，Vue.js 会将其缓存起来，并且不销毁组件的状态。

2. 当组件被切换（例如通过路由切换到其他页面）时，Vue.js 会检查是否存在缓存的实例，如果存在，则直接从缓存中取出并重新激活（调用生命周期钩子函数），而不是重新创建一个新的实例。

3. 当组件被激活时，Vue.js 会调用组件的 activated 钩子函数，你可以在这个钩子函数中执行一些操作，例如重新加载数据等。

4. 如果 <keep-alive> 内部的组件被切换出去，Vue.js 会调用组件的 deactivated 钩子函数，你可以在这个钩子函数中执行一些清理操作，例如取消定时器等。

使用 <keep-alive> 可以有效地提高组件的性能和用户体验，特别是对于一些需要频繁切换但数据变化不频繁的组件，例如 Tab 切换、路由切换等场景。通过缓存组件的状态，可以减少不必要的重新渲染，提高页面加载速度和用户体验。

需要注意的是，<keep-alive> 会保留组件的状态，包括数据、DOM 状态等，因此不适合用于需要每次都重新渲染的场景。另外，由于缓存组件的实例，可能会占用一定的内存，因此需要根据实际情况合理使用。

25.你对SPA单页面的理解，它的优缺点分别是什么?如何实x现SPA应用呢

单页面应用（Single Page Application，SPA）是一种通过在一个页面中加载所有必要的HTML、CSS和JavaScript，并在用户与应用程序交互时动态更新该页面的方式来构建Web应用程序的方法。SPA通常使用前端框架（如Vue.js、React或Angular）来实现。

优点：

1. 用户体验好： 由于只有在页面加载时才需要加载整个应用程序，因此SPA应用程序通常加载速度快，用户感知的加载时间较短，提供了更流畅的用户体验。

2. 前后端分离： SPA使前端和后端的逻辑分离，前端负责处理用户界面和用户交互，后端负责处理数据和业务逻辑，使开发更加灵活和可维护。

3. 路由控制： SPA通过路由来管理页面的跳转和切换，使页面之间的导航更加简单和快速，不需要重新加载整个页面。

4. 缓存和性能优化： SPA可以缓存页面内容，减少了服务器的请求，提高了应用程序的性能。

5. 适合移动端开发： SPA适合用于移动端开发，可以通过响应式设计或者使用移动端UI库来适配不同尺寸的屏幕。

缺点：

1. SEO不友好： 由于大部分内容是通过JavaScript动态生成的，搜索引擎爬虫无法直接获取到页面的内容，对搜索引擎优化（SEO）不友好。

2. 初始加载时间长： 由于整个应用程序的代码需要一次性加载，因此初始加载时间较长，可能会导致用户在第一次访问时有较长的等待时间。

3. 内存占用较大： SPA会一直保持页面的状态，包括历史记录、数据等，可能会占用较多的内存，特别是对于复杂的应用程序。

4. 对浏览器的支持： 一些较旧的浏览器可能不支持或者支持不完全，需要考虑浏览器的兼容性问题。

如何实现SPA应用：

实现SPA应用通常使用前端框架来简化开发流程。以下是一般的实现步骤：

1. 选择合适的前端框架： 根据项目需求和团队技术栈选择合适的前端框架，例如Vue.js、React或Angular。

2. 项目初始化： 使用框架提供的CLI工具初始化项目，配置相关的开发环境和构建工具。

3. 设计路由： 设计应用程序的路由结构，定义不同路径对应的组件，并配置路由规则。

4. 组件开发： 开发应用程序的各个组件，包括页面组件、UI组件和逻辑组件等。

5. 数据交互： 使用框架提供的HTTP库或者其他数据交互工具来与后端进行数据交互，获取数据并展示在页面上。

6. 性能优化： 对页面进行性能优化，包括代码分割、懒加载、图片压缩等，提高页面加载速度和用户体验。

7. 测试和部署： 编写测试用例对应用程序进行测试，然后部署到服务器上，让用户访问。

总之，实现SPA应用需要综合考虑用户体验、性能、SEO等方面的因素，选择合适的技术和工具来完成开发。

26.SPA首屏加载速度慢的怎么解决?

1. 代码分割（Code Splitting）： 将应用程序分割成多个小块（chunk），只加载当前页面所需的代码，而不是一次性加载整个应用程序的代码。可以使用Webpack的代码分割功能或者使用路由懒加载来实现。这样可以减少初始加载时间，提高首屏加载速度。

2. 懒加载（Lazy Loading）： 将不是首屏所需的组件延迟加载，只有在需要时才加载。Vue.js、React和Angular等框架都提供了懒加载的支持，可以通过异步组件或者路由懒加载来实现。这样可以减少初始加载时间，提高首屏加载速度。

3. 优化图片加载： 图片是页面加载速度较慢的主要原因之一，可以通过以下方式来优化图片加载：

   • 使用适当的图片格式（如WebP）和压缩工具（如ImageOptim）来减小图片文件大小；
   • 使用懒加载技术延迟加载图片，只有当图片出现在视口中时才加载；
   • 使用响应式图片，在不同设备上加载不同尺寸的图片。

4. 预加载关键资源： 可以通过预加载（preload）和预渲染（prerender）关键资源来提高页面加载速度：

   • 使用 <link rel="preload"> 标签来预加载关键资源，例如字体文件、JavaScript文件等；
   • 使用 <link rel="prerender"> 标签来预渲染下一个页面，提前加载下一个页面的资源。

5. 服务端渲染（SSR）： 使用服务端渲染技术来生成首屏内容，将首屏内容直接输出到HTML文件中，减少客户端渲染时间。Vue.js、React和Angular等框架都提供了服务端渲染的支持。

6. 使用 CDN 加速： 使用 CDN（内容分发网络）来加速静态资源的加载，提高页面加载速度。将静态资源（如JavaScript、CSS、图片等）部署到CDN上，可以让用户从离自己最近的节点加载资源，减少网络延迟。

27.vue项目本地开发完成后部署到服务器后报404是什 么原因呢?

1. 路径问题：

   • 在本地开发时使用的相对路径可能在服务器上不适用。例如，静态资源（如CSS、JS、图片等）的引用路径在服务器上可能发生了变化，导致无法找到相应的资源。

2. 服务器配置问题：

   • 服务器可能没有正确配置来处理Vue项目的单页应用（SPA）路由。特别是当使用history模式的路由时，服务器需要正确配置以将所有路由请求重定向到index.html文件，否则服务器会返回404错误。

3. 编译问题：

   • 如果在部署前项目的编译或打包过程出现问题，可能会导致资源文件不完整或损坏，进而导致404错误。

4. 访问权限问题：

   • 服务器上的文件或目录权限设置可能不正确，导致服务器无法访问特定的资源文件。

5. 部署路径问题：

   • 部署到服务器的目录可能不正确，或者部署过程中某些文件没有被正确上传或复制到服务器。

6. 静态资源未正确处理：

   • 如果服务器配置没有正确处理静态资源，如未设置正确的MIME类型，或者静态资源的路径没有正确映射，也可能导致404错误。

解决这些问题的方法包括：

• 确保服务器上的路径设置与本地开发环境一致，或者使用绝对路径。
• 正确配置服务器（如Nginx或Apache）以支持Vue的history模式路由，通常需要设置try_files规则。
• 检查编译过程是否有错误，并确保部署的是成功编译后的文件。
• 检查文件权限，确保服务器有权限访问所有部署的文件。
• 确认部署路径正确，所有必要的文件都已上传到服务器。
• 调整服务器配置，确保静态资源可以被正确提供。

根据搜索结果，一个常见的解决方案是在Nginx配置文件中添加以下配置：

location / {
  root /path/to/your/dist;
  try_files $uri $uri/ /index.html;
}

这段配置会尝试根据请求的URI提供文件，如果找不到，则重定向到index.html，让Vue的前端路由接管。这样可以确保使用history模式的SPA在服务器上正常工作，而不会因为路由问题返回404错误。

28.SSR解决了什么问题?有做过SSR吗?你是怎么做的?

服务器端渲染（Server-Side Rendering，简称SSR）是一种技术，它解决了单页应用（SPA）在SEO和首屏加载性能方面的一些问题。下面是SSR解决的主要问题和实施SSR的基本步骤：

SSR解决的问题：

1. SEO优化：

   • 传统的SPA依赖于客户端渲染，这意味着搜索引擎爬虫无法解析JavaScript生成的内容，从而影响SEO。
   • SSR通过在服务器上生成完整的HTML页面，使得搜索引擎能够抓取和索引页面内容。

2. 首屏加载性能：

   • SSR可以减少首屏加载时间，因为它避免了客户端渲染所需的JavaScript全部下载和执行。
   • 用户可以更快地看到首屏内容，提升了用户体验。

3. 社交分享：

   • SSR确保了分享到社交网络的链接能够显示正确的预览内容，因为这些平台通常不会执行JavaScript。

实施SSR的步骤：

1. 选择框架：

   • 根据项目需求选择合适的支持SSR的框架，如Vue.js的Nuxt.js，React的Next.js等。

2. 初始化项目：

   • 使用相应的脚手架工具初始化SSR项目，例如使用nuxt create命令创建Nuxt.js项目。

3. 配置路由：

   • 在SSR项目中配置路由，指定哪些页面需要服务器端渲染。

4. 编写页面组件：

   • 创建页面组件，这些组件将在服务器端用于生成HTML。

5. 数据预取：

   • 实现数据预取（data fetching），确保在服务器端渲染时获取必要的数据。

6. 构建和部署：

   • 构建项目并部署到服务器。服务器需要配置为处理SSR请求，通常是通过Node.js服务器。

7. 优化：

   • 根据需要进行性能优化，如缓存、代码分割等。

8. 监控：

   • 监控SSR的性能和稳定性，确保在高流量下也能保持良好的性能。

29.vue3有了解过吗?能说说跟vue2的区别吗?

1. 性能优化：

   • Vue.js 3 在内部进行了许多性能优化，例如使用了Proxy代替了Object.defineProperty来实现响应式数据，提高了响应式系统的性能；
   • Vue.js 3 的虚拟DOM算法也进行了优化，减少了不必要的DOM操作，提高了渲染性能。

2. Composition API：

   • Vue.js 3 引入了Composition API，它是一种新的API风格，使得组件的逻辑可以更加灵活和可组合。与Vue.js 2 的Options API相比，Composition API更加强大和易于维护。

3. Typescript支持：

   • Vue.js 3 对Typescript的支持更加友好，它本身就是用Typescript编写的，并且提供了更好的Typescript类型支持。

4. 组件注入：

   • Vue.js 3 引入了提供/注入（provide/inject）API，用于更灵活地在组件之间共享数据和状态。

5. Teleport组件：

   • Vue.js 3 引入了Teleport组件，可以方便地将组件的内容渲染到DOM结构中的任意位置，例如弹出框、对话框等。

6. 模板指令语法的改进：

   • Vue.js 3 在模板指令语法上进行了一些改进和优化，使得模板更加简洁和易读。

7. Tree-shaking优化：

   • Vue.js 3 使用了ES Module来导入Vue的模块，使得打包工具可以更容易进行Tree-shaking优化，减小了最终的打包体积。

8. Composition API的使用：

   • 在Vue.js 2中，我们通常使用Options API来组织组件的逻辑。而在Vue.js 3中，可以选择使用Composition API来组织组件的逻辑，这样可以更灵活地组织组件的代码，并且提高了代码的可复用性和可维护性。