2020社招前端VUE面试题目

2020前端VUE面试题目集锦

年初由于疫情影响导致上家公司不景气，也由于自己一系列的考虑决定裸辞找工作，面试了十多家公司，最终进入了比较心仪的公司，我将这段时间面试所遇见的和VUE先关题目大概做个整合，其他的我会有空持续更新，希望能够帮到现在正在求职或者准备辞职找工作的朋友，废话不多说，直接进入正题。
一. VUE相关问题：
1： Vue的声明周期？
答：Vue一共有八个声明周期，分别为beforeCreate、created、beforeMounted、mounted、beforeUpdate、updated、beforeDestory、destoried；其中面试官一般会问到created和mounted的区别；这二者的区别就是created的时候数据已经加载完成，但是数据没有挂载到页面上，也就是页面还未完成渲染，mounted的时候页面已经完成了渲染，数据展示出来了。
2：讲一下MVVM？
答：MVVM是Model-View-ViewModel的缩写；其中Model代表的是数据模型，是我们在修改数据和操作业务逻辑的层面；View是UI组件，负责将数据模型转化为UI展示到页面上；ViewModel监听数据的改变还有控制视图行为、处理用户交互，简单讲就是连接Model和View的中间层
在MVVM框架中，数据层和UI层并没有直接的联系，而是通过ViewModel中间层进行交互，当数据层发生改变的时候回导致UI层数据重新渲染改变，而UI层改变的时候数据层的数据也会发生改变，是一个数据双向流的框架，不需要我们人为手动去操作。
3： Vue是数据双向绑定的，说一下原理？
答:这个地方要注意一下，在Vue3.0以前，Vue的双向数据绑定的原理是object.defineProperty()；实现数据劫持，劫持到每个属性的setter和getter属性，这个过程是看不到的，是内部进行的，获取数据的时候调用get、改变数据的时候调用set；从而实现一个数据的双向流动；重点：在Vue3.0发布之前这么说是没有问题的，但是在***

Vue3.0以后，数据的双向绑定改成了ES6的Proxy作为观察者机制， 取代了之前的object.defineProperty()；之所以取消，其实之前的数据劫持我们在开发的时候也会遇到这个弊端，比如操作数组的时候我们没办法监听到数组的下标给数组设置值，从而无法实现实时响应。解决这个的方法我们之前一般是用这几种方法来监听数组：push()、pop()、shift()、unshift()、splice()、sort()、reverse()；这个具体的自己可以再百度去详细了解一下，我们接下来说一下Proxy：Proxy 是ES6中新增的一个特性，可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。这种具体的可以查阅一下文档，其实面试的时候说到这也差不多了。
4： Vue里边组件之间的传值？
答：组件传值分为父传子、子传父、兄弟组件传值；父传子用的props、子传父用$emit传递事件、兄弟组件之间的传值需要一个中间组件eventBus作为过渡，相当于一个中转站，可以用来传递和接收；当然这个只适用于比较小的项目，大型项目还是建议使用VUEX做状态管理。
5： Vue路由实现有哪些方式？
答：vue的路由分为hash模式和history模式，默认是hash模式；就是浏览器中有符号“#”，使用window.location.hash可以读取到；另一种就是history模式，都是用“/”来分隔的，看起来比较美观一些，是HTML5的一个新特性
6：路由有哪些钩子函数？
答：路由钩子分为全局钩子（router.beforeEach、router.afterEach）；比如判断用户的登录转态来跳转页面就要用到这两个钩子来做控制；路由内独享钩子(beforeEnter)；组件内钩子(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)；组件内钩子一般用来监听组件跳转时候的各种状态，根据实际需求在这些钩子中做一系列逻辑操作。
7： $route 和 $router 区别？
答： $route 是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。
8： v-if和v-show的区别？
答：v-if是根据条件判断是否渲染到页面上；而v-show是改变display的值为block和none来控制是否展示；这二者如果页面会比较多的用到显示隐藏就使用v-show，如果不经常显示隐藏就用v-if。
9： computed和watch的使用场景和区别？
答：watch擅长处理一个数据影响多个数据，computed擅长处理一个数据受多个数据影响；这里注意二者区别；compute是计算属性，依赖其他属性值，并且computed的值哟缓存，只有它依赖的属性值发生改变，下一次获取computed的值才会重新计算；watch主要起的是‘观察’的作用，类似于某些数据的监听回调，每当监听的数据发生变化时候都会执行回调进行后续操作--------运用场景：当我们需要进行数值计算，并且依赖于其他数据时候，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值得时候都重新计算；------当我们需要在数据变化时候执行异步或者开销比较大的操作时候，应该使用watch，使用watch选项允许我们执行一步操作，限制我们执行该操作的频率，并在我们得到最终的结果前设置中间状态，这些都是计算属性无法做到的。
10： $nextTick的使用？
答：理解，nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单理解就是当数据更新了，在dom中渲染后，自动执行该函数；可以用在created中此时dom没有渲染，直接调用不会起作用
11： vue中的data为什么是一个函数而不是对象？
答：这样做可以防止数据的相互污染，当多个方法调用同一个data数据的时候都是使用的默认值而不会互相干扰
12： 的作用？
答：keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减少加载时间及性能消耗，提高用户体验性。
13： v-for的时候为什么要使用key？
答：这个说起来比较复杂，内容太多，大概思路就是和vue使用的diff算法相关，可以自己去了解一下
14： v-if和v-for的优先级？
答：在vue的官网里边其实有说明，官方是不建议v-for和v-if同时使用的；但是如果同时使用的话，通过代码证实v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
15： Vue路由和组件实现懒加载？
答：1–vue异步组件实现懒加载：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)，
2–const HelloWorld = （）=>import(‘需要加载的模块地址’)；组件的懒加载和路由的类似，也是这两种方式
16： 如何让CSS只在当前组件中起作用，以及如果设置了只在当前组件中起作用的时候如何更改其他组件的样式？
答：在当前组件的 < style > 标签中添加scoped–> < style scoped>；当设置了只在当前组件起作用的时候如果要更改其他组件的样式需要用到样式穿透，样式穿透有两种方式，一种是 >>> ；另一种是添加 /deep/
17： Vue中如何跨域？
答：打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { '/api': {  //使用"/api"来代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路径重写 } }
}

使用axios请求数据时直接使用“/api”：

getData () { axios.get('/api/bj11x5.json', function (res) { console.log(res) })

18： vuex有哪几种状态和属性？
答：5种，分别是state=>基本数据、getter=>从基本数据派生的数据、mutation=>提交更改数据的方法，同步、action=>包裹mutations，使之可以异步、modules=>模块化vuex
19： vuex流程？
答：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对应的值。最后通过getter把对应的值抛出去，在页面的计算属性中，通过mapGetter来动态获取state总的值

以上是我目前大概能想到的一些VUE面试相关题目，后续如果想到其他的还会继续更新，有哪些回答的有错误的地方欢迎大家指出错误，一起沟通，谢谢