前端面试题整理—Vue篇

 一、对vue的理解，有什么特色，vue为何不能兼容IE8及如下浏览器

　　vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统

　　vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算

　　特色：简洁轻量、数据驱动、组件化、模块友好

　　vue.js使用了IE8没法模拟的 ECMAScript 5 特性，没有替代方案

 

二、简述Vue双向数据绑定的原理

　　主要是经过Object对象的defineProperty属性，重写data的set和get函数来实现的

　　vue是经过数据劫持的方式来作数据绑定，最核心的方法就是经过Object.defineProperty()来实现对属性的劫持

　　在设置或者获取的时候咱们就能够在get或者set方法里加入其余的触发函数，达到监听数据变更的目的

 

三、什么是MVVM，和MVC的区别

　　MVVM是Model-View-ViewModel的缩写

　　Model层表明数据模型

　　View表明组件视图，负责将数据模型转化成UI展示出来

　　ViewModel是一个同步 View 和 Model 的对象（双向绑定）

　　在MVVM中，View和Model之间并无直接的联系，而是经过ViewModel进行交互，

　　Model和ViewModel之间的交互是双向的，所以 经过视图操做数据，也能经过数据操做视图

　　MVC是Model-View- Controller的简写。即模型-视图-控制器，使用MVC的目的是为了将M和V相分离

　　MVVM与MVC最大的区别就是实现了View和Model的自动同步，也就是当Model的属性改变时

　　咱们不用再手动操做Dom来改变View，而是改变后该属性对应View层会自动改变

 

四、vue.js的两个核心是什么

　　数据驱动和组件化思想

 

五、vue与angular的区别

　　vue的双向邦定是基于ES5中getter/setter来实现的，而angular是由本身实现一套模版编译规则，须要进行所谓的“脏值”检查，vue则不须要

　　vue须要提供一个el对象进行实例化，后续的全部做用范围也是在el对象之下，而angular而是整个html页面

 

六、说下vue的底层原理

　　Vue的模式是m-v-vm模式，即（model-view-modelView），经过modelView做为中间层，进行双向数据的绑定与变化

　　1）经过创建虚拟dom树document.createDocumentFragment(),方法建立虚拟dom树

　　2）一旦被监测的数据改变，会经过Object.defineProperty定义的数据拦截，截取到数据的变化

　　3）截取到的数据变化，从而经过订阅——发布者模式，触发Watcher（观察者）,从而改变虚拟dom的中的具体数据

　　4）最后经过更新虚拟dom的元素值，从而改变最后渲染dom树的值，完成双向绑定

 

七、简述vue等单页面应用及优缺点

　　单页面应用，用户全部的操做都在一个页面完成

　　优势：无刷新，用户体验好，共享资源只须要请求一次便可，采用组件化的思想，代码结构更加规范化，便于修改和调整

　　缺点：对搜索引擎不友好、低版本不支持，第一次加载首页耗时相对较长，不能使用浏览器导航按钮，须要自行实现前进后退

 

八、React与Vue对比

　　相同点：

　　都支持服务器端渲染、数据驱动视图，状态管理

　　都有虚拟DOM、组件化开发、经过props参数进行父子组件数据的传递

　　不一样点：

　　React严格上只针对MVC的C层,Vue则是MVVM模式

　　虚拟DOM方面

　　vue会跟踪每个组件的依赖关系,不须要从新渲染整个组件树，而React每当应用的状态被改变时,所有组件都会从新渲染

　　视图渲染方面

　　React采用JSX渲染到DOM，vue使用的是template模板

　　数据绑定方面

　　vue实现了数据的双向绑定，react数据流动是单向的

　　state对象方面

　　react应用中不可变的,须要使用setState方法更新状态

　　vue中,state对象不是必须的,数据由data属性在vue对象中管理

 

九、前端组件化有什么优点

　　1）提升开发效率

　　2）方便重复使用

　　3）便于协同开发

　　4）更容易管理维护

 

十、说一下vue的生命周期，当使用keep-alive属性时，会增长哪两个生命周期

