写给前端的面试题 （一）

 1.vue组件中的data定义必须是一个函数？

        如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

2.Vuex是什么？怎么使用？那些场景使用过？

• vuex 就是一个仓库，仓库里放了很多对象。
• 其中 state 存放的是数据状态，不可以直接修改里面的数据。
• getters类似vue的计算属性，主要用来过滤一些数据。
• mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。
• actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。

一般什么样的数据会放在 State 中呢？
目前主要有两种数据会使用 vuex 进行管理： 1、组件之间全局共享的数据 2、通过后端异步请求的数据 比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态

• 怎么使用Vuex? 在main.js引入store，注入。新建了一个目录store，… export
• 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

3.什么是slot，有哪些类型的slot？

        它是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。vue的slot主要分三种，默认插槽，具名插槽，作用域插槽；使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息 。

默认插槽：<slot></slot>

        在子组件中定义一个默认插槽

具名插槽：<slot name="名称"></slot>

        其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将内容根据name来填充对应的内容。

作用域插槽：<slot :自定义name=data中的属性或对象></slot>

4.Vue中常用的指令有哪些，以及功能？

        v-model双向绑定数据

        v-cloak 解决插值表达式的闪烁问题
        v-for循环
        v-if 元素的存在与否
        v-else 搭配v-if使用
        v-else-if搭配v-if使用
        v-bind 属性绑定
        v-style 通过v-bind实现style的绑定
        v-class 通过v-bind实现class的绑定
        v-on 事件绑定

        v-text 读取文本（会解析标签）
        v-html 读取文本（不会解析标签）
        v-once 只渲染一次
        v-pre 把标签内部的元素原位输出
        v-show 是否显示

5.vue组件通信是如何实现？

        父传子：通过props接收

        子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

         $parent / $children：访问父 / 子实例

                $parent ：访问父实例，如果当前实例有的话。

                $children:当前实例的直接子组件。

                ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

        $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。 

        $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

·  provide/inject:vue2.2.0 新增API,以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 

provide / inject API主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

6.Vue中computed，watch和methods有什么区别？

        computed是计算属性,具有缓存性。
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。
用于依赖发生变化时，触发属性重新计算。
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。

        watch更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props,$emit或者本组件的值,当数据变化时来执行回调进行后续操作。
无缓存性，页面重新渲染时值不变化也会执行。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销。

        应用场景：
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

7.什么是vue生命周期？每个生命周期的作用是什么？

        vue生命周期是指vue是对象从创建到销毁的过程。

        在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
        创建阶段：
                beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
                created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
        载入阶段：
                beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
                mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
        更新阶段：
                beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
                updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
        销毁阶段：
                beforedestroy：当要销毁vue实例时，在销毁之前执行。
                destroy：在销毁vue实例时执行。

8.Keep-alive的作用是什么？使用它的目的是什么？

        keep-alive可以实现组件缓存，当组件切换时,主要用于保留组件状态或避免重新渲染

        使用场景：比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

        常用的两个属性include/exclude，允许组件有条件的进行缓存

        两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态

9.什么是addRoute，有什么作用？

        AddRoute是动态添加路由，主要作用是添加静态路由

10.NextTick的实现原理？

        nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM

11.Mixins有什么作用，如何使用？

        Mixins是可以提取vue各个组件内中可复用的方法（包含了生命周期）

Mixins 允许自己定义样式，这些样式可以在全局样式表里重用，而不用去借助一些无语义的类，比如.float-left。Mixins可以包含完整的CSS样式规则和其他Sass中的特性规则等。mixin还可以接收参数，不同的参数值将产生不同的样式规则。

12.$route和$router的区别？

        $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

        而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

13.vue-router有哪些导航守卫函数？

        全局前置守卫router.beforeEach(to,from,next){} 调用next（）才执行

        全局后置守卫router.afterEach(to,from,next){}  没有next方法

        全局解析守卫router.beforeResolve(to,from,next){}调用next（）才执行

        路由独享守卫 beforeEnter(to,from,next){}调用next

        组件内守卫 beforeRouteEnter(to,from,next){进入}调用next

        beforeRouteLeave(to,from,next){离开}调用next

        beforeRouteUpdate(to,from,next){}在重用的组件中调用

每个守卫方法接收三个参数：
        to:目标路由对象  进入
        from:准备要离开的路由
        next():进行管道中的下一个钩子。可传递参数有布尔值false，直接写路径'/'或{path:'/'},回调函数

14.Vue中key值的作用？

        ·  key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。

        ·  diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。

        ·  简单来说，主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们

15.vue中v-model双向绑定原理？

        v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性

16.Vue中hash模式和history模式的区别？

        hash模式是依靠onhashchange事件(监听location.hash的改变)
        history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。

        Hash是有#号的

      Hash模式和history模式它们地址栏里面显示方式不同，Hash可以通过地址栏直接加载，history不可以通过地址栏直接加载

17.vue的响应式原理中Object.defineProperty有什么缺陷？

        Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；

        Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象

        Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性

18.写出对mvvm的理解？

         MVVM 是 Model-View-ViewModel 的缩写

        Model:表数据模型,因为它仅仅关注数据本身，不关心任何行为

        View:用户操作界面,当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

        ViewModel :业务逻辑层,也是View和Model层的桥梁

        总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

19.Params参数和query参数的区别？

        用法上：query要用path来引入，params要用name来引入。

        展示上：query在url中显示参数，params在url中不显示参数

20.说说你对spa单页面应用的理解？

        概念：single-page application是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。
       理解：简单来说SPA的网页只有一个页面，而这个网页的实际方式要能够回应使用者所使用的各种装置并且赋值使用者在电脑上使用软件的体验，让使用者可以更容易和有效的使用网站。按照正常情况下，我们会在一个页面中链接到其他的很多个页面，进行页面的跳转，但是如果使用单页面应用的话，我们始终在一个页面中，通常使用a标签的描点来实现。
      优点：
                1.用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
                2.基于上面一点，SPA相对对服务器压力小。
      缺点：
                1.以SPA方式开发的网站不容易管理也不够安全。
                2.由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。
                3.初次加载页面更耗时。
                4.因为没有换页，所以不能使用浏览器的前进、后退、地址栏等，需要程序进行管理；
                5.书签，需要程序来提供支持；
                6.初次加载耗时多。为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。