vue原理

组件化基础

1.很久之前就有组件化

asp.jsp.php已经存在组件化，
nodejs中也有组件化。但是以前的组件都是静态资源，更新要依赖与DOM，所以以前JQ更盛行

2.数据驱动视图（mvvm,settate）

（ 数据驱动视图要之前用得简单的多）
什么是数据驱动视图：数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
mvvm: MVVM是Model-View-ViewModel的简写，即数据-视图-视图模型。ViewModel是架起Model-View的桥梁。他有两个方向。一个是由数据转换成视图，即将后端传递的数据转化成所看到的页面。第二个是由视图转换成数据。即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，也就是所谓数据的双向绑定。

vue的响应式

核心API object.definePeoperty

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

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

参数
obj 要定义属性的对象。
prop 要定义或修改的属性的名称或 Symbol 。
descriptor 要定义或修改的属性描述符。

object.definePeoperty（） 的一些缺点（vue3.0启用proxy）

虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式，但是它并不算是实现数据的响应式的完美方案，某些情况下需要对其进行修补或者hack，这也是它的缺陷，主要表现在两个方面：
　　无法检测到对象属性的新增或删除
proxy： Proxy，字面意思是代理，是ES6提供的一个新的API，用于修改某些操作的默认行为，可以理解为在目标对象之前做一层拦截，外部所有的访问都必须通过这层拦截，通过这层拦截可以做很多事情，比如对数据进行过滤、修改或者收集信息之类。

虚拟DOM

定义：根据模板生成一个js对象，根据这个js对象再去生成真实的虚拟DOM，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作，

diff算法

定义 当data发生改变，会根据新的数据生成一个新的虚拟DOM，新的虚拟DOM和旧的虚拟DOM进行对比，会找到不同的地方，渲染不同的地方，这就是diff算法。