前端总结——Vue

巴拉巴拉巴7788

已于 2023-07-11 09:48:50 修改

阅读量253

点赞数 1

文章标签： vue.js 前端面试

于 2023-06-24 23:11:17 首次发布

本文链接：https://blog.csdn.net/weixin_47661354/article/details/131304721

版权

文章目录

1. 讲讲Vuex的使用方法。
2. Vue的生命周期（必背）
3. Vue父子组件生命周期触发顺序是怎样的？
4. 讲讲Vue双向绑定原理。
5. MVVM和MVC区别是什么？
6. Vue组件间通信方式有哪些？
7. computed和watch区别是什么？
8. v-for和v-if同时使用有问题吗？
9. 讲讲前端路由原理。比较一下history和hash这两种路由。
10. 讲讲Vue的虚拟DOM，原理，好处是什么？相对于手动操作DOM，性能更好吗？
11. 说说Vue的keep-alive使用及原理。
12. Vue.nextTick的实现？
13. 讲讲Vue diff算法。
14. Bus和Vuex
- 14.1. Bus（事件总线）
- 14.2. Vuex

1. 讲讲Vuex的使用方法。

Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用程序的状态。它提供了一个状态容器，使得不同组件之间可以共享和响应状态的变化。下面是 Vuex 的使用方法的概述：

安装 Vuex：首先，在你的 Vue.js 项目中安装 Vuex。可以使用 npm 或 yarn 进行安装：

npm install vuex

或

yarn add vuex

创建 Vuex Store：在你的应用程序中创建一个 Vuex Store，它包含了你想要管理的状态和相关的操作。一个基本的 Vuex Store 包含 state、mutations、actions 和 getters：

state 统一定义管理公共数据
mutations: 使用它来修改数据
getters: 类似于vue中的计算属性
actions: 类似于methods,用于发起异步请求,比如axios
modules: 模块拆分

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { // 存放数据 和data类似
  },
  mutations: { // 用来修改state和getters里面的数据
  },
  getters: { // 相当于计算属性
  },
  actions: { // vuex中用于发起异步请求
  },
  modules: {// 拆分模块
  }
})

在 Vue 组件中使用 Vuex：在需要使用状态的 Vue 组件中，可以通过以下方式来使用 Vuex 的状态和操作：

在模板中获取状态：使用计算属性或者 mapState 辅助函数来获取状态值。
在方法中触发状态变化：通过提交 mutations 或分发 actions来触发状态的变化。
在模板中展示状态：使用{{ ... }}插值语法来显示状态。
在计算属性中处理状态：使用 mapGetters 辅助函数或者直接访问 Vuex 的 getters 来处理状态。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

在根组件中挂载 Vuex Store：在根组件中，通过将 Vuex Store 实例注入到 Vue 实例中，使得整个应用程序都可以访问和使用 Vuex 的状态。

import Vue from 'vue'
import store from './store'

new Vue({
  store,
  // ...
}).$mount('#app')

这是一个简单的 Vuex 的使用方法的概述。Vuex 还提供了更多高级的功能，如模块化管理、插件扩展等，可以根据具体的应用需求进行更深入的学习和使用。

2. Vue的生命周期（必背）

Vue实例创建会有初始化过程，这个过程中会运行叫做生命周期的钩子函数，方便用户在特定阶段能有机会加入自己的代码。总共可以分为八个阶段：创建前后，载入前后，更新前后，销毁前后；创建有beforecreate，created；载入有beforemount，mounted；更新有beforeUpdate，Updated；销毁有beforeDestory，destoryed。

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的属性和方法都不能被访问。
created：在实例创建完成后被立即调用。在这个阶段，可以访问实例的属性和方法，但是无法访问到 DOM。
beforeMount：在挂载开始之前被调用。在这个阶段，模板编译已完成，但是尚未将模板渲染到 DOM 中。
mounted：在挂载完成后被调用。在这个阶段，实例已经被挂载到 DOM 中，可以访问到 DOM 元素。
beforeUpdate：在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。在这个阶段，可以对数据进行修改。
updated：在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。这个阶段避免对数据进行修改，以免导致无限循环的更新。
beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用，可以进行必要的清理操作。
destroyed：在实例销毁之后被调用。在这个阶段，实例所有的指令和事件监听器都被解除，所有的子实例也都被销毁。

