vue最新常见面试题

vue全家桶

vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)

vue.js核心思想

1.数据驱动(基于操作dom的方式)
2.组件化思想

什么是MVVM

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展示出来，ViewModel是一个同步View和Model的对象。

MVVM和MVC的区别

一、MVVM是Model（数据层）-View（视图层）-ViewModel（视图模板）的简写。
本质上是MVC的改进版，MVVM就是将VIew中的状态和行为抽象化，将视图中的UI和逻辑分离，

view除了定义结构、布局外，他展示的的事ViewModel层的数据和状态，不负责处理状态，VIew层做的是数据绑定、指令的声明、事件的绑定声明。

VIewModel相当于MVC里的C（Controller控制器），ViewModel层把VIew需要的数据暴露，并根据View层的数据绑定声明、事件绑定声明负责，也就是处理VIew层的具体业务逻辑。VIewModel底层会做好绑定属性的监听，当Model中数据变化，View层会得到更新，而当View中声明了数据的双向数据绑定（常用是表单元素）同时也会监听View层中值的变化，View层绑定的Model中的数据也会得到自动更新。

MVVM中的双向数据绑定就是当用户更新了View,Model的数据也会自动被更新
二、MVC是Model-VIew-Controller的简写
用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面以及用户交互的同时，不需要重新编写业务逻辑。
MVC中的单项数据绑定就是把Model绑定到View，当我使用JavaScript代码更新Model时，VIew就会自动更新

MVVM和jquery的区别

1.vue是数据驱动，通过数据来显示视图层而不是节点操作。
2.jquery是一个快速，简洁的javascript框架，jquery是基于事件驱动。

vue的优点是什么？

1.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
4.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

vue的优缺点

优点：性能好，简单易用，前后端分离，双向数据绑定，单页面应用用户体验好。
缺点：不利于SEO优化。

vue组件之间的传值

1.父组件往子组件传值porpos。
2.子组件往父组件传值，通过emit事件。
3.不同组件之间的传值，通过eventBus

vue中双向数据绑定原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter、getter、在数据变动时发布消息给订阅者，触发相应监听回调，当把一个普通javascript对象传给Vue实例来作为它的data选项时，vue将遍历它的属性，用object.defineProperty将他们转为getter/setter。用户看不到getter/setter，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。

说出至少4中vue当中的指令和用法：

1.v-if: 判断是否隐藏；
2.v-for： 数据循环；
3.v-bind:class: 绑定一个属性；
4.v-model： 实现双向绑定

vue路由之间跳转有哪些

1.声明式(标签跳转)
2.编程式(js跳转)

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

如何定义vue-router的动态路由以及如何获取传递过来的参数？

1.在router目录下的index.js文件中，对path属性加上/：id。
2.使用router对象的params.id.

vue-router有哪几种导航钩子

1.全局导航钩子：ruoter.beforeEach(to,from,next)
作用：跳转前进行判断拦
2.组件内的钩子
3.单独路由独享组件

什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段？

它可以总共分为8个阶段：
创建前：beforeCreate
创建后：Created
载入前：beforeMount
载入后：Mounted
更新前：beforeUpdate
更新后：Updated
销毁前：beforeDestory
销毁后：Destory

第一次页面加载会触发哪几个钩子？

会触发下面这几个beforeCreate、created、beforeMount、mounted 。

DOM 渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

vuex是什么？怎么使用？哪种功能场景使用它？

1.Vuex是vue框架中状态管理。
2.使用方式: 在main.js引入store，注入。新建一个目录store，…export
3.单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

v-if 和 v-show 区别

共同点：都是显示与隐藏的效果
不同点：v-show：指令是通过修改元素的display的css属性让其显示或者隐藏。
v-if：是直接销毁和重建DOM达到让元素显示和隐藏的效果

route和$router的区别

1.route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2.router是“路由实例”对象包括了路由的跳转方法，钩子函数等

为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

Keep-alive的作用是什么?

Keep-alive 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

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

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

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

如何解决vue修改数据不刷新页面这个问题？

第一种：this.set
第二种：给数组、对象赋新值
第三种：使用this.$forceupdate强制刷新

为什么会出现vue修改数据后页面没有刷新这个问题？

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

---