vue经典面试题总结（二）
目录
1.vue的优点
2.请Vue2.0描述一下响应式原理
3.Vue3.x响应式数据原理
4.Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
4.Proxy 与 Object.defineProperty 优劣对比
5.Vue中watch用法详解
4.vue中对mixins的理解和使用
5.element-ui中遇到的问题
4.vue的自定义指令
5.你有写过自定义指令吗？自定义指令的应用场景有哪些？
6.vue-router路由传参
7.keep-alive了解吗
8.assets和static的区别
9.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
10.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
11.axios的特点有哪些
12.请说出vue.cli项目中src目录每个文件夹和文件的用法？
13.mint-ui是什么？怎么使用？说出至少三个组件使用方法？
14.vue中ref的作用是什么？
15.Vue 打包命令是什么？Vue 打包后会生成哪些文件？
16.Vue 如何优化首屏加载速度？
17.你的接口请求一般放在哪个生命周期中？
18.Vue 组件引入步骤?
19.Vue 插件使用步骤
20.active-class 是哪个组件的属性？
21.VNode 是什么？虚拟 DOM 是什么？
22.axios和ajax的区别
23.如何给vue自定义组件添加点击事件？
24.vue解决跨域问题的方法：
25.vuex实现购物车原理：
26.vue-router实现路由懒加载（ 动态加载路由 ）
27.vuex是什么？怎么使用？哪种功能场景使用它？
28..Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
29.请简述webpack中的loaders与plugin的区别
1.vue的优点
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。
2.请Vue2.0描述一下响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例，当data发生变化是，之后setter 被调用，会通知 watcher 重新计算，从而执行render函数，致使它关联的组件得以更新。
3.Vue3.x响应式数据原理
Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。
4.Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
1.defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
3.响应式是惰性的。
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
4.Proxy 与 Object.defineProperty 优劣对比
1.Proxy 可以直接监听对象而非属性；
2.Proxy 可以直接监听数组的变化；
3.Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
5.Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
6.Object.defineProperty 的优势如下:
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
5.Vue中watch用法详解
在vue中，使用watch来监听数据的变化；
1.监听的数据后面可以写成对象形式，包含handler方法，immediate和deep。
2.immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
3.当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
watch: {
name: {
handler(newName, oldName) {
},
deep: true,
immediate: true
}
}
4.vue中对mixins的理解和使用
mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
而mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
可点击vue中对mixins的理解和使用的介绍作为参考
5.element-ui中遇到的问题
1.el-cascader多选在IE中样式不正常
2.级联选择器高度问题
3.Table 固定列下出现线条
4.vue的自定义指令
Vue除了核心功能默认内置的指令 ，Vue 也允许注册自定义指令。
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。
添加自定义指令的两种方式：
全局指令： 通过 Vue.directive() 函数注册一个全局的指令。
局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。
可以参考如何写一个Vue自定义指令或Vue.js官网关于自定义指令的详细讲解学习
5.你有写过自定义指令吗？自定义指令的应用场景有哪些？
可以参考如何写一个Vue自定义指令
6.vue-router路由传参
router-link 进行页面按钮式路由跳转传参
this.$router.push进行编程式路由跳转传参
7.keep-alive了解吗
< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
8.assets和static的区别
static/ 中的文件是完全不被Webpack处理的，它们被以相同的文件名直接被复制进最终目标。务必要使用绝对路径去引用它们
src/assets 中放置的文件希望被Webpack处理的，它们可能被重新命名复制进最终目标。使用相对路径引用它们
9.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
Vue路由在Android机上有问题，babel问题，安装babel polypill 插件解决。
10.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
问题描述
假设路由已配置好，但运行如下代码后，点击 Admin 按钮却没有跳转至 admin 界面。（clrDropdownItem为按钮样式）
main.component.html
解决方法
方法一
将 clrDropdownItem 样式放在标签，不使用标签
Admin
方法二
使用标签和Router.navigate方法
main.component.html
复制代码
import { Router } from '@angular/router';
...
export class MainComponent {
constructor(
private router: Router
) {}
gotoAdmin() {
this.router.navigate(['/admin']);
}
}
11.axios的特点有哪些
axios是一个基于promise的HTTP库,支持promise的所有API
它可以拦截请求和响应
它可以转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据
它安全性更高,客户端支持防御XSRF请说出vue.cli项目中src目录每个文件夹和文件的用法
12.请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets 文件夹是放静态资源；
components 是放组件；
router 是定义路由相关的配置;
view 视图；
app.vue 是一个应用主组件；
main.js 是入口文件
13.mint-ui是什么？怎么使用？说出至少三个组件使用方法？
基于 vue 的前端组件库。npm 安装，然后 import 样式和 js， vue.use（mintUi）全局引入。 在单个组件局部引入：import{Toast}from‘mint-ui’。 组件一：Toast(‘登录成功’)； 组件二：mint-header； 组件三：mint-swiper
14.vue中ref的作用是什么？
ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普 通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册
15.Vue 打包命令是什么？Vue 打包后会生成哪些文件？
npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及
index.html 初始页面。
16.Vue 如何优化首屏加载速度？
异步路由加载不打包库文件
关闭 sourcemap
开启 gzip 压缩
17.你的接口请求一般放在哪个生命周期中？
接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。
18.Vue 组件引入步骤?
1.采用es6的import ... from ...或CommonJs的require()方法引入组件
2.对组件进行注册
// 注册
Vue.component('my-component', { template:'
A custom component!
'})
3.使用组件
19.Vue 插件使用步骤
1.采用es6的import ... from ...或CommonJs的require()方法引入插件
2.使用全局方法Vue.use( plugin )使用插件，可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })。
20.active-class 是哪个组件的属性？
vue-router 的router-link组件
21.VNode 是什么？虚拟 DOM 是什么？
Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
22.axios和ajax的区别
区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。
Ajax：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
$.ajax({
url: 'http://jsonplaceholder.typicode.com/users',
type: 'get',
dataType: 'json',
data: {
//'a': 1,
//'b': 2,
},
success: function (response) {
console.log(response)；
}
})
axios：
用于浏览器和node.js的基于Promise的HTTP客户端
1. 从浏览器制作XMLHttpRequests
2. 让HTTP从node.js的请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换为JSON数据
8. 客户端支持防止XSRF
axios({
url: 'http://jsonplaceholder.typicode.com/users',
method: 'get',
responseType: 'json', // 默认的
data: {
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
})
2.优缺点： ajax： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务 axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。
23.如何给vue自定义组件添加点击事件？
需要在@click后面加上.native,官方对于native的解释为：
.native -——监听组件根元素的原生事件
24.vue解决跨域问题的方法：
vue中解决跨域问题 - 火星黑洞 - 博客园
25.vuex实现购物车原理：
vuex实现购物车的增加减少移除_缘飞梦的博客-CSDN博客
26.vue-router实现路由懒加载（ 动态加载路由 ）
三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件
27.vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
28..Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。
29.请简述webpack中的loaders与plugin的区别
loaders是文件加载器，能够加载资源文件，并对这些文件进行处理，例如，编译，压缩等，最终一起打包到指定文件中。
plugin:在webpack运行的生命周期会有许多事件，plugin可以监听这些事件