vue最全面试题

1.mvc，mvp与mvvm模式

MVC

MVC是应用最广泛的软件架构之一，一般 MVC 分为：

Model（ 模型 ） 、 Controller（ 控制器 ） 、 View（ 视图 ） 。

这主要是基于分层的目的，让彼此的职责分开。 View 一般通过 Controller 来和 Model 进行联系。

Controller 是 Model 和 View 的协调者， View 和 Model 不直接联系。基本联系都是单向的。

1、View 传送指令到 Controller

2、Controller 完成业务逻辑后，要求 Model 改变状态

3、Model 将新的数据发送到 View，用户得到反馈

MVP

MVP 模式将 Controller 改名为 Presenter ，同时改变了通信方向

1、各部分之间的通信，都是双向的。

2、View 与 Model 不发生联系，都通过 Presenter 传递。

3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel

View 的变化会自动更新到 ViewModel ， ViewModel 的变化也会自动同步到 View 上显示。这种自动

同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作。

2 .MVVM模式的优点以及与MVC模式的区别？

MVVM模式的优点：

1、低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同

的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2、可重用性： 你可以把一些视图逻辑放在一个ViewModel里面，让很多 view 重用这段视图逻辑。

3、独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

4、可测试： 界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

MVVM 和 MVC 的区别：

mvc 和 mvvm 其实区别并不大。都是一种设计思想

mvc 中 Controller演变成 mvvm 中的 viewModel，

mvvm 通过数据来显示视图层而不是节点操作。

mvvm主要解决了: mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

3.常见的实现MVVM数据绑定的做法有哪些？

（1）发布者-订阅者模式（backbone.js）

（2）脏值检查（angular.js）

（3）数据劫持（vue.js）

1、发布者-订阅者模式:

一般通过 sub , pub 的方式实现数据和视图的绑定监听，

更新数据方式通常做法是 vm.set('property', value) 。

这种方式现在毕竟太low了，我们更希望通过 vm.property = value 这种方式更新数据，同时自动更新视图，于是有了下面两种方式

2、脏值检查:

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，

最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测

3、数据劫持:

vue.js 则是采用 数据劫持 结合 发布者-订阅者 模式的方式，

通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，

在数据变动时发布消息给订阅者，触发相应的监听回调

4 .Object.defineProperty()方法的作用是什么？

Object.defineProperty() 方法 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法：Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：必需。目标对象

prop：必需。需定义或修改的属性的名

descriptor：必需。目标属性所拥有的特性

返回值：传入函数的对象。即第一个参数obj

5.vue.js的两个核心是什么？

1、数据驱动，也叫双向数据绑定。

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性

2、组件系统

.vue组件的核心选项

1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状

态。

3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。

4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。

5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。

6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

6.什么是vue生命周期？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

7.vue生命周期钩子函数都有哪些？分别是什么意思

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

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

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

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

第一次加载会触发 beforeCreate、created、beforeMount、mounted

10.简述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

11.created和mounted的区别?  

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

12.vue获取数据在哪个周期函数 ？

看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）

13.什么是vue路由？