此外，Vue 还提供了一些其他的生命周期钩子函数，用于处理错误、异步请求等情况：

errorCaptured：在子孙组件的任意生命周期中捕获错误时被调用。
activated：在 keep-alive 组件激活时调用。
deactivated：在 keep-alive 组件停用时调用。

这些生命周期钩子函数可以让开发者在组件不同阶段执行特定的操作，例如初始化数据、访问 DOM、发送网络请求、清理资源等。

3. Vue父子组件生命周期触发顺序是怎样的？

在 Vue 中，父子组件的生命周期钩子函数会按照一定的顺序触发。下面是父子组件生命周期钩子函数的触发顺序：

父组件：

beforeCreate
created
beforeMount
子组件的 beforeCreate 和 created
mounted
子组件的 beforeMount 和 mounted

子组件：

beforeCreate
created
beforeMount
mounted

可以看到，在父组件的生命周期中，会先触发自身的 beforeCreate 和 created 钩子函数，然后是子组件的 beforeCreate 和 created 钩子函数，最后父组件的 beforeMount 和 mounted 钩子函数会触发，再次包含了子组件的 beforeMount 和 mounted 钩子函数。

这种顺序保证了在父组件的生命周期中，子组件已经完成了创建和初始化阶段，但还未挂载到 DOM 上。而在父组件的挂载阶段，子组件也会被挂载到 DOM 上。

需要注意的是，在更新阶段（即组件数据更新时），父组件和子组件的更新钩子函数会根据更新顺序依次触发。父组件先更新，然后子组件更新。而在销毁阶段，父组件的销毁钩子函数会先于子组件的销毁钩子函数触发。

理解父子组件生命周期的触发顺序对于合理地处理组件之间的数据流和生命周期的交互非常重要，可以确保在正确的时机执行相关的操作和逻辑。

4. 讲讲Vue双向绑定原理。

Vue.js 的双向绑定是其核心特性之一，它使得数据的变化可以自动反映在视图中，同时用户在视图中的输入也能够更新数据。
比如说，当在输入框输入文字时，vue会检测到数据的变化，然后更新对应的视图。同样，如果你通过代码修改了数据，那么vue也会自动更新视图，其原理是通过数据劫持和发布订阅模式实现的。
首先，Vue通过Object.defineProperty()方法对数据进行劫持，监听数据的变化，并通过getter和setter方法对数据进行读写。
其次，Vue通过发布订阅模式，维护了一个订阅者数组，当数据发生变化时，Vue会通知所有订阅者进行更新。因此，当用户在页面上进行修改时，Vue会更新对应的数据，并更新所有订阅者更新视图，同时当数据发生变化时，Vue也会更新对应的视图，通过这样的机制，Vue实现了双向数据绑定，使得数据和视图的变化可以互相影响。

注：订阅者是Vue中的一个概念，它是一个用于管理更新视图的对象，当数据发生变化时，Vue会通知所有的订阅者进行更新，在Vue中，每一个挂载到视图上的组件，或者每一个watcher，都可以被看成一个订阅者，他们订阅了某一个数据的变化，并等待数据发生变化时进行更新，订阅者是Vue实现双向数据绑定的关键组成部分，管理着数据和视图之间的关系，保证了数据的变化能够及时反应到视图上
下面是 Vue 双向绑定的工作原理：