　　建立前/后beforeCreate/created： 

　　在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el尚未

　　载入前/后beforeMount/mounted：

　　在beforeMount阶段，vue实例的el和data都初始化了，但仍是挂载以前为虚拟的dom节点，data还没有替换。在mounted阶段，vue实例挂载完成，data成功渲染。

　　更新前/后beforeUpdate/updated：

　　当data变化时，会触发beforeUpdate和updated方法。不经常使用

　　销毁前/后beforeDestory/destoryed：

　　beforeDestory是在vue实例销毁前触发，通常在这里要经过removeEventListener解除手动绑定的事件

　　执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，可是dom结构依然存在

 

　　在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:

　　activated 与 deactivated

 

十一、说说你对angular脏检查理解　

　　angular中没法判断数据是否作了更改，因此设置了一些条件，当触发这些条件以后就会执行一个检测来遍历全部的数据，对比刚才更改的地方执行变化

　　这个检查很不科学并且效率不高，有不少多余的地方

 

十二、如何使css只在当前组件起做用

　　若是想写的css只对当前组件起做用，则在style中写入scoped

 

1三、vue中v-if和v-show的区别

　　v-if和v-show都是用来控制元素的渲染

　　v-if是根据后面数据的真假，来判断DOM的添加删除等操做

　　v-show只是在修改元素的css样式（display属性值）

　　v-if若是初始渲染条件为真，就渲染，反之就不渲染

　　v-show无论初始条件是否为真，都会被渲染

　　v-if有更高的切换消耗，不适合作频繁的切换

　　 v-show有更高的初始渲染消耗，适合作频繁的切换

 

 1四、vue有哪些修饰符

　　事件修饰符：stop、prevent、self、once

　　键盘修饰符：enter、space、up、down

　　表单修饰符修饰符：number、trim、lazy

 

1五、列举vue的几种经常使用指令　

　　v-if、v-show、v-for、v-on、v-bind、v-model、v-once

 

1六、v-on能够绑定多个方法吗？

　　能够

<input v-on:keyup.enter="submit" v-on:focus="onFocus">

 

1七、vue中$mount与el区别

　　$mount和el二者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中
　　若是在实例化vue时指定el，则该vue将会渲染在el对应的DOM中
　　没有指定el，则vue实例会处于一种“未挂载”的状态，此时经过$mount来手动执行挂载

1八、vue事件修饰符怎么使用，举例说明

        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件再也不重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符能够串联 -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>
        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <div v-on:click.self="doThat">...</div>    

 

1九、vue中key值和is的做用

　　使用key，vue会基于key的变化从新排列元素顺序，而且移除key不存在的元素。能够作优化处理

　　is能够扩展原生html元素，也能够绑定动态组件

 

20、组件中data为何是函数

　　由于组件是用来复用的，JS 里对象是引用关系，这样做用域没有隔离

　　而 new Vue 的实例，是不会被复用的，所以不存在引用对象的问题

 

2一、什么是单向数据流动

　　这个概念出如今组件通讯。数据从父级流向子级，数据自己仍是父级的

　　若是操做子级要改变父级的数据，只能经过子级告知父级要操做哪一个数据

　　而后让父级去修改本身的数据，修改完毕再传给子级

 

2二、什么是vue的计算属性，有几种用法

　　computed 计算属性，能监听vue中数据的变化，当数据发生变化时候会触发

　　一、函数形式

       computed:{
            listenArr(){          
            //使用data中数据，自动帮你监听数据的变化
            //返回的结果就是经过改变数据 作的另外一件事情         
            }
        }

　　二、对象形式

        computed:{
            listenArr:{
                get(){
                    //获取时候
                },
                set(newVal){
                    //修改时候
                }
            }
        }
        //当使用get set时候，computed中定义的属性为一个对象
        //不使用get set时候，computed中定义的属性能够是一个函数
      

 

2三、说一下vue组件之间的传递

　　父级传递子级：

　　首先在子组件上加一个v-bind:自定义属性,等于父级的数据，子组件经过props方法接收数据

