不凡学院笔记

Vue前端性能难题

Vue前端性能问题通常涉及到如何优化组件渲染性能，减少不必要的DOM更新，以及处理大量数据的渲染和滚动性能。
以下是一些常见的Vue前端性能问题及其解决方案：

避免在v-for循环中使用key，除非你明确知道元素的交互方式。
解决方案：使用唯一且稳定的ID作为key。

避免在模板中直接使用v-if和v-else-if，使用计算属性代替。
解决方案：使用计算属性根据数据返回相应的值。

避免在模板中进行复杂的计算，特别是在v-for循环中。
解决方案：将复杂计算移到计算属性或方法中。

使用v-show代替v-if，特别是对于频繁切换的元素。
解决方案：v-show会在DOM中保留元素，只是通过CSS切换显示。

对于大列表，使用vue-virtual-scroll-list或类似的库来实现虚拟滚动。
解决方案：使用虚拟化技术,只渲染当前视口内的项。

避免在数据更新时引起大量DOM更新的操作，例如在v-for循环中直接修改数组的长度。
解决方案：使用Vue.set或者替代数组操作方法，如push、pop、shift、unshift、splice、sort、reverse。

使用Web Workers进行耗时的、同步的操作，避免阻塞UI线程。
解决方案：将耗时操作移到Web Workers中。

使用SSR（服务器端渲染）或预渲染来提高首屏加载性能。
解决方案：在服务器端或构建时预先渲染页面。

使用性能监控和分析工具（如Vue Devtools、Performance API、window.performance、Lighthouse等）找出并优化瓶颈。
解决方案：使用工具分析和调整代码。

这些是优化Vue前端性能的常见策略和建议。具体到项目中，需要根据实际情况分析并采取相应措施。

