【DAY43-1】vue知识整理

Vue是一个流行的JavaScript框架，它具有简单易学、灵活高效的特点，在前端开发中受到广泛欢迎。Vue生态包括了众多的插件和工具，以下是几个常见的Vue生态：

Vuex：Vuex是为Vue.js应用程序开发的状态管理模式。它可以帮助你管理应用程序的所有组件的状态，并使用一些规则来维护该状态。

Vue Router：Vue Router是Vue.js官方的路由管理器，它允许开发人员在单页应用程序(SPA)中定义不同的页面和路由。

axios：axios是一个基于Promise的HTTP客户端，用于与后端API交互。Vue中经常使用axios进行数据请求。

Element UI：Element UI是一套基于Vue.js 2.0的UI组件库，提供了丰富的组件，包括表单、表格、对话框等等。

Vuetify：Vuetify 是一个专门为Vue.js设计的响应式UI库，以实现 Material Design 规范为目标，提供了一系列高质量的组件

Nuxt.js：Nuxt.js是一个基于Vue.js开发的通用应用框架，可用于快速创建服务端渲染的Vue.js应用程序。

Vue CLI：Vue CLI是官方提供的命令行工具，用于快速搭建和管理Vue项目。它支持简单快捷地创建项目、约定式的目录结构、webpack配置等，并且集成了大量的开箱即用的插件和功能。

Vue Test Utils：Vue Test Utils是Vue.js官方提供的测试实用程序库，可以帮助编写从单元测试到端到端测试的不同类型的测试用例。

Vuex ORM：Vuex ORM是一个通过将ORM 模式引入 Vuex 状态管理器来简化状态管理的轻松解决方法。

Storybook：Storybook是一个强大的UI组件开发环境，使你能够在隔离的环境中浏览、测试、文档化并交互式地开发组件，它也能够和Vue完美集成。

VuePress：VuePress是一个基于Vue.js开发的静态网站生成器，它专门为技术文档而设计，并提供了丰富的主题和插件。

Vue-i18n：Vue-i18n是一个国际化插件，用于在Vue.js应用程序中实现多语言支持。

VueDND：VueDND是一个基于Vue.js开发的拖放组件，可以用于实现交互式的拖放特效。

Buefy：Buefy是一个基于Bulma CSS框架和Vue.js的UI组件库，能够快速构建现代感的Web应用程序。

Vue-Multiselect：Vue-Multiselect是一个强大而易于使用的自定义下拉选择组件，可以实现单选和多选功能。

Vue Apollo：Vue Apollo 是一个用于在 Vue.js 应用程序中运行 GraphQL 查询的graphql库。

Vuetable-2：Vuetable-2是一个灵活的、可自定义的基于Vue.js 2.x的数据表格插件，它支持过滤、排序、分页等多种功能。

Vue Material：Vue Material 是一个 Material Design 风格的 UI 组件库，看起来非常现代和专业，并且对移动设备友好。

Vue-chartjs：Vue-chartjs是一个用户友好的、灵活的Vue.js 2.x轻量级封装组件，用于图表渲染。

vue-datetime-picker：vue-datetime-picker是一个日期时间选择器，用于Vue.js应用程序，在业务场景中非常实用。

VueLazyload：VueLazyload是一个轻量级的Vue.js 图片懒加载插件，可以实现图片的延迟加载。

Vue-awesome-swiper：Vue-awesome-swiper 是基于swiper封装的 Vue Component，令制作轮播图非常方便。

Vue-meta：Vue-meta 是用于管理应用程序头部标签和元数据的插件。在单页应用程序中，控制应用程序的元信息（如标题、关键字和描述）对于在搜索引擎结果中得到更高的排名至关重要。

vue-infinite-loading：vue-infinite-loading 是一款强大的无限滚动插件，可供Vue开发者使用。

Vuejs-datepicker：Vuejs-datepicker是Vue.js日期选择器组件，简单易用，并支持多种自定义选项。

Vue.js 3相对于Vue.js 2来说，不仅在语法和组件性能上进行了升级，其生态系统也更加完善。以下是Vue.js 3的一些生态：

Vuex 4：与Vue.js 3兼容的 Vuex 状态管理库。

Vue Router 4：专门为Vue.js 3开发的路由管理器，帮助您定义和管理单页应用程序中的页面和路由。

Vite： Vite 是一个快速并且简单上手、基于Rollup构建工具的前端开发服务器，被认为是Vue3项目的最佳选择。

Pinia：Pinia是一个新的基于函数式编程的状态管理库，使用 TypeScript 编写，它可以取代Vuex, 更严格遵循了 Vue.js 的响应规则。

Windi CSS：Windi CSS是一个类似Tailwind CSS的CSS框架，可与 Vue.js 3紧密集成，有助于快速构建出现代UI。