　　子级传递父级：

　　在子组件上绑定一个自定义事件，而且传入父级的“事件”处理函数

　　在子组件内部使用$emit监听这个自定义事件，this.$emit('自定义事件名',参数)

 

2四、vue中computed和watch的区别

　　computed可以监听vue数据上的变化，页面上来就执行一次，每改变一次数据就又触发，在操做数据的时候，会派生出另外一个事情

　　watch当指定数据发生变化时候触发。一开始不会触发，只有指定的数据发生变化就又触发一次

　　watch能够deep深度添加，computed不能够

 

2五、对vue中nextTick的理解

　　vue中nextTick能够拿到更新后的DOM元素

　　若是在mounted下不能准确拿到DOM元素，可使用nextTick

　　在Vue生命周期的created()钩子函数进行的DOM操做必定要放在Vue.nextTick()的回调函数中

 

2六、自定义指令(v-check,v-focus) 方法有哪些? 它有哪些钩子函数? 有哪些钩子函数参数

　　全局定义指令：在vue对象的directive方法里面有两个参数,分别为指令名称、函数组件内定义指令：directives

　　钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)

　　钩子函数参数： el、binding

 

2七、如何优化SPA应用的首屏加载速度慢的问题

　　1）将公用的JS库经过script标签外部引入，让浏览器并行下载资源文件，提升下载速度

　　2）在配置 路由时，页面和组件使用懒加载方式引入，在调用组件时再加载对应的js文件

　　3）加一个首屏 loading 图，提高用户体验

 

2八、请分别说出vue修饰符trim、number、lazy的做用

　　trim:用来过滤先后的空格

　　number:将用户输入的数据绑定为number类型

　　lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步

 

2九、vue-router 有哪几种导航钩子，它们有哪些参数

　　全局导航钩子：to、from、next

　　组件内的钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

　　单个路由独享的钩子：beforeEnter

 

30、路由之间如何进行跳转

　　声明式（标签跳转） <router-link :to="xxx">

　　编程式（ js 跳转） router.push('index')

 

3一、说一下懒加载（按需加载路由）

　　webpack 中提供了 require.ensure()来实现按需加载。之前引入路由是经过 import 这样的方式引入，改成 const 定义的方式进行引入

　　不进行页面按需加载引入方式

import  home   from '../common/home.vue'

　　进行页面按需加载的引入方式：

const home = r => require.ensure( [], () => r (require('../common/home.vue')))

 

 3二、vue中$router和$route区别

　　router是VueRouter的一个对象，经过Vue.use(VueRouter)，和VueRouter构造函数获得一个router的实例对象

　　route是一个跳转的路由对象，每个路由都会有一个route对象

　　是一个局部的对象，能够获取对应的name,path,params,query等

 

3三、vue-loader是什么？使用它的用途有哪些

　　vue文件的一个加载器，跟template/js/style转换成js模块

　　用途：js能够写es六、style样式能够scss或less、template能够加jade等

 

3四、vue-router中query与params区别

　　 query和params二者都是在Vue路由中传参

　　query用path来引入，params只能用name来传递，不能使用path 

　　query更像get请求（地址栏会显示参数），而params更像post（不会在地址栏显示参数）

 

3五、怎么定义vue-router的动态路由？怎么获取传过来的动态参数

　　在router目录下的index.js文件中，对path属性加上/:id

　　使用router对象的params.id

 

3六、嵌套路由怎么定义

　　在 VueRouter 的参数中使用 children 配置，这样就能够很好的实现路由嵌套

　　children 里面是子路由，固然子路由里面还能够继续嵌套子路由

 

3七、active-class是哪一个组件的属性？

　　vue-router模块的router-link组件

 

3八、举例vue经常使用的路由对象，以及做用

　　$route.name 当前路由的名称

　　$route.path 当前路由对象的路径

　　$route.meta 在路由里面埋一个字段，当切换路由时候把信息传过去

　　$route.query 查询信息包含路由中查询参数的键值对

　　$route.hash 当前路径的哈希值，带#

