vue常见面试题

一、vue的两大特点

1、数据驱动

2、组件化

 二、vue的优缺点

优点：

1、轻量级框架：只关注视图层

 2、双向数据绑定：保留了angular的特点，操作数据更为简单

3、组件化：保留了react的优点

4、视图、数据、结构分离：更改数据更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作

5、虚拟DOM：DOM操作非常耗费性能，不再使用原生的dom操作节点，极大解放了dom操作，但具体操作的还是dom，只不过是换了一种方式

6、运行速度快

缺点：

1、不支持低版本的浏览器，最低只支持到IE9

2、不利于SEO的优化（如果要支持SEO，建议通过服务器端来渲染组件）

3、第一次加载首页耗时较长

4、不可以使用浏览器的导航按钮，需要自行实现前进后退

三、谈谈你对SPA的理解，它的优缺点是什么

介绍：

1、仅在页面初始化时加载相应的html，js，css，页面一旦加载完成，不会因为用户的操作进行页面的重新加载或跳转，页面变化是利用路由机制实现HTML内容的变换

优点： 

1、用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染

2、减少了不必要的跳转和重复渲染，相对减轻了服务器的压力

3、前后端职责分离，前端进行交互逻辑，后端负责数据处理

缺点：

1、初次加载耗时多

2、不能使用浏览器的前进后退功能，因为单页面应用在一个页面中显示所有的内容

3、不利于搜索引擎

四、SPA首屏加载速度慢怎么解决

介绍：从用户输入网址到首屏内容渲染完成的时间

加载慢的原因：

1、网络延时

2、资源文件体积过大

3、资源发送请求重复

4、加载脚本的时候，渲染内容堵塞了

解决方式：

1、减小入口文件体积

2、静态资源本地缓存

3、按需加载UI框架

4、压缩图片资源

5、使用SSR

五、对MVVM的理解 

介绍：MVVM由Model、VIew、ViewModel三部分构成，Model代表数据模型，可以在Model中操作数据及业务逻辑；View代表UI组件，它负责将数据模型转换成UI展现出来；ViewModel是同步View和Model的桥梁对象

六、Vue数据双向绑定原理 （响应式原理）

原理：采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()l来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调

七、data为什么是一个函数而不是一个对象

 函数让数据相互独立，互不影响，如果是对象，引用同一块内存地址，组件使用的时候数据会相互影响（在一个组件内改变了数据，在其他组件引用的同一个数据也会变化）

八、scoped的作用

介绍：样式独立，互不影响，该样式只在当前页面有效

vue常用的指令

v-bind

v-model

v-for

v-if

v-show

v-on

九、v-for和v-if能不能一起使用？为什么？

 原因：v-for的优先级比v-if的高，如果一起使用的话，会带来性能方面的浪费，每次渲染都会先循环再进行条件判断

如果要解决这种情况有两种方式

方式一：外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

示例：

<template v-if="isShow">
    <p v-for="item in items">
</template>

 方式二：如果条件在循环内部，可通过计算属性computed处理数据

示例：

computed:{
    items:function(){
        return this.list.filter(function(item){
            return item.isShow
        })
    }
}

十、v-if和v-show的异同点

相同点：条件渲染，条件为真显示，条件为假隐藏1

不同点：

v-for：动态创建或删除节点控制元素的显示隐藏，适用于切换不频繁的场景

v-show：通过元素的display属性控制元素的显示隐藏，适用于频繁切换

十一、vue中computed和watch的区别

computed：计算属性（通过return返回处理的数据，可以包含大量的逻辑运算），有依赖性，具有缓存性

watch：监听数据的变化

十二、过滤器

 介绍：文本格式化，处理数据格式

分类：局部过滤和全局过滤

示例：

// 全局使用
Vue.filter('globalFilter', function(){
    // ...
})
​
// 局部使用
filters: {
    formatMoney(num) {
        // ...
    },
}
<p>过滤器{{ money | formatMoney }}</p>

十三、插槽（在另一篇里有详解）

十四、vuex 

介绍：数据管理中心

