1、MVVM的概念
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思维。Model 层代表数据模型；View 代表UI 组件；ViewModel 是连贯View 和 Model的桥梁。
在MVVM架构下，View 和 Model 之间并没有间接的分割，而是通过ViewModel进行交互，因而View 和 Model 之间的交互是双向的， 因而View 数据的变动会同步到Model中，而Model 数据的变动也会立刻反馈到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连贯了起来，而View 和 Model 之间的同步工作齐全是主动的，无需人为干预，因而开发者只需关注业务逻辑，不须要手动操作DOM, 不须要关注数据状态的同步问题，简单的数据状态保护齐全由 MVVM 来对立治理。
MVVM框架了解及其原理实现
2.生命周期的概念
Vue实例从创立到销毁的过程，就是生命周期。也就是从开始创立、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，咱们称这是Vue的生命周期。
详解vue生命周期
3.computed 和 watch 有什么区别及使用场景?
区别
computed 计算属性 : 依赖其它属性值,并且 computed 是惰性求值的,只有它依赖的属性值产生扭转,下一次获取 computed 的值时才会从新计算 computed 的值。
watch 侦听器 : 更多的是「察看」的作用,无缓存性,相似于某些数据的监听回调,每当监听的数据变动时都会执行回调进行后续操作。
使用场景：
当咱们须要进行数值计算,并且依赖于其它数据时,应该应用 computed,因为能够利用 computed 的缓存个性,防止每次获取值时,都要从新计算。
当咱们须要在数据变动时执行异步或开销较大的操作时,应该应用 watch,应用 watch 选项容许咱们执行异步操作 ( 拜访一个 API ),限度咱们执行该操作的频率,并在咱们失去最终后果前,设置中间状态。这些都是计算属性无奈做到的。
4.Vue 中的 key 到底有什么用？
key 是给每一个 vnode 的惟一 id,依附 key,咱们的 diff 操作能够更精确、更疾速
Vue2.0 v-for 中 :key 到底有什么用？
5.谈一谈 nextTick 的原理
异步更新队列
可能你还没有留神到，Vue 在更新 DOM 时是异步执行的。只有侦听到数据变动，Vue 将开启一个队列，并缓冲在同一事件循环中产生的所有数据变更。
如果同一个 watcher 被屡次触发，只会被推入到队列中一次。这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的。
而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行理论 (已去重的) 工作。
Vue 在外部对异步队列尝试应用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不反对，则会采纳 setTimeout(fn, 0) 代替。
在 vue2.5 的源码中，macrotask 降级的计划顺次是：setImmediate、MessageChannel、setTimeout
vue 的 nextTick 办法的实现原理:
vue 用异步队列的形式来管制 DOM 更新和 nextTick 回调先后执行
microtask 因为其高优先级个性，能确保队列中的微工作在一次事件循环前被执行结束
思考兼容问题,vue 做了 microtask 向 macrotask 的降级计划
6.Vue 组件 data 为什么必须是函数 ?
因为组件是能够复用的,JS 里对象是援用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会相互净化,产生副作用。
所以一个组件的 data 选项必须是一个函数,因而每个实例能够保护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因而不存在以上问题。
7.v-if 和 v-show 有什么区别？
v-show 仅仅管制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会管制这个 DOM 节点的存在与否。当咱们须要常常切换某个元素的显示/暗藏时，应用v-show会更加节俭性能上的开销；当只须要一次显示或暗藏时，应用v-if更加正当。
8.delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。
Vue.delete间接删除了数组 扭转了数组的键值。
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)
this.$delete(b,1)
console.log(b)9.Vue中给data中的对象属性增加一个新的属性时会产生什么，如何解决？
<template>
<div>
<ul>
<li v-for="value in obj" :key="value">
{{value}}
</li>
</ul>
<button @click="addObjB">增加obj.b</button>
</div>
</template>
<script> export default {
data () {
return {
obj: {
a: 'obj.a'
}
}
},
methods: {
addObjB () {
this.obj.b = 'obj.b'
console.log(this.obj)
}
}
} </script>
<style></style>点击button会发现，obj.b 曾经胜利增加，然而视图并未刷新：
起因在于在Vue实例创立时，obj.b并未申明，因而就没有被Vue转换为响应式的属性，天然就不会触发视图的更新，这时就须要应用Vue的全局api $set()：
addObjB () {
// this.obj.b = 'obj.b'
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
}$set()办法相当于手动的去把obj.b解决成一个响应式的属性，此时视图也会跟着扭转了：
10.vue.js的两个外围是什么？
数据驱动、组件零碎。
11.vue 是如何对数组办法进行变异的 ?
简略来说,Vue 通过原型拦挡的形式重写了数组的 7 个办法,首先获取到这个数组的ob,也就是它的 Observer 对象,如果有新的值,就调用 observeArray 对新的值进行监听,而后手动调用 notify,告诉 render watcher,执行 update
12.v-model
就是:value @input的语法糖
13.怎么了解单向数据流
这个概念呈现在组件通信。父组件是通过 prop 把数据传递到子组件的，然而这个 prop 只能由父组件批改，子组件不能批改，否则会报错。子组件想批改时，只能通过 $emit 派发一个自定义事件，父组件接管到后，由父组件批改。
14.vue中v-if和v-for不倡议同时应用的坑
v-for比v-if优先级高，所以应用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，所以咱们能够抉择应用computed过滤掉列表中不须要显示的我的项目。
以上是从他人的文章中收集的一些集体感觉还不错的面试题，后续还会继续的更新。
发表回复