　　$route.params 预设的变量，切换时候经过parmas带过去某个id的值

 

3九、请说出vue.cli项目中src目录每一个文件夹和文件的用法

　　main.js是入口文件

　　app.vue是一个主组件

　　view放视图页面

　　components放组件

　　router是定义路由相关的配置

　　assets文件夹是放静态资源

 

40、vue.cli中怎样使用自定义的组件

　　第一步：在components目录新建你的组件文件

　　第二步：在须要用的页面（组件）中导入

　　第三步：注入到vue的子组件的components属性上面

　　第四步：在template视图view中使用

 

4一、什么是vue生命周期，做用是什么，第一次页面加载会触发哪几个钩子

　　vue实例从建立到销毁的过程

　　也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期

　　做用：生命周期中有多个事件钩子，让咱们在控制Vue实例的过程时更容易造成好的逻辑

　　第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

 

4二、简单描述每一个周期具体适合哪些场景

　　beforecreate : 能够在这加个loading事件，在加载实例时触发

　　created : 初始化完成时的操做，好比结束loading事件，也能够操做异步请求

　　mounted : 挂载元素，获取到DOM节点，推荐使用nextTick

　　updated : 若是对数据统一处理，在这里写上相应函数

　　beforeDestroy : 能够作一个确认中止事件的确认框，关掉定时器

　　destroyed：当前组件已被删除，清空相关内容

 

4三、说一下vue中slot插槽

　　插槽就是vue实现的一套内容分发的API，将插槽元素做为承载分发内容的出口。

　　在组件模板中默认占一个位置，当使用组件标签时候，组件标签的内容会自动替换掉内容

　　slot中能够设置一些默认的内容，若是传递了内容则会替换掉，若是没有名字的标签会默认放到default中

 

4四、computed、watch各是一个对象时，它们有哪些选项？ computed 和 methods 有什么区别？ computed 是否能依赖其它组件的数据？

　　computed有get set两个选项

　　watch有handler deep 是否深度，immeditate 是否当即执行

　　methods是一个对象，能够在对象中定义一个个方法，能接受参数，而computed不能

　　computed是能够缓存的，methods不会

　　computed能够依赖其余computed，甚至是其余组件的data

 

4五、如何理解Vue中的Render渲染函数

　　Vue通常使用template来建立HTML，而后有的时候，咱们须要使用javascript来建立html，这时候咱们须要使用render函数

　　render函数return一个createElement组件中的子元素存储在组件实列中

　　createElement返回的是包含的信息会告诉VUE页面上须要渲染什么样的节点。咱们称这样的节点为虚拟DOM

 

4六、vuex是什么？怎么使用？哪一种功能场景使用它？

　　vuex是vue框架中的状态管理器

　　在main.js引入store，注入，新建了一个目录store，export导出

　　适用场景：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车

 

4七、在Vue生命周期的created()钩子函数进行的DOM操做必定要放在Vue.nextTick() 回调函数中。缘由是什么呢

　　在 created() 钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行 DOM 操做无异于徒劳，

　　因此在数据变化后要执行的某个操做，而这个操做须要使用随数据改变而改变的DOM结构的时候，这个操做都应该放进Vue.nextTick() 的回调函数中

 

4八、vuex中store的特性是什么

　　vuex 就是一个仓库，仓库里放了不少对象。

　　其中 state 就是数据源存放地，对应于通常 vue 对象里面的 data

　　state 里面存放的数据是响应式的，vue 组件从 store 读取数据，如果 store 中的数据发生改变，依赖这相数据的组件也会发生改变

　　它经过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

 

4九、vue中ajax请求代码应该写在组件的 methods 中仍是vuex的action中？

　　若是请求来的数据不是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入 vuex 的 state 里

　　若是被其余地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

 

50、说一下vuex的思想

　　Vuex 的思想是 当咱们在页面上点击一个按钮，它会触发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 当即会改变state,

　　 state 改变之后,咱们的页面会state 获取数据，页面发生了变化。 Store 对象，包含了咱们谈到的全部内容，action, state, mutation