共计 7960 个字符，预计需要花费 20 分钟才能阅读完成。
vue 面试总结
那首先谈谈你对 Vue 的了解吧？vue.js 是什么？
Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。
vue 是一个渐进式框架，相当于 view 层, 双向数据绑定, 他更轻量, 性能上更高效, 比其余框架更容易上手, 学习成本低, vue 须要一个 el 对象进行实例化,
Vue 与 Angular 以及 React 的区别？
angular 是 mvvm 框架, 而 vue 是一个渐进式的框架, 相当于 view 层, 都有双向数据绑定, 然而 angular 中的双向数据绑定是基于脏查看机制, vue 的双向数据绑定是基于 ES5 的 getter 和 setter 来实现, 而 angular 是有本人实现一套模板编译规定,vue 比 angular 更轻量, 性能上更高效, 比 angular 更容易上手, 学习成本低, vue 须要一个 el 对象进行实例化, 而 angular 是整个 html 页面下的, 单页面利用, 而 vue 能够有个 vue 实例
1. 与 AngularJS 的区别
相同点：
都反对指令：内置指令和自定义指令；都反对过滤器：内置过滤器和自定义过滤器；都反对双向数据绑定；都不反对低端浏览器。
不同点：
AngularJS 的学习老本高，比方减少了 Dependency Injection 个性，而 Vue.js 自身提供的 API 都比较简单、直观；在性能上，AngularJS 依赖对数据做脏查看，所以 Watcher 越多越慢；Vue.js 应用基于依赖追踪的察看并且应用异步队列更新，所有的数据都是独立触发的。
2. 与 React 的区别
相同点：
React 采纳非凡的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用；中心思想雷同：一切都是组件，组件实例之间能够嵌套；都提供正当的钩子函数，能够让开发者定制化地去解决需要；都不内置列数 AJAX，Route 等性能到外围包，而是以插件的形式加载；在组件开发中都反对 mixins 的个性。
不同点：
React 采纳的 Virtual DOM 会对渲染进去的后果做脏查看；Vue.js 在模板中提供了指令，过滤器等，能够十分不便，快捷地操作 Virtual DOM。
vue 的生命周期？
实例从创立到销毁的过程，就是生命周期。也就是从开始创立、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。
利用场景
beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其余的货色都还没创立。在 beforeCreate 生命周期执行的时候，data 和 methods 中的数据都还没有初始化。不能在这个阶段应用 data 中的数据和 methods 中的办法
create：data 和 methods 都曾经被初始化好了，如果要调用 methods 中的办法，或者操作 data 中的数据，最早能够在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中曾经编译好了模板了，然而还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就示意 Vue 实例曾经初始化实现了。此时组件脱离了创立阶段，进入到了运行阶段。如果咱们想要通过插件操作页面上的 DOM 节点，最早能够在和这个阶段中进行
beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data 中的数据是更新后的，页面还没有和最新的数据放弃同步
updated：页面显示的数据和 data 中的数据曾经放弃同步了，都是最新的
beforeDestory：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods，指令，过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：这个时候上所有的 data 和 methods，指令，过滤器 ……都是处于不可用状态。组件曾经被销毁了。
vue 生命周期的作用是什么？
它的生命周期中有多个事件钩子，让咱们在管制整个 Vue 实例的过程时更容易造成好的逻辑。
vue 生命周期总共有几个阶段？
它能够总共分为 8 个阶段：创立前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后
第一次页面加载会触发哪几个钩子？
beforeCreate，created，beforeMount，mounted
vue 获取数据在哪个周期函数？
个别 created/beforeMount/mounted 皆可.
比方如果你要操作 DOM , 那必定 mounted 时候能力操作.
mvvm 框架是什么？
vue 是实现了双向数据绑定的 mvvm 框架，当视图扭转更新模型层，当模型层扭转更新视图层。在 vue 中，应用了双向绑定技术，就是 View 的变动能实时让 Model 发生变化，而 Model 的变动也能实时更新到 View。
Vue 中双向数据绑定是如何实现的？
vue 双向数据绑定是通过 数据劫持 联合 公布订阅模式的形式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变动，视图变动，数据也随之产生扭转；
外围：对于 VUE 双向数据绑定，其外围是 Object.defineProperty()办法。
vue 是如何实现响应式数据的呢？（响应式数据原理）❗
参考：https://blog.csdn.net/kzj0916…
原理：
置信用过 vue 的都晓得，vue 中 data 中定义的数据会随着咱们通过办法扭转该数据的同时，页面上相干此数据的也会相应的刷新，实现响应式数据。可你晓得它是如何实现这一性能的吗？上面让咱们来理解理解它是如何做到这神奇操作的。
Object.defineProperty 监听批改读取数据：
Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该办法会间接在一个对象上定义一个新属性，或者批改一个对象的现有属性，并返回此对象。
第一个值传入要批改的对象
第二个值传入该对象中要批改的 key
第三个值是一个对象，外面有 set 和 get 两种办法 set 为值产生批改是所做的操作 get 为读取改值时的操作
默认配置如下
当初咱们来钻研下 vue 是如何利用 Object.defineProperty 监听批改读取数据的
咱们创立一个对象，并利用 Object.keys（）将对象中的 key 返回到一个数组中，并对该数组 forEach 遍历
将 key 对应值先取过去，对这个对象中每个不同的 key 通过 Object.defineProperty 批改并监听数据的变动，在批改该 key 对应的 value 值时，调用 set 办法 打印下监听 xxxx 数据扭转 并将批改值赋给 value
在读取该 key 对应的 value 值时，调用 get 办法 打印下获取 xxxx 对应的值 并间接返回以后 value 值
vue 中是如何检测数组变动的呢？
vue.set()
vue 组件中的 data 为什么是函数？
因为 JavaScript 的个性所导致，在 component 中，data 必须以函数的模式存在，不能够是对象。
组建中的 data 写成一个函数，数据以函数返回值的模式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有本人公有的数据空间，它们只负责各自保护的数据，不会造成凌乱。而单纯的写成对象模式，就是所有的组件实例共用了一个 data，这样改一个全都改了。
别离简述 computed 和 watch 的应用场景?
答：computed:
当一个属性受多个属性影响的时候就须要用到 computed
最典型的栗子：购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就须要用 watch
栗子：搜寻数据
created 和 mounted 的区别?
created: 在模板渲染成 html 前调用，即通常初始化某些属性值，而后再渲染成视图。
mounted: 在模板渲染成 html 后调用，通常是初始化页面实现后，再对 html 的 dom 节点进行一些须要的操作。
vue-router 的两种模式？
hash 模式：即地址栏 URL 中的 # 符号；
history 模式：window.history 对象打印进去能够看到里边提供的办法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 办法。（须要特定浏览器反对）。
params 和 query 的区别?
用法 ：query 要用 path 来引入，params 要用 name 来引入，接管参数都是相似的，别离是 this.$route.query.name 和 this.$route.params.name。
url 地址显示：query 更加相似于咱们 ajax 中 get 传参，params 则相似于 post，说的再简略一点，前者在浏览器地址栏中显示参数，后者则不显示
留神点：query 刷新不会失落 query 外面的数据、params 刷新会失落 params 外面的数据。
//query 语法：this.$router.push({path:"地址",query:{id:"123"}}); // 这是传递参数
this.$route.query.id；// 这是承受参数
//params 语法：this.$router.push({name:"地址",params:{id:"123"}}); // 这是传递参数
this.$route.params.id; // 这是承受参数组件之间传值？
父传子：props
子传父：$emit 办法
$nextTick 的应用?
当你批改了 data 的值而后马上获取这个 dom 元素的值，是不能获取到更新后的值，
你须要应用 $nextTick 这个回调，让批改后的 data 值渲染更新到 dom 元素之后在获取，能力胜利。
// 批改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {// DOM 更新})<keep-alive></keep-alive> 的作用是什么?
keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染。
为什么应用 key?
须要应用 key 来给每个节点做一个惟一标识，Diff 算法就能够正确的辨认此节点。
作用次要是为了高效的更新虚构 DOM。
v-show 和 v -if 指令的共同点和不同点？
共同点 ：都能管制元素的显示和暗藏；
不同点 ：实现实质办法不同，v-show 实质就是通过管制 css 中的 display 设置为 none，管制暗藏，只会编译一次；v-if 是动静的向 DOM 树内增加或者删除 DOM 元素，若初始值为 false，就不会编译了。而且 v -if 不停的销毁和创立比拟耗费性能。
总结：如果要频繁切换某节点，应用 v -show(切换开销比拟小，初始开销较大)。如果不须要频繁切换某节点应用 v -if（初始渲染开销较小，切换开销比拟大）。
如何让 CSS 只在以后组件中起作用？
在组件中的 style 后面加上 scoped
如何获取 dom?
ref=”domName” 用法：this.$refs.domName
说出几种 vue 当中的指令和它的用法？
v-model 双向数据绑定；
v-for 循环；
v-if v-show 显示与暗藏；
v-on 事件；v-once: 只绑定一次。
v-modal 的应用？
v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背地就做了两个操作：
v-bind 绑定一个 value 属性；
v-on 指令给以后元素绑定 input 事件。
请说出 vue.cli 我的项目中 src 目录每个文件夹和文件的用法？
assets 文件夹是放动态资源；components 是放组件；router 是定义路由相干的配置; app.vue 是一个利用主组件；main.js 是入口文件。
assets 和 static 的区别？
相同点 ：assets 和 static 两个都是寄存动态资源文件。我的项目中所须要的资源文件图片，字体图标，款式文件等都能够放在这两个文件下，这是相同点
不同点 ：assets 中寄存的动态资源文件在我的项目打包时，也就是运行 npm run build 时会将 assets 中搁置的动态资源文件进行打包上传，所谓打包简略点能够了解为压缩体积，代码格式化。而压缩后的动态资源文件最终也都会搁置在 static 文件中跟着 index.html 一起上传至服务器。static 中搁置的动态资源文件就不会要走打包压缩格式化等流程，而是间接进入打包好的目录，间接上传至服务器。因为防止了压缩间接进行上传，在打包时会进步肯定的效率，然而 static 中的资源文件因为没有进行压缩等操作，所以文件的体积也就绝对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。
倡议：将我的项目中 template 须要的款式文件 js 文件等都能够搁置在 assets 中，走打包这一流程。缩小体积。而我的项目中引入的第三方的资源文件如 iconfoont.css 等文件能够搁置在 static 中，因为这些引入的第三方文件曾经通过解决，咱们不再须要解决，间接上传。
v-on 能够监听多个办法吗？
能够，例子：<input type=”text” v-on=”{input:onInput,focus:onFocus,blur:onBlur,}”>。
vue 的两个外围点
答：数据驱动、组件零碎
数据驱动：ViewModel，保证数据和视图的一致性。
组件零碎：利用类 UI 能够看作全副是由组件树形成的。
vue 和 jQuery 的区别
jQuery 是应用选择器（$）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于能够更不便的选取和操作 DOM 对象，而数据和界面是在一起的。比方须要获取 label 标签的内容：$(“lable”).val();, 它还是依赖 DOM 元素的值。
Vue 则是通过 Vue 对象将数据和 View 齐全拆散开来了。对数据进行操作不再须要援用相应的 DOM 对象，能够说数据和 View 是拆散的，他们通过 Vue 对象这个 vm 实现互相的绑定。这就是传说中的 MVVM。
delete 和 Vue.delete 删除数组的区别
delete 只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。Vue.delete 间接删除了数组 扭转了数组的键值。
axios 的特点有哪些
从浏览器中创立 XMLHttpRequests；
node.js 创立 http 申请；
反对 Promise API；
拦挡申请和响应；
转换申请数据和响应数据；
勾销申请；
主动换成 json。
axios 中的发送字段的参数是 data 跟 params 两个，两者的区别在于 params 是跟申请地址一起发送的，data 的作为一个申请体进行发送
params 个别实用于 get 申请，data 个别实用于 post put 申请。
vue 初始化页面闪动问题
应用 vue 开发时，在 vue 初始化之前，因为 div 是不归 vue 管的，所以咱们写的代码在还没有解析的状况下会容易呈现花屏景象，看到相似于 {{message}} 的字样，尽管个别状况下这个工夫很短暂，然而咱们还是有必要让解决这个问题的。
首先：在 css 里加上 [v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上 style=”display: none;” :style=”{display: ‘block’}”
vue 更新数组时触发视图更新的办法
push()；pop()；shift()；unshift()；splice()；sort()；reverse()
vue 罕用的修饰符?
.stop：等同于 JavaScript 中的 event.stopPropagation()，避免事件冒泡；
.prevent：等同于 JavaScript 中的 event.preventDefault()，避免执行预设的行为（如果事件可勾销，则勾销该事件，而不进行事件的进一步流传）；
.capture：与事件冒泡的方向相同，事件捕捉由外到内；
.self：只会触发本人范畴内的事件，不蕴含子元素；
.once：只会触发一次。
vuex 相干问题
参考：https://blog.csdn.net/u012967…
vuex 是什么？怎么应用？哪种性能场景应用它？
vue 框架中状态治理。在 main.js 引入 store，注入。
新建了一个目录 store.js，….. export。
场景有：单页利用中，组件之间的状态。音乐播放、登录状态、退出购物车
对于 VueX
VueX 是实用于在 Vue 我的项目开发时应用的状态管理工具。试想一下，如果在一个我的项目开发中频繁的应用组件传参的形式来同步 data 中的值，一旦我的项目变得很宏大，治理和保护这些值将是相当辣手的工作。为此，Vue 为这些被多个组件频繁应用的值提供了一个对立治理的工具——VueX。在具备 VueX 的 Vue 我的项目中，咱们只须要把这些值定义在 VueX 中，即可在整个 Vue 我的项目的组件中应用。
应用 Vuex 的目标
实现多组件状态治理。多个组件之间须要数据共享时，Vuex 是个很好的帮手哦
Vuex 的五大外围
其中 state 和 mutation 是必须的，其余可依据需要来加
1、state：负责状态治理，相似于 vue 中的 data，用于初始化数据 // 状态治理
2、mutation：专用于批改 state 中的数据，通过 commit 触发 // 批改 state
3、action：能够解决异步，通过 dispatch 触发，不能间接批改 state，首先在组件中通过 dispatch 触发 action，而后在 action 函数外部 commit 触发 mutation，通过 mutation 批改 state 状态值 // 异步操作
4、getter：Vuex 中的计算属性，相当于 vue 中的 computed, 依赖于 state 状态值，状态值一旦扭转，getter 会从新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要应用 getter
5、module：模块化治理 // 模块
// 导入 vue 及 vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载 vuex
Vue.use(Vuex)
// 创立 vuex 对象并向外裸露
export default new Vuex.Store({
// 全局属性变量
state: { },
// 全局同步办法, 调用办法,this.$store.commit("xxx")
mutations: { },
// 异步办法 调用办法,this.$store.dispatch("xxx")
actions: { },
// Vuex 属性计算, 在视图外面当变量应用
getters: { },
// 模块化注册
modules: {}})action 与 mutation 的区别？
const store = new Vuex.Store({
state: {count: 0},
mutations: {increment (state) {state.count++}
},
actions: {increment (context) {context.commit('increment')
}
}
})1、流程程序
“相应视图—> 批改 State”拆分成两局部，视图触发 Action，Action 再触发 Mutation。
2、角色定位
基于流程程序，二者表演不同的角色。
Mutation：专一于批改 State，实践上是批改 State 的惟一路径。
Action：业务代码、异步申请。
3、限度
角色不同，二者有不同的限度。
Mutation：必须同步执行。
Action：能够异步，但不能间接操作 State。