响应式数据：Vue 使用了 Object.defineProperty() 方法来劫持（或拦截）对象的属性访问，实现了数据的响应式。在创建 Vue 实例时，Vue 会递归地将数据对象的所有属性转换为 getter/setter，从而实现对数据的监听。
模板编译：当 Vue 实例创建完成后，Vue 会解析模板，并将模板编译为渲染函数。在模板中，Vue 使用了特殊的指令（如 v-model）来建立视图与数据之间的绑定关系。
视图渲染：在模板编译后，Vue 会根据初始数据进行视图的首次渲染。视图中使用了指令的地方，会生成对应的事件监听器和更新函数。
数据更新：当数据发生变化时，Vue 会触发相应属性的 setter 方法，通知依赖该数据的更新函数进行更新。这样，数据的变化会自动反映在视图中。
视图交互：当用户与视图进行交互，例如输入表单内容，Vue 会根据指令生成的事件监听器捕获用户的输入，并通过对应的更新函数将用户输入的值更新到数据对象中。
数据同步：通过数据的变化和视图的交互，Vue 实现了数据与视图之间的双向同步。数据的变化会自动更新视图，用户的输入也会自动更新数据。

Vue 的双向绑定通过依赖追踪和数据劫持来实现。Vue 使用一个称为“响应式依赖追踪器”的系统来追踪属性和视图之间的依赖关系，当属性被访问或修改时，会自动触发相应的更新操作。这样，Vue 实现了一个高效且灵活的双向绑定机制，使得开发者能够更轻松地处理数据与视图之间的交互。

5. MVVM和MVC区别是什么？

MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的软件架构模式，用于组织和分离应用程序的不同组成部分。它们之间的区别如下：

角色和职责分配：

MVC：MVC 模式中，Model（模型）代表数据和业务逻辑，View（视图）负责展示数据给用户，Controller（控制器）处理用户输入并更新模型和视图。Controller 充当中间人，负责协调 Model 和 View 之间的交互。
MVVM：MVVM 模式中，Model 和 View 的职责与 MVC 类似，但引入了 ViewModel。ViewModel 充当数据绑定的中间人，它将 Model 的数据绑定到 View 上，并监听 View 的变化来更新 Model。ViewModel 通过数据绑定实现了自动同步，使得 View 和 Model 保持同步。

数据绑定：

MVC：在传统的 MVC 模式中，数据绑定通常是手动实现的，Controller 负责将数据传递给 View，而 View 更新时需要手动更新数据。
MVVM：MVVM 引入了双向数据绑定的概念，通过数据绑定机制实现了自动的数据同步。当 ViewModel 的数据发生变化时，View 会自动更新，而当用户在 View 中进行输入或交互时，ViewModel 会自动更新对应的数据。

测试性：

MVC：由于 Model 和 View 的耦合度较低，因此单独测试它们相对较容易。Controller 负责协调逻辑，可能需要更多的集成测试。
MVVM：由于 ViewModel 负责将数据绑定到 View 上，ViewModel 的测试相对较容易。同时，由于数据绑定的特性，ViewModel 和 View 之间的交互也更容易进行单元测试。

总体而言，MVVM 模式相较于 MVC 模式更加关注数据绑定和自动同步，通过引入 ViewModel 层实现了更紧密的关联。MVVM 模式使得开发者能够更轻松地处理数据和视图之间的交互，并提高了代码的可维护性和测试性。

6. Vue组件间通信方式有哪些？

在 Vue 中，组件间通信是非常重要的，特别是在复杂应用程序中。以下是 Vue 中常用的组件间通信方式：

