vue2 和 vue3 的mvvm的实现原理是什么？

Vue原理最重要的莫过于响应式，虚拟dom及diff算法，模板编译。
其中响应式就是双向绑定。vue是mvvm框架，所谓mvvm，最核心的就是数据驱动视图，用户不能直接操作dom，而是直接操作数据，当数据改变的时候，vue内部监听数据变化然后更新视图。同样，用户在视图上的操作（事件）也会反过来改变数据。而响应式，则是实现数据驱动视图的第一步，即监听数据的变化，使得用户在设置数据时，可以通知vue内部进行视图更新。
那么在这之前，我们先了解下击中实现双休绑定的做法

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。
实现数据绑定的做法有大致如下几种：
发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）

发布者-订阅者模式

一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里

这种方式现在毕竟太low了，我们更希望通过 vm.property = value 这种方式更新数据，同时自动更新视图，于是有了下面两种方式

脏值检查

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

XHR响应事件 ( $http )

浏览器Location变更事件 ( $location )

Timer事件( $timeout , $interval )

执行 $digest() 或 $apply()

数据劫持

vue2 的 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue 2.0

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里
整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
上述流程如图所示：

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里

1、实现Observer

ok, 思路已经整理完毕，也已经比较明确相关逻辑和模块功能了，let's do it
我们知道可以利用Obeject.defineProperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

2、实现Compile

compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，

这里通过递归遍历保证了每个节点及子节点都会解析编译到，包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记，如<span v-text="content" other-attr中v-text便是指令，而other-attr不是指令，只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中，通过new Watcher()添加回调来接收数据变化的通知

3、实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

vue 3.0

2020.11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，对 Vue3.0 的更新计划、方向进行了详细阐述（感兴趣的小伙伴可以看看完整的 PPT），表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy !!
这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听 属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！

带来的特性

vue3.0实现响应式
Proxy支持监听原生数组
Proxy的获取数据，只会递归到需要获取的层级，不会继续递归
Proxy可以监听数据的手动新增和删除

什么是proxy?

上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~

proxy 语法

ES6 原生提供的 Proxy 语法很简单，用法如下：

let proxy = new Proxy(target, handler);

参数 target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）, 参数 handler 也是一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。

Proxy 的基本用法就如同上面这样，不同的是 handler 对象的不同，handler 可以是空对象 {} ，则表示对 proxy 操作就是对目标对象 target 操作
但是要注意的是，handler 不能 设置为 null ，会抛出一个错误——Cannot create proxy with a non-object as target or handler！

要想 Proxy 起作用，我们就不能去操作原来对象的对象，也就是目标对象 target ，必须针对的是 Proxy 实例进行操作，否则达不到预期的效果，我们设置 get 方法后，试图继续从原对象 obj 中读取一个不存在的属性 b ， 结果依旧返回 undefined ：

对于可以设置、但没有设置拦截的操作，则对 proxy 对象的处理结果也同样会作用于原来的目标对象 target 上，怎么理解呢？
们重新定义了 set 方法，所有的属性设置都返回了 888 , 并没有对某个特殊的属性（这里指的是 obj 的 a 属性 ）做特殊的拦截或处理，那么通过 proxyObj.a = 666 操作后的结果同样也会作用于原来目标对象（obj 对象）上，因此 obj 对象的 a 的值也将会变为 888 !

API

handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。

所有的捕捉器是可选的。如果没有定义某个捕捉器，那么就会保留源对象的默认行为。

handler.getPrototypeOf()
Object.getPrototypeOf 方法的捕捉器。
handler.setPrototypeOf()
Object.setPrototypeOf 方法的捕捉器。
handler.isExtensible()
Object.isExtensible 方法的捕捉器。
handler.preventExtensions()
Object.preventExtensions 方法的捕捉器。
handler.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor 方法的捕捉器。
handler.defineProperty()
Object.defineProperty 方法的捕捉器。
handler.has()
in 操作符的捕捉器。
handler.get()
属性读取操作的捕捉器。
handler.set()
属性设置操作的捕捉器。
handler.deleteProperty()
delete 操作符的捕捉器。
handler.ownKeys()
Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。
handler.apply()
函数调用操作的捕捉器。
handler.construct()
new 操作符的捕捉器。

Proxy的其他应用

dobjs/dob 就是用 proxy 重写 mobx 的一个方案。
immer 实现不可变数据类型。immer 的做法就是维护一份 state 在内部，劫持所有操作，内部来判断是否有变化从而最终决定如何返回，具体内容可以看一下mmer.js 简介及源码简析 这篇文章。
都是使用到了对对象进行读写拦截，在读写中做一些额外的判断和操作。

总结

Proxy是用来操作对象的，拓展对象的能力。Object.defineProperty() 是对对象属性进行操作。
vue2.x使用 Object.defineProperty()实现数据的响应式，但是由于 Object.defineProperty()是对对象属性的操作，所以需要对对象进行深度遍历去对属性进行操作。
vue3.0 用 Proxy 是对对象进行拦截操作，无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中。虽然proxy语法很简单，可不是件容易的事，再加上其本身的 Proxy的兼容性方面的问题，所以我们实际应用开发中使用的场景需要更具用户环境做思考后再使用。
vue3.0、dobjs/dob、immer等库目前都使用到了 Proxy，对对象进行读写拦截，做一些额外的处理

参考：
https://www.jianshu.com/p/2a8ec76e0090
https://segmentfault.com/a/1190000021991591

扩展阅读：
vue3.0 深入响应式原理
vue3.0 列表选热
实现双向绑定Proxy比defineproperty优劣如何?
JavaScript 标准内置对象Proxy
阮一峰ECMAScript 6 入门-Proxy
学会 Proxy 真的可以为所欲为
ImmerJS 浅析