Element Plus：Element Plus 是一个由华佗天团维护，基于Element UI 2.x设计的开源 UI 组件库，可用于快速创建现代感的企业级应用程序。

VueUse：一个社区驱动的组合式函数和状态管理库，内置了许多常用工具函数和Vue组件。

Vue Test Utils Next：Vue.js官方测试实用程序库的下一代，提供整洁、简单的 API，可做到易于使用以及针对Vue.js特性的最佳高效测试。

Vue Final Modal：一个开箱即用的简单modal框架，支持多种自定义选项。

The Progressive
JavaScript Framework：一个新型的渐进式JavaScript框架，想要解决React或

Angular的困境，并具有以上两者的优点，因此备受期待。

Slidev：一个趋向Vue滑动演示生成器，确保建立现代感且交互性强的演示文稿。VueUse：一个社区驱动的组合式函数和状态管理库，内置了许多常用工具函数和Vue组件。

Vue Test Utils Next：Vue.js官方测试实用程序库的下一代，提供整洁、简单的 API，可做到易于使用以及针对Vue.js特性的最佳高效测试。

Vue Final Modal：一个开箱即用的简单modal框架，支持多种自定义选项。

The Progressive
JavaScript Framework：一个新型的渐进式JavaScript框架，想要解决React或

Angular的困境，并具有以上两者的优点，因此备受期待。

Slidev：一个趋向Vue滑动演示生成器，确保建立现代感且交互性强的演示文稿。

vuex store里有哪些属性方法？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。其核心是一个store，包含着应用中大部分的状态（state）。Vuex的store中包含着以下属性方法：

1. state：存储应用的状态数据。它可以是对象、数组或者是其他原始数据类型。

2. getters：获取存储在state中的数据。它们类似于是store的计算属性。

3. mutations：用于修改state中的数据。mutations必须是同步函数。

4. actions：用于提交mutations。actions可以异步地调用mutations，以处理复杂的业务逻辑中的异步操作。

5. modules：将store拆分为多个子模块。每个子模块都具有自己的state，getters，mutations和actions。

除此之外，Vuex store还包含以下辅助方法：

1. commit：用于提交mutations的方法。

2. dispatch：用于提交actions的方法。

3. subscribe：用于订阅store的变化。

4. replaceState：用于替换store中的数据。

5. registerModule和unregisterModule：用于动态注册和注销模块。

6. strict：一个布尔值，表示是否启用Vuex的严格模式。在严格模式下，任何对store的修改必须通过mutations进行，否则会抛出错误。

ES6语法学习（把每一个都写一遍）

        1.语法声明方式变化：

         let const声明指令

        2.Arrow function（箭头函数）

        3.解构赋值 rest

        4.字符串模板 

es6字符串模板的例子

当你使用字符串模板，你可以创建一个带有嵌入式表达式的字符串。使用反引号(``)或双引号(“”) 来将字符串值括起来，然后使用 ${ } 语法将表达式嵌入到字符串中。在表达式中，你可以使用任何有效的 JavaScript 表达式，可以引用变量、函数、对象等，然后它将计算表达式的结果，并将结果嵌入到字符串。这使代码更易于编写和阅读。

以下是一个简单的使用ES6字符串模板的例子：

const firstName = 'Alice';
const lastName = 'Smith';
const age = 35;
const message = `Hello, my name is ${firstName} ${lastName} and I'm ${age} years old.`;
console.log(message); // Output: Hello, my name is Alice Smith and I'm 35 years old.

在这个例子中，我们定义了三个变量：firstName，lastName和 age。然后，我们使用 message 常量来创建一个字符串，这个字符串包含了三个嵌入式表达式，它们使用 ${} 语法进行包裹。最后，我们使用 console.log 输出字符串。

可以看到，${firstName}, ${lastName}, 和 ${age} 会被替换成变量的值，结果字符串就是 Hello, my name is Alice Smith and I'm 35 years old.。 这是一个简单而强大的 ES6 字符串模板的例子，它使我们可以使用变量和表达式创建动态和可读性更高的字符串。

5.扩展操作符

6.promise、async、await

7.模块化、class

8.map、set

9.字符串和数组的一些方法（了解至少2种以上的数组排序算法）

10.基础js语法原理：new，bind，call，apply的实现原理

11.防抖节流的原理和写法

ES6核心原理（实现）

Vue.js是一款流行的JavaScript框架，它的核心原理是数据驱动以及组件化架构。

