v-for为什么要加key 值？

vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件,key的作用主要是为了高效的更新虚拟DOM。

v-if和v-for 不能同用的原因？

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐v-if和v-for同时使用，可以把list放在计算属性中遍历

v-model的实现原理是什么？

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化,其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

v-model都绑定了什么？

v-model绑定时做了两件事:在表单元素上做了事件监听(监听input、change事件)如果值发生变化时,在事件回调函数把最新的值设置到vue的实例上,实例的响应化的set函数会触发,跟这个数据相关的部分就更新了

对MVVM的理解？

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

vue框架的渐进式？

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念,渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分

vue 中的data 为什么是函数？

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data。如果写成对象形式,就使得所有组件实例共用了一份data,造成了数据污染。

vue中created与mounted区别？

在created阶段，实例已经被初始化，但是还没有挂载至el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的，一般用来请求数据
在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，可以调用节点了；一般用来显示与隐藏dom元素

说说vue的生命周期的理解？

生命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
beforecreate （初始化界面前）
created （初始化界面后）
beforemount （渲染界面前）
mounted （渲染界面后）
beforeUpdate （更新数据前）
updated （更新数据后）
beforedestory （卸载组件前）
destroyed （卸载组件后）

v-if和v-show 的区别是什么？

v-show只是简单使用css来控制元素的display属性，v-show 首次宣染开销更高，v-show切换开销小，v-if 是对元素的节点进行添加和移除，v-if的首次宣染开销要小的多，但切换开销更高。

vue 中的this 指向？

在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。
在函数内部使用this时, this会指向window,而非vue实例。

Vue组件通信有哪些方式？

1.父传子：props
父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed
2.父传子孙：provide 和 inject
父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的 属性；
3.子传父：通过事件形式
子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。
4.vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可

keep-alive的理解？

< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

vue 项目 中如何获取节点？

1、利用js原生的获取dom节点的方法：document.getElementById等
2、可以在vue项目中引入jquery，使用JQ的方法库获取节点
3、可以在vue项目中利用vue提供的api在dom标签的属性上加上一个ref="dom的名字"属性，然后通过vue实例的this.$refs.dom的名字来直接获取这个元素节点，

watch和computed区别？

computed：
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
watch
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、当一个属性发生变化时，需要执行对应的操作；一对多；
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数： 　　
immediate：组件加载立即触发回调函数执行， 　　
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

vue的路由守卫是什么？

导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，比如常见的路由拦截，登录页进入首页，判断是否已经登录，如果没有登录就跳转到登录页，如果已经登录，直接进入下一个页面，这就是导航守卫。form()从那个页面来的， to()要去的页面，next()必须执行，不执行不跳转，给个实例

router.beforeEach((to, from, next) => {
  // 比如从Login页面来，要去首页index,isLogin如果是登录状态，就正常执行next()进入首页，否则回到Login登录页
  if (form.name == 'Login' && to.name == 'index' && isLogin) {
  	next()
  } else {
	next({ name: 'Login' })
  }
})

好啦，看面试题看累了吧，看看妹子养养眼

喜欢的点个关注哦，后续持续更新！补充新的内容