博客网

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex有5种属性分别是State , Getter , Mutation , Action , Module (就是mapAction)

VueRouter的路由模式有三种：hash模式、history模式和abstract模式。

1：Hash 模式（默认）：

在URL中的路径部分以 # 符号开头。

比如：http://www.xxx.com/#/home。

在hash模式下，URL的hash部分的改变不会导致浏览器向服务器发送请求，可以通过监听hashchange事件来触发相应的路由变化。

2：History 模式：

通过使用HTML5的pushState和replaceState方法来改变URL，不再使用hash作为URL的一部分。

比如：http://www.xxx.com/home。

在history模式下，URL的改变会导致浏览器向服务器发送请求，因此需要服务器的支持来处理这些URL。

3：Abstract 模式：

在无法使用浏览器的history模式和hash模式时，可以选择使用abstract模式。在abstract模式下，只会改变应用的内存状态，并不会改变URL。这种模式适合于在非浏览器环境中使用VueRouter，比如在Node.js中渲染Vue应用。

在Vue.js中，delete操作符和Vue.$delete方法都用于删除数组中的元素，但它们之间有一个关键的区别：

delete操作符：这是JavaScript的原生操作符，用于删除对象的属性。当使用它来删除数组中的元素时，它不会触发Vue的响应式更新机制。也就是说，数组的长度并不会改变，如果后续继续访问已删除元素的索引，会得到undefined。

Vue.$delete方法：这是Vue实例提供的一个方法，用于删除数组中的元素，并确保更新视图。这是一个Vue 2.x的方法，在Vue 3.x中应使用Vue.delete。

总结：

delete 数组自带的方法，删除后对应值变为 empty/undefined，数组长度不变，键值不变。

vue.$delete 会删除数组的键值对，数组长度变化。

vue-router有3导航钩子分别是：全局导航钩子、组件内的导航钩子、路由独享钩子。

1、全局导航钩子

作用：路由跳转前触发，跳转前进行判断拦截

组件内的导航钩子

1）beforeRouteEnter 在进入当前组件对应的路由前调用

2）beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用

路由独享钩子

可以在路由配置上直接定义 beforeEnter

3）beforeRouteLeave 在离开当前组件对应的路由前调用

1、 push (将指定的元素添加到数组的末尾，并返回新的数组长度)

2、pop (从数组中删除最后一个元素，并返回该元素的值)

3、shift (从数组中删除第一个元素，并返回该元素的值)

4、unshift (向数组首位添加一个或多个元素，并返回新的数组长度)

5、concat (合并多个数组或值，返回一个新的数组)

6、slice (截取数组的一部分，返回一个新的数组)

7、splice (删除、替换或添加数组的元素，并返回被删除的元素)

8、filter (过滤数组中的元素，返回一个新的数组)

9、map (对数组中的每个元素进行操作，返回一个新的数组)

10、sort (对数组进行排序)

11、reverse (翻转数组中的元素)

12、indexOf (查找数组中指定元素的索引)

13、find (查找数组中符合条件的第一个元素)

14、findIndex (查找数组中符合条件的第一个元素的索引)

15、includes (判断一个数组是否包含一个指定的值)

16、every (判断数组内的所有元素是否都能通过指定函数的测试)

17、some(判断数组中是否至少有一个元素通过了指定函数的测试)

18、join (将一个数组的所有元素连接成一个字符串并返回这个字符串)

19、reduce (计算数组所有元素的总和)

20、forEach(数组循环遍历)

一、伪类（pseudo classes）

　　用于已有元素处于某种状态时为其添加对应的样式，但是通过DOM树又无法表示这种状态，就可以通过伪类来为其添加样式。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般CSS相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

二、伪元素（pseudo elements）

　　用于创建一些不在DOM树中的元素，并为其添加样式。

　　例如：我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

Vue.js是一款流行的用于构建用户界面的开源JavaScript框架。Vue.js库的最新版本是Vue3.0，它相较于之前的版本（如Vue2.0）有许多新的特性和改进。

1、响应式系统升级

2、更小的体积

3、更好的性能

4、Composition API

5、TypeScript支持

6更强大的工具链

flex: 1 是一个简写的 CSS 声明，它包含三个属性：flex-grow、flex-shrink 和 flex-basis。它们分别代表：

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不会放大。

flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目的本来大小。

简写为 flex: 1 实际上相当于 flex: 1 1 auto。

例如，在一个 flex 容器中，如果你想让一个子元素占据剩余空间的全部，你可以这样设置：

1、使用响应式布局：使用CSS媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。通过设置百分比、em或rem单位来实现元素的相对大小。

2、使用Viewport：通过设置Viewport元标签来控制页面在移动设备上的显示。可以使用来设置Viewport的宽度为设备宽度，并且禁用缩放。

3、使用CSS Flexbox或Grid布局：这些布局技术可以帮助您更轻松地创建自适应的布局，使元素在不同屏幕尺寸下自动调整位置和大小。

4、使用CSS媒体查询：通过使用@media规则，可以根据不同的屏幕尺寸应用不同的CSS样式。您可以根据需要设置不同的断点，并在不同的屏幕尺寸下应用不同的样式。

5、使用流式布局：使用百分比单位和自适应容器来创建流式布局，使页面元素根据屏幕尺寸自动调整大小。

6、使用图片适配：使用srcset和sizes属性来为不同屏幕尺寸提供不同大小的图片，以减少加载时间和带宽消耗。

7、使用JavaScript库：例如，使用Bootstrap或Foundation等前端框架，它们提供了一些内置的响应式布局和组件，可以帮助您更轻松地实现移动端适配。

1、使用 Set 去重（ES6 中最常用）

2、使用 indexOf()

3、使用includes()方法

4、使用双重for循环

5、使用单重for循环

6、使用filter()方法

7、使用reduce()方法

8、使用Map对象