Vue知识点整理（基础到进阶，覆盖Vue3.0）
学习记录，慢慢更新~
一、基础篇
1、说说你对MVVM的理解
- Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件，ViewModel将Model和View关联起来。
- 数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
了解mvc/mvp/mvvm的区别
MV*架构模式
MV*术语表示基于浏览器的一系列框架,用于构建应用程序的关注分离.这些框架立足于传统的UI设计模式,单在整个实现过程中,其遵循某种模式的程度是变化的.
在 MV*概念中,M代表模型(Model),V代表视图(View)
模型:典型的模型包含了数据、业务逻辑以及验证逻辑、从概念上将，其代表诸如某个客户或者某条支付之类的东西，模型从不关心数据的展示
视图：视图即用户所见以及交互的界面，是模型数据的可视化呈现。有依赖于框架其他部分。 （这些部分负责用户交互的更新和响应），其可以是一个简单结构：或者同样有依赖于MV*实现，其也包含逻辑
第三部分：传统 IU设计模式包含了第三个组成部分，改部分帮助管理模型与视图间的关系，以及模型、视图与用户间的关系。
尽管大多数的MVC、MVVM结构的现在Web UI设计框架都包含了模型与视图的一些概念，但第三个组成部分在名称及履行职责上却不尽相同。因此，人们通常用通配符*来泛指这个组成部分。
MVC模式
MVC模式包含模型、视图、控制器 控制器：控制器是应用程序的入口点，接受来自UI控件的信号。它还包含了处理用户输入的逻辑，以及基于接受到的输入，发送命令给模型以更新模型状态的处理逻辑。 与控制器交互引发一个事件链，最终产生视图更新。在此模式中，视图能够捕获模型变化，并在观察到模型改变时，进行视图更新。
MVP模式
MVC的变体结构，模型-视图-表示器，简称MVP。 该模型的出发点时进一步解耦模型与MVC其他两个组件的关系。在MVP里，类似控制器的对象与视图一起表示用户界面或呈现（Presentation）,模型则继续标识数据管理。MVP里没有充当守护者角色的控制器。每个视图都由一个被称为表示器的组件来支持。 表示器： 标识器包含视图的展示逻辑。视图通过将职责委托给标识器，其仅仅用于相应用交互。表示器直接返问模型以获取任何更新，并将数据更新传给视图。在这种方式下，表示器在模型和视图之间扮演了中间人的角色。 表示器负责保持视图与模型的更新。在视图与模型中间建立一个对象，有利于视图和模型焦距于各自的职责。
MVVM模式
如同MVP一样，MVVM的视图也是入口点，而且MVVM的模型也有一个对象位于模型与视图之间。在此模式中，第三个组成部分被称为视图模型： 视图模型： 视图模型是视图的模型或展示代码，此外，其还是模型与视图之间的中间人。所有定义及管理视图的代码都包含在视图模型中。其包含了数据Property及展示逻辑。在模型中，每个需要在视图里得到反映的数据点，都映射到视图模型的对应Property上。就像MVP的表示器，每个视图都由一个视图模型所支持。视图模型能够掌握视图与模型的变化，并保持两者同步。
MVC基础概念
- 模型
- 模型常常包含了业务逻辑与验证，其也代表了应用数据。然而，模型所包含数据不应该 是无关信息的大杂烩。之所以称之为模型，是因为它是一个对应用逻辑而言很重要的、显示存在的实体。 每个模型都代表现实中的某个对象。 系统越大越复杂，模型类型也就越多。 模型对照现实世界的失误，其包含的不仅是数据，还有行为。
- 绑定
- 绑定(Binding)：直接的意思是把两个东西绑/连接在一起。该术语指的是将视图的UI元素与代码相关部分联系起来（比如某个模型的数据）绑定内容并非仅限于数据。不同的库和框架支持不同的绑定类型。样式、属性以及click这样的事件都可以绑定到UI。依赖于所选框架，绑定类型也不尽相同。
- 模板
- 模板是HTML片段，其作为视图如何渲染的方式。渲染方式可以额外包含多种绑定及其他指令，决定模板及其模型数据如何处理。顾名思义，模板是可重用的。
- 一个视图由一个或多个模板创建，而复杂视图通常有多个渲染模板同时呈现。无论是内建或借助外部库，MV*框架中将模板和模型数据结合起来的那部分，通常被称为模板引擎（Template Engine）
- 视图
- 如讨论模板时所述，想Knockout或AngularJs这类的框架在模板中使用声明式绑定，通常采用在HTML元素上添加特定属性的方式。在这些框架里，模板和视图差不多是同一类东西。
- 因此，当使用这些框架构建视图时，需要考虑采取内嵌模板还是按需下载的方式。这更像一个设计问题。
--------------------------------------------截止：2020.06.16--------------------------------------------
2、Vue2.x响应式数据/双向绑定原理
- Vue数据双向绑定主要是指： 数据变化更新视图，视图变化更新数据。 其中，View变化更新Data，可以通过事件监听的方式来实现，所以Vue数据双向绑定的工作主要是如何根据Data变化更新View。
- 简述：
- 当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的property，并使用Object.defineProperty把这些property全部转为 getter/setter.
- 这些 getter/setter对用户来说是不可见的，但是在内部它们让Vue能够追踪依赖，在property被访问和修改时通知变更。
- 每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。
- 深入理解：
- 监听器Observer: 对数据对象进行遍历，包括子属性对象的属性，利用Object.defineProperty()对属性都加上setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么久能监听到了数据变化。
- 解析器Compile: 解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
- 订阅Watcher: Watcher订阅者是Observer和Compile之间通信的桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性值变化的消息时，触发解析器Compile中对应的更新函数。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新--这是一个典型的观察者模式。
- 订阅器Dep： 订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器Observer和订阅者Watcher进行统一管理。
3、你知道Vue3.响应式数据原理吗？
- Vue3.x改用Proxy代替Objext.defineProperty
- 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商中单持续的性能优化
- Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
- 判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理，这样就实现了深度观测。
- 监测数组的时候可能触发多次get/set，那么如何防止多次触发呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。
什么是代理：查看：https://juejin.cn/post/6844904012790120462
--------------------------------------------截止更新：2020.06.23--------------------------------------------