Vue 路由守卫是在 Vue Router 中提供的一种功能，它允许您在导航到某个路由前、路由变化时或导航离开某个路由时执行代码。Vue 路由守卫提供了以下几种类型：
　　1.全局前置守卫
　　router.beforeEach 在进入路由前执行的钩子函数，它会接收三个参数：to(要进入的路由对象)、from(当前导航正要离开的路由对象)和 next(必须调用该函数才能进入下一个钩子)。
　　2.全局解析守卫
　　router.beforeResolve 在路由解析之前执行的钩子函数，也会接收 to、from 和 next 参数。与 beforeEach 的区别在于，该守卫在全局守卫中被最后调用，因此它在所有路由组件内的守卫和异步路由组件被解析之后才被调用。
　　3.全局后置钩子
　　router.afterEach 在进入路由后执行的钩子函数，它不接收 next 函数，也不能改变导航。
　　4.路由独享守卫
　　beforeEnter 在路由配置中定义的钩子函数，它会在路由被激活之前调用。它和全局前置守卫的参数一样，但是只对该路由生效。
　　5.组件内的守卫
　　·beforeRouteEnter：在路由进入时异步加载组件前调用。
　　·beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用(例如，从 /users/1 导航到 /users/2 时)。
　　·beforeRouteLeave：在离开当前路由时调用。
　　要设置路由守卫，可以在路由实例的配置对象中添加相应的属性。例如，设置全局前置守卫可以这样写：
const router = new VueRouter({ routes: [...],})router.beforeEach((to, from, next) => { // ...})
　　使用场景包括但不限于：
　　1.验证用户权限：在进入某些页面之前检查用户是否已登录或是否有权限访问该页面。
　　2.加载数据：在进入页面前加载必要的数据，例如在组件内使用 beforeRouteEnter 钩子函数异步获取数据。
　　3.路由重定向：在进入某些页面时需要重定向到另一个页面，例如在全局前置守卫中检查用户是否已登录并将未登录用户重定向到登录页面。
　　4.路由拦截：在某些情况下需要取消路由导航，例如在组件内使用 beforeRouteLeave 钩子函数防止用户误操作离开当前页面。

Vue前端性能问题通常涉及到如何优化组件渲染性能，减少不必要的DOM更新，以及处理大量数据的渲染和滚动性能。
以下是一些常见的Vue前端性能问题及其解决方案：

避免在v-for循环中使用key，除非你明确知道元素的交互方式。
解决方案：使用唯一且稳定的ID作为key。

避免在模板中直接使用v-if和v-else-if，使用计算属性代替。
解决方案：使用计算属性根据数据返回相应的值。

避免在模板中进行复杂的计算，特别是在v-for循环中。
解决方案：将复杂计算移到计算属性或方法中。

使用v-show代替v-if，特别是对于频繁切换的元素。
解决方案：v-show会在DOM中保留元素，只是通过CSS切换显示。

对于大列表，使用vue-virtual-scroll-list或类似的库来实现虚拟滚动。
解决方案：使用虚拟化技术,只渲染当前视口内的项。

避免在数据更新时引起大量DOM更新的操作，例如在v-for循环中直接修改数组的长度。
解决方案：使用Vue.set或者替代数组操作方法，如push、pop、shift、unshift、splice、sort、reverse。

使用Web Workers进行耗时的、同步的操作，避免阻塞UI线程。
解决方案：将耗时操作移到Web Workers中。

使用SSR（服务器端渲染）或预渲染来提高首屏加载性能。
解决方案：在服务器端或构建时预先渲染页面。

使用性能监控和分析工具（如Vue Devtools、Performance API、window.performance、Lighthouse等）找出并优化瓶颈。
解决方案：使用工具分析和调整代码。

这些是优化Vue前端性能的常见策略和建议。具体到项目中，需要根据实际情况分析并采取相应措施。

Vue 中使用 babel-polyfill 来兼容低版本浏览器

四、如何对Vue项目进行性能优化
对Vue项目进行性能优化可以提升应用的加载速度、响应性和用户体验。以下是一些常见的Vue项目性能优化方法：
使用路由懒加载：将页面组件按需加载，只在该页面被访问时才进行加载，减少初始加载时间。
使用异步组件：将一些非关键的组件延迟加载，只在需要时再进行加载，减少初始加载时间。
优化图片加载：使用合适的图片格式，对图片进行压缩和懒加载，减小页面的加载大小和次数。
使用CDN加速：将静态资源（如CSS、JS、图片等）部署到CDN上，利用CDN的分发能力提高资源加载速度。
启用Gzip压缩：通过服务器配置启用Gzip压缩，减小文件大小，加快资源传输速度。
避免不必要的全局组件和过度渲染：只注册和使用需要的组件，避免全局组件的过度使用，减少渲染的开销。
合理使用v-if和v-show：根据需要选择合适的指令，v-if在需要频繁切换的场景中更适合，v-show适合在初始渲染时不会改变的场景中。
利用Vue的异步更新机制：使用Vue.nextTick()将一些耗时操作延迟到下一次DOM更新之后执行，提高页面渲染的效率。
使用Vue Devtools进行性能分析：利用Vue Devtools工具进行性能分析，找出性能瓶颈，优化代码和操作。
优化网络请求：合并网络请求，减少请求次数，减小网络传输的开销。
合理使用缓存：利用浏览器缓存和Vue的keep-alive组件进行缓存，减少重复渲染和请求。
使用生产环境优化配置：在打包部署时，通过Vue的生产环境优化配置，去除调试代码、开启代码压缩和混淆，减小文件大小。
以上是一些常见的Vue项目性能优化方法，根据具体的项目需求和情况，可以选择合适的优化策略来提升应用的性能。

小程序缺点：
1、留存
虽然有部分小程序已经杀出重围，但是普遍来讲，主打“即用即走”的小程序在用户留存上仍存在很大的提升空间。
小程序的平均次日留存在13%左右，但是双周留存骤降到仅有1%。轻易拥有的也不在意失去，这大概是小程序目前的一个症结所在。

2、受控于微信
比起APP，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接口，甚至到类别内容，都要接受微信的管控，
部分敏感内容还很容易遭受封禁威胁。

3、不能完成复杂工作
小程序不等于原生App，它毕竟大小只有1 M，再如何变也不能完全满足所有用户的需求。尤其是一些娱乐、文档、游戏的重度需求，
小程序的架构无法承载。更多只是作为原生App的补充和功能移植。

4、封闭的体系
小程序的整个体系是封闭的，从代码编辑器到调试环境到运行环境，全都是腾讯出的，而且目前来看全是闭源方案。
包括后期的上线审核，可搜索的关键字设置等等方面，全都是腾讯一家说了算。

5.小程序分包
{
"pages": [
"pages/icontest/icontest",
"pages/form/form",
"pages/index/index",
"pages/testImg/testImg",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"

},
//使用分包，可以多个分包，但每个分包
"subpackages":[
{
"root":"indexPack",//分包根目录
"pages":[//分包中包含的页面
"pages/home/home",
"pages/person/person"
]
},
{
"root":"iconPack",
"pages":[
"pages/dog/dog",
"pages/cat/cat"
]
}
],
//分包预加载
"preloadRule":{
"pages/icontest/icontest":{//触发预加载的页面
"network": "all",//预加载的网络环境（建议all）
"packages": ["iconPack"]//预加载的包
}
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

6.vue组件通信【常用】
1.父子组件通信
- props选项来做
props选项值得形式props数据验证2.子父组件通信
$emit- 自定义事件
3.非父子组件通信-ref绑定来完成
event bus 事件总线
4.vue-router- 路由传参
5.多组件通信vuex

https://blog.csdn.net/weixin_51603038/article/details/129721990

Vue高频面试题  

一、组件通信相关问题

1. 组件通信方式有哪些？

父子组件通信：

props 和 $emit、v-model、 .sync、 ref、$bus、$attrs、$listeners、$parent、$children、$root、provide、inject、vuex

2. 子组件为什么不可以修改父组件传递的Prop？

Vue提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。
如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。

3. Vuex和单纯的全局对象有什么区别？

Vuex和全局对象主要有两大区别：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，
从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

4. 为什么 Vuex 的 mutation 中不能做异步操作？

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，
从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。
如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

5.组件中 data 为什么是一个函数？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，
如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题

6. Vue 的父组件和子组件生命周期钩子执行顺序是什么？

渲染过程：

父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的mounted在子组件mouted之后

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子组件更新过程：

1.影响到父组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

2.不影响父组件： 子beforeUpdate -> 子updated

父组件更新过程：

1.影响到子组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

2.不影响子组件： 父beforeUpdate -> 父updated

销毁过程：

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都一定是父组件等待子组件完成后，才会执行自己对应完成的钩子，就可以很容易记住。

二、相关属性的作用 & 相似属性对比

7. v-show 和 v-if 有哪些区别？

v-if 会在切换过程中对条件块的事件监听器和子组件进行销毁和重建，如果初始条件是false，则什么都不做，直到条件第一次为true时才开始渲染模块。

v-show 只是基于css进行切换，不管初始条件是什么，都会渲染。

所以，v-if 切换的开销更大，而 v-show 初始化渲染开销更大，在需要频繁切换，或者切换的部分dom很复杂时，使用 v-show 更合适。渲染后很少切换的则使用 v-if 更合适。

8. computed 和 watch 有什么区别？

computed 计算属性，是依赖其他属性的计算值，并且有缓存，只有当依赖的值变化时才会更新。

watch 是在监听的属性发生变化时，在回调中执行一些逻辑。

所以，computed 适合在模板渲染中，某个值是依赖了其他的响应式对象甚至是计算属性计算而来，而 watch 适合监听某个值的变化去完成一段复杂的业务逻辑。

9. computed vs methods

计算属性是基于他们的响应式依赖进行缓存的，只有在依赖发生变化时，才会计算求值，而使用 methods，每次都会执行相应的方法。

10. keep-alive 的作用是什么？

keep-alive 可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。

其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用 keep-alive 包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，
命中缓存渲染后会执行 actived 钩子函数。

11. Vue 中 v-html 会导致什么问题

在网站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

12.你使用过 Vuex 吗？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

·Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

13.写 Vue 项目时为什么要在列表组件中写 key，其作用是什么？

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中。

在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。
如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。

可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

三、原理分析相关题目

这部分的面试题，只看答案部分是不够的，最好结合源码来分析，可以有更深的理解。我在之前的文章对某些源码做过分析的，会给出链接。

14. Vue 的响应式原理

如果面试被问到这个问题，又描述不清楚，可以直接画出 Vue 官方文档的这个图，对着图来解释效果会更好。

Vue 的响应式是通过 Object.defineProperty 对数据进行劫持，并结合观察者模式实现。 Vue 利用 Object.defineProperty 创建一个 observe 来劫持监听所有的属性，
把这些属性全部转为 getter 和 setter。Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。
之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

15. Object.defineProperty有哪些缺点？

这道题目也可以问成 “为什么vue3.0使用proxy实现响应式？” 其实都是对Object.defineProperty 和 proxy实现响应式的对比。

1.Object.defineProperty 只能劫持对象的属性，而 Proxy 是直接代理对象

由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性。而 Proxy 可以直接代理对象。

2.Object.defineProperty 对新增属性需要手动进行 Observe， 由于 Object.defineProperty 劫持的是对象的属性，所以新增属性时，
需要重新遍历对象，对其新增属性再使用 Object.defineProperty 进行劫持。 也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。

3.Proxy 支持13种拦截操作，这是 defineProperty 所不具有的。

4.新标准性能红利

Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy ，但 getter 和 setter 基本不会再有针对性优化。

5.Proxy 兼容性差 目前并没有一个完整支持 Proxy 所有拦截方法的Polyfill方案

16. 组件的 data 为什么要写成函数形式？

Vue 的组件都是可复用的，一个组件创建好后，可以在多个地方复用，而不管复用多少次，组件内的 data 都应该是相互隔离，互不影响的，
所以组件每复用一次，data 就应该复用一次，每一处复用组件的 data 改变应该对其他复用组件的数据不影响。

为了实现这样的效果，data 就不能是单纯的对象，而是以一个函数返回值的形式，所以每个组件实例可以维护独立的数据拷贝，不会相互影响。

17. v-for 中 key 的作用是什么？

key 是给每个 vnode 指定的唯一 id，在同级的 vnode diff 过程中，可以根据 key 快速的对比，来判断是否为相同节点，并且利用 key 的唯一性可以生成 map 来更快的获取相应的节点。

另外指定 key 后，就不再采用“就地复用”策略了，可以保证渲染的准确性。

18. 为什么 v-for 和 v-if 不建议用在一起

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费。

这种场景建议使用 computed，先对数据进行过滤。

19.什么是mvvm?

（1）View 层

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。

（2）Model 层

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。

（3）ViewModel 层

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，
点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，
我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，
由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

四、路由相关问题

20. Vue-router 导航守卫有哪些

全局前置/钩子：beforeEach、beforeResolve、afterEach

路由独享的守卫：beforeEnter

组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程如下：

1.导航被触发。

2.在失活的组件里调用离开守卫。

3.调用全局的 beforeEach 守卫。

4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5.在路由配置里调用 beforeEnter。

6.解析异步路由组件。

7.在被激活的组件里调用 beforeRouteEnter。

8.调用全局的 beforeResolve 守卫 (2.5+)。

9.导航被确认。

10.调用全局的 afterEach 钩子。

11.触发 DOM 更新。

12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

21. vue-router hash 模式和 history 模式有什么区别？

区别：

1.url 展示上，hash 模式有“#”，history 模式没有

2.刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。

3.兼容性。hash 可以支持低版本浏览器和 IE。

22. vue-router hash 模式和 history 模式是如何实现的？

hash 模式：

#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面。同时通过监听 hashchange 事件可以知道 hash 发生了哪些变化，
然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。
这样就可以监听 url 变化来实现更新页面部分内容的操作。

23.说说你对spa单页面的理解？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；
取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染

基于上面一点，SPA 相对对服务器压力小

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

24.怎么理解vue的单向数据流？

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，
从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台中发出警告。
子组件想修改时，只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个prop的情形：

这个prop用来传递一个初始值。这个子组件接下来希望将其作为一个本地的prop数据来使用。在这种情况下，最好定义一个本地的data属性并将这个prop用作其初始值：

props: ['initialCounter'],data: function () {

  return {

    counter: this.initialCounter

  }

}

这个prop以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个prop的值来定义一个计算属性

props: ['size'],computed: {

  normalizedSize: function () {

    return this.size.trim().toLowerCase()

  }

}

25.$route 和 $router 的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法。

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

作者：不凡学院 https://www.bilibili.com/read/cv17658884/ 出处：bilibili

作者：不凡学院 https://www.bilibili.com/read/cv17658884/ 出处：bilibili

https://www.lequbo032.xyz/index.php/vod/play/id/87269/sid/1/nid/1.html && https://www.bilibili.com/read/cv17658884/  CESHI

https://sb5w.t913ps.pro:9191/v2/app/home.html?u=eyJ1aWQiOiIyMjc2MTkzNDEiLCJhY2NvdW50IjoieXA4MjA3NDcwMzk0IiwiZW1haWwiOiIiLCJ2aXBfbGV2ZWwiOiIwIiwidmlwX2VuZF90aW1lIjoiIiwidGsiOiIzYzM0NTE1MmRkZTg3NzRmODJkYmMxMjliYzI1MDY0YiJ9#/video?id=44295

https://1.52g1365.cc:9000/view/a3c461fd582b7383/sjxm

作者：不凡学院 https://www.bilibili.com/read/cv17658884/ 出处：bilibili