vue面试题总结-2020

小编在这里总结一些vue常见的面试题，希望能够帮助到你们的面试

你对vue中mvvm的模式设计有什么感想？

mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好

vue中利用索引修改数组的时候，页面会跟着同步吗？

利用索引修改数组的时候，页面不会进行同步，此时应该利用vue.set的方法进行设置数据

vue首屏加载过慢如何解决？

• 路由懒加载，会将原来打包一个app.js的文件打包成多个文件 ,异步组件，按需加载

• webpack开启gzip压缩

• 如果图片过多，开启图片懒加载

• 使用cdn资源

• 如果首页是登录页，做多入口

vue中v-if和v-show有什么区别？

v-if和v-show都会让元素显示和隐藏，但是v-if是通过移除和添加dom元素，v-show是通过display:none来实现隐藏

vue中的父子组件传值和兄弟组件传值都是如何实现的？

父向子传值，主要通过子组件的props，获取父组件绑定的数据

子向父传值，主要通过子组件利用$emit触发父组件上的事件

兄弟组件传值利用eventbus的方式，主要利用创建一个空的vm实例，作为中间者

你之前有做过spa类型的项目吗？怎么实现的？

spa就是单页面应用程序，而单页面应用程序，主要依靠路由来实现，路由根据不同的hash值来展示不同的组件

路由中如何去除url上的‘#’#

路由有两种模式，一种为hash模式，另一种为history模式，开启history模式后自动去除#，开启history模式需要后台配合

new VueRouter({
  mode:'history',
  route:[]
})

vue中的单项数据流和双向数据绑定是什意思？

单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据

双向数据绑定：是指数据和页面进行双向绑定，相互影响

vue中双向数据绑定的原理是什么？

vue双向数据绑定的原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的，通过Object.defineProperty监听数据发生变化然后通知订阅者（watcher），订阅者触发响应的回调

为什么在使用v-for的时候需要添加key属性

因为vue在更新渲染dom的时候是根据新旧dom数进行对比的，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

为什么vue组件中的data必须是函数

因为如果默认为data是对象的话，对象为引用类型，这样的话，所有复用的组件都是引用的同一个数据，但是如果是函数的话，每次函数都会先创建一个新的数据，从而使每个组件的数据独立

你对vue生命周期的理解怎么样？

vue的生命周期就是vue实例的创建运行销毁的一个过程，在不同的阶段会触发不同的函数，这些函数也就是生命周期函数，比如create，在实例创建数据已经完毕，能够做一些数据的初始化，但是dom还没有渲染，mounted页面数据全部渲染完毕，可以在此函数内部操作dom

你知道webpack中babel、plugin、loader都有什么作用吗？

babel用来出来es6转es5，plugin配置webpack的一些插件，loader用来配置解析处理第三方文件的

keep-alive的作用

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

你知道路由钩子吗？

路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截所有的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了

项目中如果涉及多个组件数据共享你如何解决？

可以启用vuex

vuex中的五个属性都是什么? 有什么作用？

• State 存储数据
• Getter 可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
• Action 包含任意异步操作，通过提交 mutation 间接更变状态
• Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块

vue中如何实现深度监视？

new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
         console.log('obj.a changed');
      },
      deep: true
    }
  } 
})