vue面试题汇总

一、Vue的最大优势是什么?

比较轻量，中国人自己写的框架，文档易读
双向数据绑定,
数据驱动视图,
组件化开发
数据和视图分离
单页面应用可以实现页面数据局部刷新

二、请解释一下 MVC( Model-View-Controller)和 MVVM( Model-View-ViewModel)的区别？

Model：数据模型，存放用于展示的数据，有的数据是写死的，大多数是从后端返回的数据
View：视图，用于界面，在前端我们可以理解为Dom操作
Controller：控制器 接受并处理用户请求通知Model改变，并将Model返回给 View
ViewModel：视图模型，可实现数据的双向绑定，连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定

MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）都是常用的前端架构模式，它们的主要区别在于：

数据绑定方式不同： MVC 模式中，View 层与 Model 层完全分离，通过 Controller层来协调数据与视图之间的交互。View 层只负责展示数据，而不负责维护数据。数据的更新由 Controller 层控制。MVVM 模式中，View 层与 ViewModel 层通过双向数据绑定的方式进行交互。ViewModel层负责维护数据状态和业务逻辑，并将数据状态暴露给 View 层。View 层通过数据绑定自动更新数据状态，ViewModel 层也会监听View 层的事件和用户输入，自动更新数据状态。

响应式原理不同： MVC 模式中，Controller 层通过监听 Model 层的事件来更新 View 层的状态。View层的状态更新是被动的，需要等待 Controller 层的更新事件。MVVM 模式中，ViewModel 层通过数据绑定实现响应式更新，ViewModel 层的状态更新会自动同步到 View 层，View层的状态更新也会自动同步到 ViewModel 层。

模块职责不同： MVC 模式中，Controller 层负责协调 Model 层和 View层之间的交互，并处理用户的请求，对用户的请求进行分发和处理。MVVM 模式中，ViewModel 层负责管理和处理数据逻辑，处理用户的输入和输出，提供 View层所需要的数据和状态，并将用户的行为转换为数据操作，使得 View 层只需要关注展示数据，而不用关心数据的来源和处理。

总的来说，MVC 模式更加传统，它是通过控制器来协调 Model 和 View 的交互，而 MVVM 模式则是通过数据绑定来实现 Model和 ViewModel 的交互，ViewModel 和 View 的交互。MVVM模式在前端开发中比较流行，它可以减少代码的耦合度，提高代码的可读性和可维护性。

三、vue3与vue2的区别?

1、响应式原理

响应式作为vue关键的特性，vue3在vue2上也有很多提升。
vue2：Vue2 的响应式原理的核心是通过 ES5 的保护对象的Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。Vue2是使用Object.defineProperty，它只能劫持对象的属性，所以它需要深度遍历data中的每个属性，这种方式对于数组很不友好，而且对象观测后，新增的属性就不是响应式的，不过可以用Vue.set()来添加新的属性；
vue3：是使用Proxy，Proxy可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式；代理对象和反射对象要相互配合来实现响应式。vue3其实实现了深层检测。

2、定义区别

在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。(但其实在企业的项目中都是vue2结合ts，都是直接定义变量和函数，是不需要书写到data（){}内部的。
而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得return。如果没有return该变量，是无法使用的。

3、生命周期不同

• vue2中的生命周期
  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后
  • beforeDestroy 组件销毁之前
  • destroyed 组件销毁之后
• vue3中的生命周期
  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后
  • onBeforeUnmount 组件销毁之前
  • onUnmounted 组件销毁之后

除此以外，vue3还新增了两个钩子onRenderTracked 用于状态跟踪，onRenderTriggered用于状态触发
onRenderTracked它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
onRenderTriggered它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。

四、vue3新增了哪些特性？

Vue 3的新特性包括：
Composition API：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。
Teleport：可以让组件在DOM层次结构中的任何位置渲染。
Suspense： 一种新的异步渲染模式，可以优化应用程序的性能。
更快的渲染速度：Vue 3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。
更小的包大小：Vue3的打包大小比Vue 2更小，因为它不再需要依赖像vue-template-compiler这样的工具。
其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工具。

五、说说你对vue生命周期的理解？

vue生命周期一般有8个过程，总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后：
beforeCreate：vue实例创建前；
Created：vue实例创建后；
beforeMount：vue实例生成html,未挂载到页面上；
Mounted：渲染html页面；
beforeUpdate：数据更新前；
Updated：数据更新后，一般不在此期间改状态；
beforeDestroy：实例销毁前；
Destroyed：实例销毁后，所有事件监听器被移除，子实例也会被销毁；在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。 在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后： 当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在destroy阶段，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。destroyed阶段，组件销毁
另有五个：（vue2.0）
Activated：暂时进入；
Deactivated：暂时离开；
Beforerouterenter：路由守卫进入前；
Beforerouterupdate：路由守卫更新前；
Beforerouterleave：路由守卫离开前；