数据驱动意味着Vue.js提供了一种机制来自动更新DOM（文档对象模型）元素，无需手动去修改DOM元素。Vue.js使用了一种双向绑定的机制，通过将数据传递给Vue实例中的组件，任何组件中的数据变化都能够自动更新到视图（即DOM）中。这是通过使用虚拟DOM（Virtual DOM）来实现的。虚拟DOM是Vue.js使用的一种抽象的表示方法，它是一个JavaScript对象，用于描述真实DOM的状态。当数据发生变化时，Vue.js会计算出新的虚拟DOM并比较它与旧的虚拟DOM的差异，然后仅更新只需要更新的部分。

组件化架构使得Vue.js具有高度的可复用性和可扩展性。在Vue.js中，每个组件都是一个独立的实体，它拥有自己的状态和行为。通过将组件构建成树形结构，应用程序的整体结构和功能可以以更高层次的方式描述和组织。组件化架构在同时处理UI复杂度和应用程序组织方面变得更加容易，使应用程序的维护和测试变得更加简单。

在Vue.js的实现中，最核心的部分包括以下几个方面：

1. 依赖追踪系统：Vue.js使用依赖追踪来检测数据变化并更新视图。在Vue.js中，每个组件实例都维护了一个依赖追踪系统，用于跟踪其依赖的数据。当组件渲染时，Vue.js会记录该组件访问的所有数据，以确保它们在其响应式系统中被标记为已使用。当这些数据发生变化时，组件将知道重新渲染自身。

2. 模板编译系统：Vue.js使用模板编译器将模板转换为渲染函数。模板编译器将模板解析为抽象的语法树，并将其转换为渲染函数，以实现组件的渲染。Vue.js还可以使用运行时编译，以便在运行时动态编译和渲染组件。

3. 响应式系统：Vue.js使用一个响应式系统来追踪应用程序中的数据变化并实时更新视图。Vue.js内部使用了ES6 Object.defineProperty方法来为数据对象添加getter和setter来监听数据变化，从而触发视图的重新渲染。

4. 虚拟DOM渲染：虚拟DOM是一个轻量级的JavaScript对象，用于描述真实DOM的状态。Vue.js使用虚拟DOM来实现组件的渲染，通过Virtual DOM的比较算法，可以最小化DOM操作数量，以提高渲染性能。

Vue的DIFF算法：

指的是在进行Virtual DOM比较时，Vue会通过算法尽量减少页面重新渲染的节点数，提高页面渲染的性能。Vue的DIFF算法使用了一种叫做"双端比较"的策略，它可以同时从新旧两个虚拟节点列表的头部和尾部开始比较，找到最长的共同子序列，从而对需要更新的节点进行标记，尽量减少了页面上需要重新渲染的节点数。

双端比较的具体实现如下：

1.首先比较两个列表的头部节点，如果节点相同，则进行更新，否则比较尾部节点，如果相同则进行更新，否则进入下一步。

2.接下来比较新列表的头部节点与旧列表的尾部节点，如果相同则进行更新，否则比较旧列表的头部节点与新列表的尾部节点，如果相同则进行更新。

3.如果以上比较都没有找到相同的节点，则循环遍历新列表中的每个节点，查找是否有和旧列表相同的节点，如果有则进行更新，如果没有则插入新节点。

虽然Vue的DIFF算法可以减少页面重绘的次数，但是也有一定的性能损耗，因为在进行节点的比较时需要寻找最长的共同子序列，这个过程需要花费一定的时间。因此，在实际开发中，需要根据页面复杂度和更新频率等因素综合考虑是否使用Vue的DIFF算法。

 虚拟dom是什么

虚拟 DOM （Virtual DOM）是指通过 JavaScript 对象来描述真实的 DOM 结构，并通过比较新旧两个虚拟 DOM 之间的差异来批量更新真实 DOM，从而提高 DOM 操作的效率和性能。

在 Web 开发中，数据的变化经常会带来 DOM 的改变，而频繁的 DOM 操作会导致页面的重排和重绘，影响渲染性能和用户体验。为了解决这个问题，Virtual DOM 的出现为开发者提供了一种更高效的方式。使用虚拟 DOM，我们可以先将更新的数据通过生成新的虚拟 DOM 树来描述修改后的 DOM 结构，然后通过比较新旧两个虚拟 DOM 树之间的差异，仅更新发生变化的部分，最终仅仅操作必要的部分，减少了浏览器重排、重绘的开销，提高了渲染性能和用户体验。

虽然虚拟 DOM 需要额外的计算和操作，但是由于它仅包含 DOM 树的数据结构，相比直接操作真实 DOM，虚拟 DOM 的计算效率更高，更新速度更快。而且通过 diff 算法优化更新，可以避免了大量无意义的 DOM 操作。

当然，在实际开发中，虚拟 DOM 不仅仅是最终的解决方案。它常常是一种解决复杂组件维护和性能问题的手段，为了更好的性能表现，它经常会与其他优化策略进行配合。