中企动力 网站价格,免费搭建单页网站,网站 子域名,广州万户网络技术有限公司招聘近期不断面试中#xff0c;面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问#xff0c;我们应该如何更好应答呢#xff1f;在这里我把对Vue的理解整理出来供大家来参考。
1.Vue是什么#xff1f;
Vue是一套构建用户界面的渐进式框架#xf…近期不断面试中面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问我们应该如何更好应答呢在这里我把对Vue的理解整理出来供大家来参考。
1.Vue是什么
Vue是一套构建用户界面的渐进式框架也是一个非常典型的 MVVM 的程序结构model-view-viewmodel。
官方用语
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
2.vue既然是MVVM结构比MVC好在哪里
MVC模式是MVVM模式的基础这两种模式更像是MVC模式的优化改良版,他们两个的MV即Modelview相同不同的是MV之间的纽带部分。
☞什么是MVC MVC允许在不改变视图的情况下改变视图对用户输入的响应方式用户把对View的操作交给了Controller处理在Controller中响应View的事件调用Model的接口对数据进行操作一旦Model发生变化便通知相关视图进行更新。如果前端没有框架只使用原生的html jsMVC模式可以这样理解。将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为例 div idvueDemop{{ title }}/pbutton v-on:clickclickEventhello word/button
/divvar 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()浅析