单组件声明周期图
挂载：beforeCreate => created => beforeMount => mounted
更新：beforeUpdate => updated
销毁：beforeDestroy => destroyed
父子组件生命周期图
挂载：parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated
销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
从以上能够看出：
挂载时，子组件是在父组件before mount后开始挂载，并且子组件先mounted，父组件随后
更新时，子组件是在父组件before update后开始更新，子组件先于父组件更新
销毁时，子组件是在父组件before destroy后开始销毁，并且是子组件先销毁，父组件随后。

六、vue声明周期都在哪些场景中使用？

1.beforeCreate(){} 创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除
2.created(){} 创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性
3. beforeMount(){} 模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改
4.mounted(){} 当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素
5. beforeUpdate(){} 当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化。当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改
6.updated(){} 数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构
7. beforeDestroy(){} 当前生命周期中我们需要做事件的解绑 监听的移除 定时器的清除等操作
8. destroyed(){} 当前生命周期执行完毕后会将vue与页面之间的关联进行断开，当<keep-alive>包裹动态组件的时候会触发两个新的生命周期
9. activated 当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
10. deactivated 缓存状态的时候触发

七、vue生命周期中created和mounted有什么区别？

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素；
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。

八、VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？

为什么要封装组件？
主要就是为了解耦，提高代码复用率。
什么是组件？
1.页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体。
2.组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
组件中的 data 为什么是一个函数？
因为组件是需要在多个地方使用的；如果data是一个对象，对象是引用类型。一旦某一个地方修改，就会全部修改；data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。这样组件在复用的时候就可以做到数据互不干扰。

九、vue页面级组件之间传值?

1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值

十、路由之间是怎么跳转的？有哪些方式?

1、<router-link to="需要跳转到页面的路径">
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

十一、请说出路由配置项常用的属性及作用？

路由配置参数：
path : 跳转路径
component : 路径相对于的组件
name:命名路由
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

十二、vue组件间通信有哪些方式？

1.父子组件props和this.$emit
2.ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值($parent / $children与 ref类似)
3.事件总线bus：使用一个 空的 VUE 实例作为事件总线，自定义事件event.$on event.$off event.$emit
4 provide inject组件通信
5.vuex
6.$attrs和$listeners 仅仅是传递数据，而不做中间处理，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
常见使用场景可以分为三类：
父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject API；
$attrs/$listeners
vuex
兄弟通信：
事件总线Bus；
Vuex
跨级通信：
事件总线Bus；
Vuex；
provide / inject API
$attrs/$listeners

十三、方法和计算属性和侦听器区别？