核心：

state：vuex中的数据，辅助函数mapState

getters：类似于计算属性，辅助函数mapGetters

mutations：更改vuex中的store中的唯一方法，是同步的，辅助函数mapMutations

actions：包含任意异步操作，acton提交的是mutation，而不是直接变更状态，辅助函数mapActions

modules ：模块，Vuex允许我们将store分割成模块，每个模块有自己的state，getters，actions，mutations

页面上如何调用五大核心

调用state：this.$store.state.变量名

调用mutations：this.$store.commit('mutations中定义的方法')

调用actions：this.$store.dispatch('actions中定义的方法')

调用getters：this.$store.getters('getters中定义的方法')

actions调用mutations中的方法：

fn(context){

        context.commit('mutations中定义的方法')

}

十五、vue生命周期

介绍：从创建到消亡的过程，到了一定时期会自动调用

阶段：

生命周期	说明
beforeCreate	创建之前，无法获取数据，无法调用方法
created	创建之后，可以在这进行数据请求
beforeMount	挂载前
mounted	挂载后，可以获取dom
beforeUpdate	数据更新前
update	数据更新后
beforeDestroy	销毁前
destroyed	销毁后，组件已删除，获取不到dom

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

十六、组件通信方式

父传子：props

子传父：$emit

同级：eventBus，vuex

十七、router和route的区别

router：全局路由对象，里面含有很多属性和子对象如history，经常用到的路由跳转this.$router.push

route：当前路由对象（路由信息），可以从里面获取name,path,params,query等 

十八、路由跳转方式

方式一：声明式跳转（标签跳转）

示例：

  <router-link :to="{name:'home'}"></router-link>
  <router-link :to="{path:'/home'}"></router-link>

 方式二：编程式跳转（js跳转）

示例：

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

十九、vue-router路由传参

 

url拼接参数："/a?a1=a1"，接收页面：this.$route.query.a1

query传参：{path: 'a', query: {a2:'a2'}}，接收页面：this.$route.query.a2

params传参：{name: 'a', params: {a3:'a3'}}，接收页面：this.$route.params.a3

动态路由传参：/path/a4 ，接收页面：this.$route.params.id，路由：path: "/a/:id"

二十、keep-alive组件

介绍：是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom

特点：

1、保留组件状态

2、包裹动态组件，会缓存不活动的组件实例，而不是销毁它们

二十一、路由守卫有哪些

 介绍：页面的访问权限

分类：

1、全局路由守卫：beforeEach(登录拦截) 、afterEach()

2、路由独享守卫：beforeEnter(部分路由的登录拦截)

示例：

routes: [
         {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => { 
             //do something
            }
         }
        ]

3、组件内守卫：beforeRouteEnter(权限管理)，  beforeRouteUpdate()、  beforeRouteLeave()

当从a页面离开进入b页面时触发的生命周期
    1.beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
    2.beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
    3.beforeEnter: 路由独享守卫
    4.beforeRouteEnter: 路由的组件进入路由前钩子。
    5.beforeResolve:路由全局解析守卫
    6.afterEach:路由全局后置钩子
    7.beforeCreate:组件生命周期，不能访问this。
    8.created:组件生命周期，可以访问this，不能访问dom。
    9.beforeMount:组件生命周期
    10.deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
    11.mounted:访问/操作dom。
    12.activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
    13.执行beforeRouteEnter回调函数next。

二十二、hash和history模式

hash模式：

1、URL后面带有#锚点

2、hash值变化不会导致浏览器向服务器发出请求，而是触发hashchange事件

3、hash发生变化的URL会被浏览器记录下来，浏览器的前进后退可以用了

history模式：

1、只能兼容到IE8

2、不仅可以在URL里放参数，还可以将参数存放在一个特定的对象中

3、怕刷新 

二十三、路由懒加载

介绍：等需要的时候加载页面

语法：

component: () => import('./Foo.vue')
// 或者
component: resolve => require(['@/components/home'],resolve)

 二十四、动态路由

通过addRoutes()添加路由信息