Props / $emit：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。
$emit / $on：使用 Vue 的事件机制，子组件通过 $emit 触发自定义事件，父组件通过 $on 监听事件并获取数据。
$refs：父组件通过ref给子组件赋予一个唯一的引用标识符，然后可以通过 $refs 来直接访问子组件的属性和方法。
Vuex：Vuex 是 Vue 的官方状态管理库，用于管理应用程序的状态。组件可以通过提交 mutations或派发actions来改变共享状态，并通过 getters 获取状态的值。
EventBus：创建一个独立的 Vue 实例作为事件总线，用于在组件之间进行通信。组件通过事件总线来触发和监听事件，实现数据的传递和交互。
Provide / Inject：祖先组件通过provide提供数据，然后子孙组件通过inject来注入提供的数据。这种方式可以实现祖先组件向子孙组件的数据传递。
Global Event Bus：创建一个独立的 Vue 实例作为全局事件总线，在任何组件中都可以使用。组件通过全局事件总线来触发和监听事件，实现跨组件的通信。
Attribute / Class / Style 绑定：父组件可以通过属性绑定、类绑定或样式绑定，将数据传递给子组件，子组件可以根据传递的数据来更新自身的属性、类或样式。

这些组件间通信方式各有优劣，并适用于不同的场景。根据具体的应用需求和组件关系，选择合适的通信方式可以有效地实现组件之间的数据传递和交互。

7. computed和watch区别是什么？

computed 是一个计算属性，它依赖于其他响应式数据，并根据这些数据进行计算得出一个新的值。计算属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。计算属性的特点是具有缓存性，只有在相关的响应式数据变化时才会重新计算，而在多个模板中多次访问计算属性，实际上只会执行一次计算。

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

在上述代码中，fullName 是一个计算属性，它根据firstName和lastName计算得出一个新的值，即全名。每当firstName或 lastName 发生变化时，fullName 会自动重新计算。

watch 是一个观察属性，它用于监听某个特定的数据变化，并在数据变化时执行相应的操作。可以通过 watch 来响应数据的变化，执行异步操作、请求数据、进行复杂的计算等。

<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('New message:', newValue);
      console.log('Old message:', oldValue);
    }
  }
};
</script>

在上述代码中，watch 监听 message 数据的变化，当 message 发生变化时，会触发相应的操作，这里是打印新旧消息值。

computed和 watch的区别如下：

computed 是计算属性，具有缓存性，只有在依赖的响应式数据变化时才会重新计算。适用于根据其他数据计算出一个新的值的场景。
watch 是观察属性，用于监听特定数据的变化，并在数据变化时执行相应的操作。适用于需要执行异步操作、复杂计算或监控特定数据变化的场景。

8. v-for和v-if同时使用有问题吗？

v-for 指令：
用法：v-for="item in items"
作用：循环遍历数组或对象，生成重复的元素或组件。

<div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

解释：上述示例中，通过 v-for 循环遍历 items 数组，生成对应数量的 <li>元素，每个元素都绑定了数组中对应项的数据。需要注意的是，循环时需要为每个元素提供一个唯一的 :key 属性，以优化性能和避免警告。

v-if 指令：
用法：v-if="condition"
作用：根据条件判断，决定是否渲染或显示某个元素或组件。

<div>
  <p v-if="isShowMessage">{{ message }}</p>
</div>

解释：上述示例中，根据 isShowMessage 的值决定是否渲染 <p>元素。当 isShowMessage 为 true 时，元素会被渲染并显示相应的消息；当 isShowMessage 为 false 时，元素不会被渲染，从而实现条件渲染。

在官方文档中明确指出v-for和v-if不建议一起使用。

原因：v-for的优先级比v-if高，一起使用会造成性能浪费。
解决方案:

把v-if放在v-for的外层
把需要v-for的属性先从计算属性中过滤一次

<template>
  <div class="hello">
    <!-- 2. 然后这里去循环已经被过滤的属性 -->
     <div  v-for="(item) in ListArr" :key="item" ></div>
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]
    }
  },
  computed:{
    //1. 在computed里先做好判断，这里过滤的成本远比v-if的成本低
    ListArr(){
        return this.list.filter((_,index) => index === 1)
    }
  }
};
</script>

<style scoped>
</style>

链接：https://juejin.cn/post/7106437556354416677

v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for。

9. 讲讲前端路由原理。比较一下history和hash这两种路由。

