面试总结vue篇

前言router和route的区别vue修改一个数组里面的值，页面不会发生改变，怎么让页面发生改变vue修改框架里面的样式computed和watch的区别，在什么时候会用到Vue组件里面data为什么必须是个函数路由钩子有哪些vue阻止冒泡vue中key的作用vue的原理v-model的原理v-show和v-if的区别组件传值的方式vue子组件与父组件的created和mounted两个生命周期函数的执行顺序created和mounted的区别

前言

现在框架越来越流行，几乎每家公司都会要求会用框架（毕竟多掌握点技能可以多要点钱），特意将经常问到的vue的一些面试问题整理出来，分享给大家。

router和route的区别

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。 route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。 （可以自行打印一下区分一下）

vue修改一个数组里面的值，页面不会发生改变，怎么让页面发生改变

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。 解决方案： this.$set(this.tableData, i, this.tableData[i])

vue修改框架里面的样式

可以用一个选择器来深度地帮助我们找到这个元素，比如 /deep/

computed和watch的区别，在什么时候会用到

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用； 使用计算属性computed： fullName: function () { return this.firstName + ' ' +this.lastName } (首先触发set方法，然后执行get方法) fullName: { // getter get: function () { console.log('get'); return this.firstName + ' ' +this.lastName; }, // setter set: function (newValue) { this.firstName = '120'; this.lastName = '021'; console.log('set'); } } watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体； watch: { firstName: function (val) { this.fullName = val + ' ' +this.lastName }, lastName: function (val) { this.fullName = this.firstName + '' + val } }

Vue组件里面data为什么必须是个函数

当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了

路由钩子有哪些

(1).全局钩子函数 全局钩子函数有两个：beforeEach 和 afterEach，由路由实例调用执行。 beforeEach(to,from,next) 进入路由之前被调用，通常进行判断登录状态、鉴权等操作。 应用：登录拦截，部分地方使用伪代码形式 afterEach(to,from) 进入路由之后被调用，与beforeEach不同的是，这个钩子只接收两个参数，不能改变路由跳转。 应用：访问不同路由地址，显示每个页面对应的title (2).某个路由独享的钩子函数 routers: [ { path:’/, name:‘Home’, meta:{title:“首页”}, beforeEnter(to,from,next){ next() } } (3).组件内的钩子函数 组件内的钩子函数有三个：beforeRouteEnter，beforeRouteUpdate、beforeRouteLeave，直接被定义在每个vm实例上。 beforeRouteEnter: 进入组件前被调用，此时组件实例还没有被创建，所以函数内部不能访问this，如果需要访问当前vue实例，可以通过next() 方法的回调函数接收一个vm实例。 应用：访问当前vue实例的属性

beforeRouteUpdate: 在路由发生变化，但是组件被复用时被调用。 应用：父路由监听子路由变化

vue阻止冒泡

vue.js取消事件冒泡 < div @click.stop=“doSomething($event)”>vue取消事件冒泡

vue.js阻止默认事件

< div @click.prevent=“doSomething($event)”>vue阻止默认事件

vue中key的作用

key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

vue的原理

vue的响应式层实现方法是object.defineProperty()方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响。vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更至的同时，通知watter实例对view层进行更新。

v-model的原理

v-model是vue的一个语法糖，通过v-bind去单项绑定vue实例里面的data数据，然后通过各种事件比如@change,@input等去触发事件修改实例数据的值。

v-show和v-if的区别

v-show本质是通过设置css中的display设置为none,控制隐藏 v-if是动态的向DOM树内设置或者删除DOM元素

组件传值的方式

(1)父传子： 传递：当子组件在父组件中当作标签使用的时候，给当前子组件绑定一个自定义属性，只为需要传递的数据。 接收：子组件内部通过props属性来接受。props接收的方式有两种，一种是数组，另一种是对象 (2)子传父： 传递：当子组件在父组件中当作标签使用的时候，给当前子组件绑定一个自定义属性，只为需要传递的数据。 接收：在子组件内部通过this.$emit来调用自定义方法，值通过函数进行传递

(3)非父子组件传递 在vue的原型上添加一个公共方法即可（只要能让组件拥有共同的$on,$emit就可以实现非父子组件传值） eventBus或者vuex

vue子组件与父组件的created和mounted两个生命周期函数的执行顺序

父组件的created->子组件的created->子组件的mounted->父组件的mounted

created和mounted的区别

created是在实例创建完之后立即调用的，模板还没有被渲染成html mounted是在dom元素加载完成之后执行的，通常会在引入插件时使用