vue解析-凯发k8官方网

近期不断面试中，面试官都会提一些关于vue相关的源码和“全家桶”之类的问题。那么针对这些提问，我们应该如何更好应答呢？在这里我把对vue的理解整理出来供大家来参考。

1.vue是什么？

vue是一套构建用户界面的渐进式框架，也是一个非常典型的 mvvm 的程序结构（model-view-viewmodel）。

官方用语：

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动。

2.vue既然是mvvm结构比mvc好在哪里？

mvc模式是mvvm模式的基础，这两种模式更像是mvc模式的优化改良版,他们两个的mv即model，view相同，不同的是mv之间的纽带部分。

☞什么是mvc？

mvc允许在不改变视图的情况下改变视图对用户输入的响应方式，用户把对view的操作交给了controller处理，在controller中响应view的事件调用model的接口对数据进行操作，一旦model发生变化便通知相关视图进行更新。

如果前端没有框架，只使用原生的html js，mvc模式可以这样理解。将html看成view;js看成controller，负责处理用户与应用的交互，响应对view的操作（对事件的监听），调用model对数据进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）;将js的ajax当做model，也就是数据层，通过ajax从服务器获取数据。

☞什么是mvvm?

mvvm与mvc两者之间最大的区别就是：mvvm实现了对view和model的自动同步，也就是当model的属性改变时，我们不用再自己手动操作dom元素来改变view的变化，而是改变其属性后，该属性对应的view层数据会自动改变。 以vue为例：

var vuedemo = new vue({ el: '#vuedemo', data: { title: 'hello vue!' }, methods: { clickevent: function () { this.title = "hello word!" } } })

这里的html => view层，可以看到这里的view通过模板语法来声明式的将数据渲染进dom元素，当viewmodel对model进行更新时，通过数据绑定更新到view。

vue实例中的data相当于model层，而viewmodel层的核心是vue中的双向数据绑定，当model发生变化时view也可以跟着实时更新，同理，view变化也能让model发生变化。

总的看来，mvvm比mvc精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作dom元素。因为在mvvm中，view不知道model的存在，model和viewmodel也观察不到view，这种低耦合模式提高代码的可重用性。

3.vue响应式原理是什么？

vue是基于 object.defineproperty 来实现数据响应的，而 object.defineproperty 是 es5 中一个无法 shim 的特性，不支持ie8以下版本的浏览器。vue通过object.defineproperty的 getter/setter 方法对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据； 受现代javascript 的限制 (以及废弃 object.observe)，vue不能检测到对象属性的添加或删除。由于 vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让vue转换它，这样才能让它是响应的。

观察者模式（observer, watcher, dep)

先简介一下，后面的文章会具体的写到：

observer类

主要用于给vue的数据defineproperty增加getter/setter方法，并且在getter/setter中收集依赖或者发送通知进行更新。

watcher类

用于观察数据（或者表达式）变化然后执行回调函数（其中也有收集依赖的过程），主要用于$watch api和指令上。

dep类（dependence依赖的缩写）

就是一个可观察对象，可以有不同指令订阅它（它是多播的）

观察者模式,跟发布／订阅模式有点像，但是其实略有不同。

发布／订阅模式是由统一的事件分发调度中心，on则往中心中数组加事件（订阅），emit则从中心中数组取出事件（发布），发布和订阅以及发布后调度订阅者的操作都是由中心统一完成。

但是观察者模式则没有这样的中心，观察者模式中包含observer观察者和subject主题对象。observer需要观察subject时，需要先到subject里进行注册subject对象持有observer对象的集合句柄，当subject对象的内部状态发生变化的时候，就会把这个变化通知所有的观察者。

4.vue源码有过了解吗？

之前对vue源码也是有点小小的研究，只不过没有很体系的记录，现在有点时间，那就做一次基础的总结吧。一方面要克服自己的惰性，另一方面也蛮想重新温故一遍。哈哈~~ 我们先来看一下vue源码的目录结构吧：

熟悉每个模块具体的功能，对之后深入研究源码还是很有帮助的呢。 我偷偷告诉你，我更喜欢去理解下面那张思维导图哦，接下来的所有文章都会根据下图的各个环节做个分析哦！

我们可以先看一下概览：

我会同时更新在github上，你要是喜欢可以给个star，先谢谢啦~

1.浅析vue源码（一）—— 造物创世

2.浅析vue源码（二）—— initmixin(上)

3.浅析vue源码（三）—— initmixin(下)

4.浅析vue源码（四）—— $mount中template的编译--parse

5.浅析vue源码（五）—— $mount中template的编译--optimize

6.浅析vue源码（六）—— $mount中template的编译--generate

7.浅析vue源码（七）——render到vnode的生成

8.浅析vue源码（八）——依赖收集与监听

9.浅析vue源码（九）——virtualdom与path

10.vue番外篇 -- vue-router浅析原理

11.vue番外篇 -- vue.nexttick()浅析

总结

以上是凯发k8官方网为你收集整理的vue解析--如何应对面试官提问的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。