Vue面试题汇总

v-if和v-for****的优先级 1.显然v-for优先于v-if被解析。
2.如果同时出现，渲染函数中先执行循环再判断条件，return符合条件的数据，这样无可避免的执行了循环，浪费了性能。源码codeGen/index.js中64行先处理for再处理if。
3.要避免这种情况：①在外层判断条件，内部进行循环。②先根据条件过滤数据，再循环。

Vue组件中的data为什么是个函数，而Vue****根实例没有限制？ 1.Vue组件可能存在多个实例，如果使用对象形式定义，则会导致他们公用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的。
2.采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有校规避多实例之间状态污染问题。
3.在Vue根实例创建过程中则不存在该限制，因为根实例只能有一个，不需要担心这种情况。
4.源码里，数据初始化的代码中，会校验data的形式，执行对应的方式。而根实例可以跳过data校验。

Vue中key****的作用和工作原理        1.key的主要作用是为了高效的更新虚拟DOM。其原理是vue在patch的过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新元素，使整个patch过程更加高效，减少DOM的操作量，提高性能。
2.另外，若不设置key可能在列表更新时引发一些隐藏bug，比如说transition过度效果不触发。

谈一谈对****Vue组件化的理解        1.组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，他使开发者使用小型、独立和通常可复用的组件构建大型应用。
2.组件化发开能大幅提高应用开发效率、测试性、复用性。
3.组件使用按分类有：页面组件、业务组件、通用组件。
4.Vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，他们基于VueComponent，扩展与Vue。
5.Vue中常见的组件话技术有：属性prop，自定义事件，插槽等，他们主要用于组件通信、扩展等
6.合理的划分组件，有助于提升应用性能。
7.组件应该是高内聚、低耦合的。
8.遵循单向数据流原则。

谈一谈你对MVC、MVP、MVVM的理解****        1.三者都是框架模式，他们设计的目的都是为了解决Model和View层的耦合问题。
2.MVC模式出现较早，主要应用于后端，如Spring MVC、ASP.NET MVC等，在前端领域的早期也有应用，如backbone.js，他的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。
3.MVP模式是MVC的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但是P层过于臃肿会导致维护问题。
4.MVVM模式在前端领域有广泛应用，他不仅解决MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

你了解哪些Vue性能优化方法吗？        1.路由懒加载：使用的时候按需加载，打包的时候整体体积大幅缩减。

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => { './Foo.vue' }}
  ]
})

       2.keep-alive缓存页面。

<template>
  <div id="app">
    <keep-alive>
      <router-view>
    </keep-alive>
  </div>
</template>

       3.条件合适时使用v-show控制DOM。
4.v-for遍历时避免同时使用v-if
5.长列表性能优化：如果列表是纯粹的数据展示，不会有任何变化，就不需要做响应式。

const users = axios.get('./user')
this.users = Object.freeze(users)

       6.事件的销毁：Vue组件销毁时，会自动解绑他的全部指令及事件监听器，但是仅限于组件本身的事件。

created () {
  this.timer = setInterval(() => {
    this.refresh()
  }, 2000)
},
beforeDestroy () {
  clearInterval(this.timer)
}

       7.图片懒加载：对于图片过多的页面，为了加速页面加载速度，所以很多时间我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。

<img v-lazy="./static/img/1.png">

       8.第三方插件按需引入：像element-ui这样的第三方组件库可以按需引入，避免体积太大。
9.无状态的组件标记为函数式组件。

<template functional>
  <div class="cell">
    <div v-if="value"></div>
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

       10.子组件分割：有动态内容的部分，把他切割为独立组件，数据改变后不会影响其它地方，否则整个页面都需要重新渲染，因为每个组件只有一个watcher。
11.变量本地化：例如代码逻辑中多次用到computed中的属性，把他存为本地变量后再使用，不要频繁引用。
12.SSR

Vue路由中如何保证指定路由的安全        1.阐述vue-router中路由保护策略：vue-router中保护路由安全通常使用路由守卫来做，通过设置路由守卫钩子函数的方式添加路由守卫函数，在里面判断用户的登录状态和权限，从而达到保护指定路由的目的。
2.描述具体实现方式：具体实现有几个层级：全局守卫beforeEach、beforeResolve、afterEach，单个路由守卫beforeEnter，组件内守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。以全局守卫为例，可以使用router.beforeEach((to,from,next=>{}))方式设置守卫，每次路由导航时，都会执行该守卫，从而检查当前用户是否可以继续导航。通过给next函数传递多种参数达到不同的目的，比如如果禁止用户继续导航可以传递next(false)，正常放行可以不传递参数，传递

beforeRouteEnter((to, from, next) => {
  next(vm => {
    //vm
  })
})

你知道nextTick****吗，他是干什么的，实现原理是什么？ 1.下定义：
Vue.nextTick([callback,context])
nextTick是全局API，由于vue的异步更新策略导致我们对数据的修改不会立即体现在dom上，此时如果想要立即获取更新后的dom状态，就需要使用这个方法。

说一说你对Vue响应式的理解        1.所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
2.mvvm框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。
3.以vue为例说明，通过数据响应式感知到数据变化，通知当前组件相关watcher入队，并且执行更新，更新时实际做的是把组件转换成虚拟DOM，使用patch算法（把虚拟DOM