面试点 : 侦听器和计算属性区别
(1)计算属性有缓存机制,侦听器没有
(2)计算属性不支持异步操作, 侦听器支持异步操作
(3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性
(4)计算属性有返回值return,侦听器不需要return
(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法),
侦听器只能侦听一个数据的变化。

• 方法
  • 需要主动调用触发
  • 不会缓存
• 计算属性
  • 监听多个属性：只要计算属性内部数据变化就会触发
  • 有缓存机制（必须要说的）
• 侦听器
  • 监听一个属性
  • watch支持异步
  • 不会缓存（这个可以不用回答）

1.功能不同:计算属性解决模板语法冗余,侦听器监听data中某一个数据变化
2.计算属性有缓存,侦听器没有缓存
3.计算属性不支持异步操作,侦听器支持异步操作
4.计算属性可以新增一个属性,而侦听器一定要是data中的属性

十四、vue2与vue3中的watch和computed区别？

Vue.js中的watch和computed都是响应式数据的使用方式，但在Vue 2和Vue 3中它们有一些关键区别：
响应性核心实现不同：Vue 2中的响应性系统基于Object.defineProperty，而Vue 3则使用了ES6 Proxy代理对象作为响应性系统的核心实现。这意味着在Vue 3中，可以更轻松地跟踪对象属性的添加/删除，以及数组元素的变化。
computed返回值缓存策略：在Vue 2中，computed默认会对计算出的值进行缓存，只有依赖的数据发生变化时才会重新计算；而在Vue3中，默认情况下，computed返回的值也会进行缓存，但是可以通过设置computed选项的“cache”属性为false来禁用缓存，或者使用新的“ref”和“reactive”API手动控制缓存行为。
watch的写法差异：在Vue2中，watch可以直接监听一个表达式或一个函数，并且提供了deep选项来深度监听对象内部属性的变化；而在Vue3中，watch需要使用特定的监听选项函数来监听响应式数据的变化，例如使用“immediate”选项来立即执行watch回调函数，或使用“flush”选项来设置watch回调函数在视图更新前或后执行。
总之，在Vue3中，由于响应性核心实现的变化和新的API的引入，computed和watch的使用方式都有了一些微调，但它们的基本功能和作用并没有改变。

十五、Vue中如何监控某个属性值的变化？

现在需要监控data中， obj.a 的变化。Vue中监控对象属性的变化你可以这样：
第一种方法

watch: {

      obj: {

      handler (newValue, oldValue) {

        console.log('obj changed')

      },

      deep: true

    }

  }

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: {

   'obj.a': {

      handler (newName, oldName) {

        console.log('obj.a changed')

      }

   }

  }

第二种方法，可以通过computed 来实现，只需要：

computed: {

    a1 () {

      return this.obj.a

    }

}

十六、computed、watch（自动监听、深度监听）、methods区别？

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。
不同点：
computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。
methods：只要发生重新渲染，method 调用总会执行该函数。 watch监听对象需要深度监听，默认是浅监听当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。
watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

十七、scoped作用与原理？

• 作用：组件css作用域，避免子组件内部的css样式被父组件覆盖
  • 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式
• 原理：给元素添加一个自定义属性 v-data-xxxxx
  • 一针见血答案： 通过属性选择题来提高css权重值

十八、Vue的路由实现模式：hash模式和history模式？

1.路径不同

hash有#, history没有#

2.工作模式不同

hash : 修改当前页面hash,不需要服务器额外配置

history: 会给服务器发送请求，需要服务器配置

• 1.hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
• 2.history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

十九、$route和$router的区别?

routes : 数组。 路由匹配规则

router ： 对象。 路由对象

$router ： 对象。 用于跳转路由 和 传递参数

$route ：对象。 用于接收路由跳转参数

二十、ref 的作用？

获取dom元素 this.$refs.box

获取子组件中的data this.$refs.box.msg

调用子组件中的方法 this.$refs.box.open()

二十一、说出至少4个Vue指令及作用？

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号

v-slot: 缩写为#, 组件插槽

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用 不能单独使用 否则报错

v-text 解析文本

v-html 解析html标签

二十二、Vue中v-bind和v-model有什么区别？

v-bind是一个单向数据绑定，映射关系：Model->View，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。V-model是一个双向数据绑定，映射关系：View接受的数据，传给model,model的数据再传给view，当我们用JavaScript代码更新Model时，view就会自动更新，反之，如果用户更新了view，model的数据也自动被更新了。

二十三、说一下vue的双向绑定的原理是什么？

vue.js则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

二十四、v-show和v-if区别的区别？

• v-show和v-if的区别? 分别说明其使用场景?
• 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏
• 不同点1：原理不同
  • v-show:一定会渲染，只是修改display属性
  • v-if:根据条件渲染
• 不同点2：应用场景不同
  • 频繁切换用v-show,不频繁切换用v-if

二十五、为什么避免v-for和v-if在一起使用？

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

二十六、Vue中key值作用？

• 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。 （此时可能造成数据渲染异常）
• 2.使用key可以给dom添加一个 唯一标识符，让vue强制更新dom
• 3.快速查找到节点，减少渲染次数，提升渲染性能

二十七、v-for指令使用key值几种情况？

1.没有key值(默认是下标) : 不复用，就地更新
2.key值为下标(相当于没设置) : 不复用，就地更新
3.key值是id:复用相同的key，更新不同的key
总结 ： key值优先设置id, 没有id就用下标

二十八、Vue中有时候数组会更新页面，有时候不更新，这是为什么?

• 因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() /vm.$set()
• 这些方法会触发数组改变, v-for会监测到并更新页面
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
• 这些方法不会触发v-for更新
  • slice()
  • filter()
  • concat()

二十九、ajax请求应该放在哪个生命周期？

mounted，因为js是单线程，ajax异步获取数据

三十、监听data变化的核心api是什么？

vue2.0核心api是Object.defineProperty，vue3.0是启用proxy实现响应式

三十一、Vue 的 nextTick 的原理是什么？

• 1.为什么需要 nextTick
  • Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
• 2.知识储备（可以不说，但是自己要知道，以防不测）
  • 事件循环中宏任务和微任务这两个概念
  • 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）
  • 常见的微任务有 ,Promise.then(), async
• 3.最终答案：
  • nextTick 的原理是 vue 通过异步队列控制 DOM 更新
    • nextTick底层是promise，所以是微任务。这个一定要知道
  • （这个是官方语言，说不说看你自己心情) ： nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

三十二、v-slot插槽与作用域插槽？

1.插槽作用：父组件 传递 html结构 给 子组件
2.具名插槽作用：父组件 传递 多个html结构 给 子组件
3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

三十三、Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