前端路由是一种在单页面应用（SPA）中进行页面切换和导航的技术。它通过改变 URL 而不刷新整个页面，从而实现在不同视图之间的切换和页面状态的管理。
前端路由的实现原理涉及两个主要的技术：Hash 模式和 History 模式。

Hash 模式：

Hash 模式使用 URL 中的锚点（#）来模拟路由。例如：http://example.com/#/home。
实现原理：当 URL 中的锚点发生变化时，浏览器不会向服务器发送请求，而是通过监听 hashchange 事件来触发相应的路由处理逻辑。
优点：
兼容性好，支持所有浏览器。
简单易实现，无需后端服务器支持。
缺点：
URL 中包含冗余的 # 符号，不够美观。
锚点变化不会被记录到浏览器的访问历史中，导致无法进行前进和后退操作。
对 SEO 不友好，搜索引擎难以获取到页面内容。

History 模式：

History 模式使用 HTML5 提供的 History API，通过修改浏览器的历史记录来实现路由切换。例如：http://example.com/home。

实现原理：通过调用 pushState() 或 replaceState() 方法来修改浏览器的历史记录，并使用监听 popstate 事件来响应历史记录的变化。
优点：
URL 美观，不包含冗余的符号。
支持浏览器的前进和后退操作。
对 SEO 更友好，搜索引擎可以获取到页面内容。
缺点：
兼容性较差，需要浏览器支持 HTML5 的 History API。
在刷新页面时，如果服务器未正确配置，会导致 404 错误。

需要注意的是，无论是 Hash 模式还是 History 模式，实际路由的处理和页面切换是通过 JavaScript 进行的，而不是由服务器处理。前端路由库（如 Vue Router、React Router 等）提供了封装的 API 和路由配置，简化了路由的使用和管理。

在使用前端路由时，可以根据项目的需求和兼容性要求选择适合的路由模式。对于兼容性要求高且不需要支持浏览器的前进和后退操作的项目，可以选择使用 Hash 模式。而对于较新的浏览器环境且需要支持浏览器的前进和后退操作的项目，可以选择使用 History 模式。

10. 讲讲Vue的虚拟DOM，原理，好处是什么？相对于手动操作DOM，性能更好吗？

Vue 使用虚拟 DOM（Virtual DOM）来高效地更新和渲染页面。虚拟 DOM 是一个轻量级的 JavaScript 对象树，它是对真实 DOM 的抽象表示。

虚拟 DOM 的工作原理如下：

Vue 组件中的数据发生变化时，Vue 会生成一个新的虚拟 DOM 树。
Vue 会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出差异（变更的部分）。
Vue 会根据差异，最小化地更新真实 DOM，只修改发生变化的部分，而不是整个页面。

虚拟 DOM 的好处包括：

提升性能：相对于直接操作真实 DOM，虚拟 DOM 可以减少对真实 DOM 的直接操作次数。它通过批量更新和最小化操作，将多个 DOM 更新合并为一次，减少了页面的重绘和回流，提高了性能。
简化开发：通过使用虚拟 DOM，开发者可以将注意力集中在数据的变化和业务逻辑上，而无需手动操作 DOM 元素，简化了开发过程。
跨平台支持：虚拟 DOM 不仅可以在浏览器环境中使用，也可以在其他平台，如服务器端渲染、移动端开发中使用，提供了更好的跨平台支持。

虚拟 DOM 相对于手动操作 DOM 的性能更好，主要体现在以下方面：

减少直接操作 DOM 的次数：虚拟 DOM 通过批量更新和最小化操作，将多个 DOM 更新合并为一次，减少了页面的重绘和回流的次数。
批量处理和异步更新：虚拟 DOM 会将多个数据变化合并到一次更新中，避免了频繁的 DOM 操作。同时，虚拟 DOM 也可以使用异步更新策略，将更新操作放在下一个事件循环中进行，减少了阻塞和卡顿的可能性。
高效的差异计算和渲染：虚拟 DOM 在比较新旧两棵树时，可以高效地找出差异部分，只更新需要更新的部分，减少了无效的操作，提高了渲染性能。

