共计 2894 个字符，预计需要花费 8 分钟才能阅读完成。
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 过滤掉列表中不须要显示的我的项目。
以上是从他人的文章中收集的一些集体感觉还不错的面试题，后续还会继续的更新。
