vue面试题总结-2020

淩亂°似流年 2022-02-25 16:45 286阅读 0赞

小编在这里总结一些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
        }
      } 
    })