Vue解析--如何应对面试官提问

近期不断面试中,面试官都会提一些关于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
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为例:

 <div id="vueDemo"><p>{{ title }}</p><button v-on:click="clickEvent">hello word</button>
</div>
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源码的目录结构吧:

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()浅析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搭建自动安装的linux,RedHat7搭建无人值守自动安装Linux操作系统(PXE+Kickstart)

Kickstart服务器IP: 192.168.136.253 掩码&#xff1a;255.255.255.0 网关&#xff1a;192.168.136.2 DNS&#xff1a;192.168.136.2安装部署yum源服务器参考 http://www.cnblogs.com/edward2013/p/5020113.html安装部署DHCP服务器# yum -y install dhcp修改配置文件# vi…

Numpy数组的保存与读取方法

1. 数组以二进制格式保存 np.save和np.load是读写磁盘数组数据的两个主要函数。默认情况下&#xff0c;数组以未压缩的原始二进制格式保存在扩展名为npy的文件中&#xff0c;以数组a为例 np.save("filename.npy",a)b np.load("filename.npy")利用这种方法…

Java开发人员的Erlang

您可能没有注意到&#xff0c;但是距离我上次发布博客已经过去了几个星期。 原因是我的Soleus骨折了&#xff0c;而我的腿也石膏了。 不能动弹&#xff0c;我认为调查完全不同的东西是个好主意–要么看那天的电视&#xff0c;要么&#xff0c;尽管Kojak和Magnum PI的重播很诱人…

20165339第六周学习总结

课本知识点总结 第八章 String类 使用String类声明对象并创建对象 String s new String("We are students"); String t new String("We are students"); String (char a[])用一个字符数组a创建一个String对象 char a[] {J,a,v,a}; String s new String(a)…

keil5用jlink不到芯片_洛达芯片检测

安卓手机下载一个络达官方的刷机软件然后连接上耳机&#xff0c;打开软件&#xff0c;就可以看到耳机芯片的相关信息。软件下载地址&#xff1a;https://pan.baidu.com/s/1MOXjkHv1wfxWWIVdcsMSFg 提取码: tasc我们的耳机都是络达芯片&#xff0c;不怕你检测&#xff0c;希望用…

层次和约束:项目中使用vuex的3条优化方案

问题描述 使用vuex的store的过程中&#xff0c;发现了一些不是很优雅的地方&#xff1a; store层module太多&#xff0c;找state、getter、mutation、action对应的module比较慢。 组件里面mapGetters、mapActions、mapMutations过多&#xff0c;分不清getter、action、mutati…

linux脚本编写规则,shell脚本编写守则

现在centos7中使用的是bash软件&#xff0c;通过以下命令可以查看bash版本&#xff1a;[rootlocalhost ~]# cat /etc/redhat-release #查看系统的版本CentOS Linux release 7.5.1804 (Core) #我这里使用的是centos 7.5 1804[rootlocalhost ~]# bash --version #查看bash的版本G…

luogu P2516 [HAOI2010]最长公共子序列

传送门 首先那个\(O(n^2)\)的dp都会吧,不会自己找博客或者问别人,或是去做模板题(误) 对以下内容不理解的,强势推荐flash的博客 我们除了原来记录最长上升子序列的\(f_{i,j}\),再记\(g_{i,j}\)表示到\(i,j\)时的最长上升子序列个数,同时设两个字符串为\(A,B\) 若\(A_iB_j\) ,则…

怎么让员工服从管理_为什么现在的员工执行力和服从性越来越差,管理一严格就辞职?...

当有负面情绪的时候&#xff0c;不要说。管好自己的嘴&#xff0c;有时候做哑巴&#xff0c;是一种境界。现在的企业很多都存在这个问题&#xff0c;员工执行力越来越差&#xff0c;服从性也越来越差&#xff0c;管理者稍微一严格&#xff0c;员工就会辞职走人&#xff0c;留不…

Spring Data REST的实际应用

什么是春天数据休息&#xff1f; spring-data-rest是spring-data项目的新增功能&#xff0c;它是一个框架&#xff0c;可帮助您将实体直接作为RESTful Web服务端点公开。 与rails&#xff0c;grails或roo不同&#xff0c;它不会生成任何实现此目标的代码。 spring data-rest支持…