三十四、讲一下组件的命名规范？

• 给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
• 因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

三十五、对Vue渐进式的理解？

• 官方专业答案
  • 主张最少,
  • 自底向上,
  • 增量开发,
  • 组件集合,
  • 便于复用
• 个人见解
  • 使用模块化规范，实现自助餐式开发，用什么导什么。 最大程度上节省资源。

三十六、vue.js的两个核心是什么？

数据驱动和组件化

三十七、vue-router怎么配置路由？（路由配置六个流程）

• 1.引入组件
• 2.配置路由path和组件, 和生成路由对象routes
• 3.创建路由对象router
• 4.把路由对象挂载到new Vue()
• 5.页面使用<router-view></router-view> 承载路由
• 6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

三十八、vue-router的钩子函数都有哪些？（导航守卫）

• 关于vue-router中的钩子函数主要分为3类
• 1.全局钩子函数beforeEach（全局前置守卫，所有路由生效）
  • beforeEach函数有三个参数,分别是:
    • to:router即将进入的路由对象
    • from:当前导航即将离开的路由
    • next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed
      （确认的）否则为false,终止导航。
• 2.单独路由独享组件（只对这个路由生效）
  • beforeEnter,
• 3.组件内钩子
  • beforeRouterEnter，（渲染路由组件前）
  • beforeRouterUpdate,（路由改变）
  • beforeRouterLeave（路由离开）

三十九、Npm init与npm install vue有什么区别？

• npm init ：生package.json文件，里面有各种依赖包的信息（执行该命令后终端会依次询问 name, version,description 等字段）
• npm install ：安装package.json文件中的依赖包到并且生成node_modules文件夹

四十、客户端运行VUE 项目中出现白屏，请问一般原因是什么？如何防止？

原因： vue项目完成后一打包，js都放到了一起，由于js太庞大，加载变慢出现白屏（app.js太大）
解决：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
使用路由懒加载，可以将js分别打包到不同的文件中。
使用骨架屏(vant)
01 配置打包工具，将组件分别打包到不同的js代码块中

biuld/weabpack.base.conf.js

　　　output:{

　　　　chunkFilename:"[   ]"　　　//为了懒加载新增，配置后webpack将打包出多个js文件　　

　　}

02 当路由请求到该组件时，才动态加载组件的内容
引入组件时要改为
import index from ‘./‘xxx 改为 const index=()=>import （’./xxx’） 仅定义函数 不执行
当用户在vue中请求当前组件对应的路由地址时，由vue-router自动调用加载函数

四十一、vue常见性能优化方式？

1.合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr

四十二、vue和react有什么区别？

1、监听数据变化的实现原理不同**

2、数据流的不同**

3、HoC和mixins**

4、组件通信的区别**

5、模板渲染方式的不同**

6、渲染过程不同**

7、框架本质不同**

四十三、有没有使用过axios、axios拦截器，跨域如何解决？

axios拦截器：
 
// 添加请求拦截器
 
axios.interceptors.request.use
 
// 添加响应拦截器
 
axios.interceptors.response.use

跨域特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

vue如何解决跨域：

proxyTable 这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件

CORS CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

Nginx 当我们明白跨越的含义之后。只要解决了’源’的问题。那么跨越也就不存在了

四十四、vue项目做过哪些优化？

（1）代码层面的优化

v-if 和 v-show 区分使用场景

computed 和 watch 区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

长列表性能优化

事件的销毁 addEventlisenter 事件监听

图片资源懒加载

路由懒加载

第三方插件的按需引入

优化无限列表性能

服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

Webpack 对图片进行压缩

减少 ES6 转为 ES5 的冗余代码

提取公共代码

模板预编译

提取组件的 CSS

优化 SourceMap

构建结果输出分析

Vue 项目的编译优化

（3）基础的 Web 技术的优化

开启 gzip 压缩

浏览器缓存

CDN 的使用

使用 Chrome Performance 查找性能瓶颈

四十五、为什么做首屏优化？

首屏时间的快与慢，直接影响到了用户对网站的认知度。所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。

四十六、如何做首屏优化？

css模块化加载，对应模块下的css交给js或jsonp请求返回js懒执行，有交互才执行，图片在其他屏（非首屏）都采用懒加载的模式，这样既能节省流量，也能减少请求数或延迟请求数。

服务器方面：

1. 少量静态文件的域名，图片与iconfont均是放在同一个域下，减少DNS的解析事件，最好做到域名收敛。

2. 模块化接口的支持。

3. 首屏内容最好做到静态缓存

4. 对于vue和react做ssr

四十七、vue等单页面应用及其优缺点？

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用

单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。

前后端分离。

效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo。

导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。

初次加载时耗时多。

页面复杂度提高很多。