总结来说，虚拟 DOM 在 Vue 中的应用可以提升性能、简化开发，并具有良好的跨平台支持。相对于手动操作 DOM，虚拟 DOM 的性能更好，通过优化更新和渲染过程，减少了不必要的 DOM 操作和页面重绘，提高了应用的性能和响应速度。

11. 说说Vue的keep-alive使用及原理。

<keep-alive> 是 Vue 提供的一个内置组件，用于在组件之间缓存和保持状态，以避免频繁地创建和销毁组件。它可以有效地提升应用性能并改善用户体验。
使用 <keep-alive> 组件时，需要将需要缓存的组件包裹在 <keep-alive> 标签内，并通过name属性为每个组件指定一个唯一的名称。

<keep-alive>
  <component-a></component-a>
</keep-alive>

<keep-alive> 组件的原理如下：

首次渲染：当包裹在<keep-alive>内的组件首次渲染时，会被缓存起来，同时被销毁（即从 DOM 中移除）。
组件切换：当被缓存的组件需要再次渲染时（如组件切换），不会重新创建新的组件实例，而是从缓存中找到对应的组件实例，并将其重新挂载到 DOM 上，从而避免了组件的重新创建和初始化过程。
缓存管理：缓存的组件实例被存储在内存中，通过一个缓存对象进行管理。当组件不再需要被缓存时，可以通过钩子函数deactivated来进行清理操作。

使用<keep-alive>组件的好处包括：

提升性能：通过缓存已经渲染过的组件，避免了重复的创建和销毁过程，减少了组件的初始化和渲染开销，提升了应用的性能和响应速度。
保持组件状态：被缓存的组件会保持其状态，包括数据、DOM 状态和用户输入等，不会因为组件的切换而丢失。这对于需要保持用户操作状态的场景非常有用，如表单填写、分页浏览等。
减少网络请求：在某些情况下，组件的切换可能会触发网络请求，通过缓存已经渲染过的组件，可以避免不必要的网络请求，提升用户体验和节省带宽。

需要注意的是，<keep-alive> 组件并不是适用于所有情况的解决方案，特别是对于一些占用大量内存或需要实时更新的组件，不宜过度使用缓存。因此，在使用 <keep-alive> 组件时，需要根据具体的业务场景和性能需求进行评估和调整。

12. Vue.nextTick的实现？

Vue.js中的Vue.nextTick方法用于在DOM更新之后执行回调函数，以确保在修改数据后，DOM已经更新完毕。它的实现原理如下：

