Vue.js 核心团队已经开始讨论将在 Vue3 中改变的实现了。API 不会有变化，但响应式机制将会有所不用。这意味着什么，对你来说有什么意义？
Vue 2 的响应式
Vue.js 2 中的响应式是通过 Object.defineProperty 方法定义 getter 和 setter 完成的。我们来把 Vue 中做的事情简化出一个版本。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get:function(){
return value;
},
set:function(newValue){
if(value !== newValue){
value = newValue;
tellTheWorldIhaveChanged(); //somebody is watching!
}
}
});
使用形如这样的结构，当我们每次对属性进行更改时，它都会去通知需要知道这里有变化的观察者和依赖。这个属性的设置（注：指 defineProperty）是在我们的初始化模型(注：this.data)和我们显式调用 Vue.set/vm.$set 时工作的。
但是，通过这样的设置使下面内容需要额外处理：
1. 按索引更新数组元素
data(){
return {
names:[]
}
}
...
this.persons[0] = 'John Elway';
你很可能已经意识到以上代码不会触发更新。事实上，Vue 详细的指南 中明确地提到关于数组的警告。为啥会这样呢？因为数组的 setter 属性无法拦截检测通过索引的赋值。
一个处理办法是使用 Vue.set 方法
Vue.set(this.names, 0, 'John Elway');
并且 Vue 也对一些数组方法做了足够的包装，我们可以直接使用 Array 方法直接更新数组对象。
this.names.push('John Elway');
2. 动态添加属性
data(){
return {
names:[]
}
}
...
this.$data.lastAddedName = 'John Elway';
这可能是最好的例子，对吧？我可能应该知道某个属性已经存在，但有些情况下我们或许并不知道属性名称。
JavaScript 提供 loosed-typedness 允许我们轻松添加属性。然而，Vue 响应式并不清楚我们添加了什么。
放着我来！ —— Vue.set
Vue.set(this.$data,'lastAddedName','John Elway');
如果我们能有一种避免所有 Vue.set 使用情况并把索引操作还给我们的方法.
Vue 3 的响应式
Welcome to 通过代理 (Proxy) 实现响应式的世界。
Proxy 是在 ES6 或者称 ES2015 中引进的特性，他们已经出现一段时间，因此我确信大家已经了解他们了，但可能不会在生产环境中使用。
因为 Proxy 也是无法shim 的特性，没有 polyfill，也无法在浏览器中 fake 实现。
幸运的是，它的语法并不荒谬。事实上，他也算有些熟悉。
let data = {
names:[]
};
data.names = new Proxy(data.names,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
});
这里 proxy 不仅拦截前面提到的数组索引赋值，还会在调用数组方法时触发，不再需要包装方法。
那么关于动态添加属性呢？
data = new Proxy(data,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
});
data.lastAddedName = 'John Elway'; //tellTheWorldIhaveChanged()
OMG. Awesome! 让我们赶紧让它快点发布吧！
总结
我在 Vue 2.5 发布之前就开始简短的写了。Vue 3 并没有被过多讨论，但由于上面提到的变化，我真的很期待它。话虽如此，我还是无法在近期的工作项目中使用它。Why? Vue3 没有对 IE 的兼容性，Babel 也不能解决这个问题。
但是，这种重构依然有长期优势：
- 简化源码 - 这种重构使得团队去掉数组方法包装并减少需要做的类型检查
- 新手更易上手 - 从响应式中获取的警告有助于 Vue 新手，这将消除社区论坛一整类的问题
- 更好的性能 - 我见到一些人们建议这样做来提升响应式的速度，它其实已经非常快了，我还没在这一点上被说服
感谢阅读！如果你发现了任何错误，请联系我.
2019-03-19 Update
似乎使用 Proxy 的版本将附加 -next (像ES-next) 到当前版本号，而不是用 Vue 3。这种更新可能最早出现在 Vue 2.6 和 Vue2.6-next 中。这将消除对 API 中可用内容的混淆。
欢迎大家到公众号: you的日常 阅读，体验更好哦。
