vue常见面试题

1.mvvm 框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

2.vue是什么？特点是什么？

答：(1)是一套用于构建用户界面的渐进式框架

　　(2)简单易学，轻量快速
　　(3)组件开发：应用类UI可以看作全部是由组件树构成的

　　    数据驱动： ViewModel，保证数据和视图的一致性。

3.vue的生命周期有哪些都是干什么的？

答:(1)beforeCreat()    实例在完全创建出来之前会执行它，在执行它时，data和methods中的数据都还未初始化

     (2)created()    data和methods已经初始化完成，created()完成之后，vue开始编译模板，最终在内存中生成一个编译好的最终模板字符串，然后把模板字符串渲染为内存中的dom

     (3)beforeMount()  表示模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串，在这里可以做数据在渲染前的最后一次修改

     (4) mounted()    此时内存中的模板已经真实的挂载到了页面中，用户可以看到渲染好的页面了

     (5)beforeUpdate() 数据修改的时候触发 dom 是修改之前 注意修改数据死循环

     (6)updated() 数据修改的时候触发 dom 是修改之前 注意修改数据死循环

     (7)beforeDestory() 组件销毁卸载的时候触发 能获得dom 全局事件监听 全局计时器

     (8)destory() 组件销毁卸载的时候触发 没有dom 全局事件监听 全局计时器

4.第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted

5.vue常用指令有哪些？

答：v-show v-if v-else else v-for v-once v-bind v-on 

6.v-show和v-if的区别是什么？

答：都是控制元素的显示或隐藏

　　v-show通过display:block\none控制显示或隐藏
　　v-if是动态的向DOM树内添加或者删除DOM元素

7.v-model的使用

答:v-model用于表单数据的双向绑定,其实它就是一个语法糖

8.组件传值有哪些怎么实现？

答:(1)在子组件绑定父的数据，子组件通过props接受参数

　 (2)在子组件绑定父的数据，子组件通过props接受参数
　 (3)父组件中的标签上定义自定义事件，在事件内部获取参数

     (4)在子组件中触发自定义事件，并传参。（this.$ emit('父组件中的自定义事件',参数)）

     (5)通过公共组件Bus.js,进行传参

9.vue如何获取dom?

答:ref='dom',用法:this.$refs.dom

10.vue-loader是什么？使用它的用途有哪些?

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

    用途:js可以写es6、style样式可以scss或less、template可以加jade等

11.v-for的key的作用是什么？

答:key用来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
    作用：主要是为了高效的更新虚拟DOM。

12.分别简述computed和watch的使用场景
答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
　　watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

13.$nextTick的使用
答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

14.vue组件中data为什么必须是一个函数？
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。每一个函数都是独立的，每个组件实例都有自己私有的数据空间，这样不会造成混乱

15.单页面应用和多页面应用区别及优缺点
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

16.v-if和v-for的优先级
答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

17.vue常用的修饰符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。

18.SPA首屏加载慢如何解决
答：安装动态懒加载所需插件；使用CDN资源

19.vue-router 是什么?它有哪些组件
答：vue用来写路由一个插件。router-link、router-view

20.Vue-router跳转和location.href有什么区别
答：使用location.href='/url'来跳转，简单方便，但是刷新了页面；
使用history.pushState('/url')，无刷新页面，静态跳转；
引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

21.params和query的区别
答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意：query刷新不会丢失query里面的数据，params刷新 会 丢失 params里面的数据。

22.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

23.created和mounted的区别
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

24.active-class 是哪个组件的属性？
答：vue-router模块的router-link组件。children数组来定义子路由

25.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

26.vue-router 有哪几种导航钩子?
答：三种，
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

27.vue-router实现路由懒加载（ 动态加载路由 ）
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

28.vue获取数据在哪个周期函数
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

29.created和mounted的区别
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

30.vue和jQuery的区别

答:jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是MVVM。