nextTick方法接收一个回调函数作为参数，并将该回调函数添加到一个队列中。
在浏览器环境中，nextTick会优先使用MutationObserver来监听DOM的变化。当数据变化触发DOM更新时，nextTick会利用MutationObserver`监听DOM变化的回调函数来触发队列中的回调函数执行。
如果浏览器不支持MutationObserver，则会降级使用setTimeout进行延迟执行。在这种情况下，nextTick会使用微任务（如Promise、MutationObserver或setImmediate）或宏任务（如setTimeout）来延迟执行队列中的回调函数。
在执行回调函数之前，nextTick会检查是否存在嵌套的nextTick调用，如果有，则会将嵌套的nextTick回调函数添加到当前队列的末尾。

通过以上实现，Vue能够在数据变化后，等待DOM更新完成后执行回调函数，以便确保在修改数据后进行DOM相关的操作。这样可以避免在DOM还未更新完毕时进行操作，保证操作的准确性和一致性。

13. 讲讲Vue diff算法。

Vue使用虚拟DOM和Diff算法来高效地更新DOM。Diff算法是一种比较两个虚拟DOM树的算法，以确定需要更新的最小操作集，从而减少对真实DOM的操作。

下面是Vue中Diff算法的基本工作原理：

创建虚拟DOM树：在每次数据变化时，Vue会根据模板生成新的虚拟DOM树，并与之前的虚拟DOM树进行比较。
Diff过程：Vue使用Diff算法对比新旧虚拟DOM树，找出两者之间的差异。

同层比较：Vue首先比较新旧虚拟DOM树的根节点，如果根节点相同，再逐层比较子节点。
更新节点：在比较过程中，如果发现相同节点（相同的标签、相同的key），则只需要更新节点的属性和子节点，无需重新创建该节点。
删除节点：如果在新虚拟DOM树中不存在某个节点，在旧虚拟DOM树中存在该节点，则需要删除该节点及其对应的真实DOM。
创建节点：如果在旧虚拟DOM树中不存在某个节点，在新虚拟DOM树中存在该节点，则需要创建该节点及其对应的真实DOM。

执行更新：根据Diff算法的结果，Vue会根据最小操作集合，将变化应用到真实的DOM树上，进行局部更新，以尽量减少对整个DOM的操作。

通过使用虚拟DOM和Diff算法，Vue能够在数据变化时高效地更新DOM，只更新需要更新的部分，从而提高性能和减少不必要的操作。这种机制使得Vue能够提供响应式的数据绑定和高效的视图更新。

14. Bus和Vuex

Bus和Vuex都是在Vue.js中用于状态管理的概念，但它们有一些不同之处。

14.1. Bus（事件总线）

Bus是一种简单的事件传递机制，可以用于组件之间的通信。它是基于Vue实例的事件系统，通过创建一个全局的Vue实例作为事件中心，组件可以通过该实例来触发和监听事件。组件之间可以通过事件总线来进行通信，传递数据和触发特定的操作。

示例代码：

// 创建事件总线
const bus = new Vue();

// 在组件中触发事件
bus.$emit('eventName', data);

// 在组件中监听事件
bus.$on('eventName', (data) => {
  // 处理事件
});

Bus的优点是简单易用，适用于简单的组件通信场景。但是，由于事件是通过字符串进行传递，缺乏类型安全和明确的数据流，因此在大型应用程序中可能会导致事件名称冲突和难以维护。

14.2. Vuex

Vuex是Vue.js的官方状态管理库，提供了一种结构化的、响应式的方式来管理应用程序的状态。Vuex将应用程序的状态存储在一个单一的源（store）中，并通过定义和触发mutations来修改状态，使用getters来获取状态，以及通过actions来处理异步操作。

Vuex的优点是提供了一个明确的数据流和一致的状态管理机制，适用于中大型应用程序。它支持模块化组织状态，具有强大的工具和开发者工具支持，使得状态管理更加可控和可预测。

示例代码：

// 创建Vuex store
const store = new Vuex.Store({
  state: {
    // 应用程序的状态
  },
  mutations: {
    // 修改状态的方法
  },
  getters: {
    // 获取状态的方法
  },
  actions: {
    // 处理异步操作的方法
  }
});

// 在组件中使用状态
this.$store.state.property;
this.$store.commit('mutationName', payload);
this.$store.dispatch('actionName', payload);

总结来说，Bus适用于简单的组件通信场景，而Vuex适用于管理大型应用程序的状态。根据具体的需求和应用程序的规模，可以选择适合的状态管理机制。

巴拉巴拉巴7788

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端总结——Vue

注：订阅者是Vue中的一个概念，它是一个用于管理更新视图的对象，当数据发生变化时，Vue会通知所有的订阅者进行更新，在Vue中，每一个挂载到视图上的组件，或者每一个watcher，都可以被看成一个订阅者，他们订阅了某一个数据的变化，并等待数据发生变化时进行更新，订阅者是Vue实现双向数据绑定的关键组成部分，管理着数据和视图之间的关系，保证了数据的变化能够及时反应到视图上。需要注意的是，在更新阶段（即组件数据更新时），父组件和子组件的更新钩子函数会根据更新顺序依次触发。父组件先更新，然后子组件更新。
复制链接

扫一扫