2018上半年掘金微信群日报优质文章合集:前端篇

在掘金微信交流群里的小伙伴们&#xff0c;你们每天都还在坚持读小报吗&#xff1f;如果你的回答是yes&#xff0c;那真的要给你点一万个赞了?能坚持这么久&#xff0c;真的很优秀噢&#xff01;&#xff08;嗯&#xff0c;每天坚持给大家收集文章的小饼也很优秀?&#xff09…

linux运维笔试题目,linux运维相关的笔试题目_笔试题目

一、Linux系统和shell1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;①删除所有空行&#xff1b;②在非空行前面加一个“AAA”&#xff0c;在行尾加一个“BBB”&#xff0c;即将内容为“11111”的一行改为&#xff1a;“AAA11111BBB”…

python之路--day17-shelve,xml和re模块

shelve模块 shelve模块只有一个open函数&#xff0c;返回类似字典的对象&#xff0c;可读可写&#xff0c;key必须为字符串&#xff0c;而值可以是python所支持的数据类型 1 import shelve2 # info1{age:18,height:180,weight:80}3 # info2{age:73,height:150,weight:80}4 #5 #…

20172314 2018-2019-1《程序设计与数据结构》第一周学习总结

教材学习内容总结 概述 软件工程&#xff1a;是一门关于高质量软件开发的技术和理论的学科&#xff0c;用来控制开发过程&#xff0c;实现高质量的软件。软件工程的目标&#xff1a;正确性、可靠性、健壮性、可用性、可维护性、可重用性、可移植性、运行效率。 对于可靠性和健壮…

activiti api文档_【白银人机】Activiti 工作流从入门到入土:完整 hello world 大比拼(API 结合实例讲解)...

点击上方“好好学java”&#xff0c;选择“置顶”公众号重磅资源、干货&#xff0c;第一时间送达重磅推荐 ① 纯福利 | 公众号资源大汇总&#xff0c;一年才一次&#xff01;② 重磅&#xff01;&#xff01;2018年Java全套入门到进阶学习视频及项目实战③ 2018年java架构师学习…

弹簧可配置魔术

Spring框架有几个提供一系列服务的模块&#xff0c;其中许多模块仅可用于托管对象&#xff08;Spring Bean&#xff09;。有关这些服务的一些示例是依赖注入&#xff0c;事务管理&#xff0c;AOP服务等。当我们使用时&#xff0c;一切都很好对象即服务&#xff0c;因此由Spring…

前端解读控制反转(IOC)

前言 随着前端承担的职责越来越重&#xff0c;前端应用向着复杂化、规模化的方向发展。大型项目模块化是一种趋势&#xff0c;不可避免模块之间要相互依赖&#xff0c;此外还有很多第三方包。这样的话如何去管理这些繁杂的文件&#xff0c;是一个不可避免的话题。此时作为一种…

ASP.NET MVC传递参数(model), 如何保持TempData的持久性

一看到此标题&#xff0c;相信你也会。因为路由是可以从URL地址栏传过去的。但是Insus.NET不想在地址栏传递&#xff0c;还是一个条件是jQuery的Ajax进行POST的。Insus.NET不清楚别人是怎样处理的&#xff0c;但是这个让Insus.NET花上不少时间来解决。Insus.NET实现的方法也很简…

深度学习语音降噪方法对比_人工智能-关于深度学习的基础方法

深度学习概述深度学习的一些简介&#xff0c;其要点如下&#xff1a;深度学习实际上是基于具有多个隐藏层的神经网络的学习&#xff1b;深度学习的思想来源于人类处理视觉信息的方式&#xff1b;深度学习的发展得益于数据的井喷和计算力的飙升&#xff1b;深度学习的理论基础依…

通过adb巧用monkey获取android设备中所有应用的主activity

由于工作需要&#xff0c;想获取所有应用的activity(这里仅限应用的主入口Launcher activity)&#xff0c;搜索了一下&#xff0c;网上实现的方案都是基于android编程实现的&#xff0c;对于不懂开发的测试来说稍有难度&#xff0c;而且对于PC端测试工具来说可行性略差。 给大家…