技术分享博客

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 在离开当前组件对应的路由前调用

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

1、响应式系统升级

2、更小的体积

3、更好的性能

4、Composition API

5、TypeScript支持

6更强大的工具链

1、$router是用来操作路由，$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）。

2、$route是用来获取路由信息，$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时，默认使用就地复用策略（如果该元素dom未修改，则复用之前的元素，否则重新渲染这一项）。

2、key的作用是唯一标识组件元素，辅助判断新旧vdom节点在逻辑上是不是同一个对象，是否有更新

vue是通过比对组件自身新旧vdom进行更新的。