Vue-next 新特性

  • 我们可以看到 github 上 vue-next 里面的目录结构，实现包分离，用的就是 lerna，让用不到的包不需要被引入，变得更轻量
  • 在 Vue3 中，使用了 proxy 代替了 Object.getdefineProperty, 兼容 IE 及以上
  • 至于为什么要用 Proxy，我理解是这样的：
  • proxy 可以代理数组
  • 不会像 Object.getdefineProperty 那样只能监听一个属性，Vue2 里做了循环+递归，使用 proxy 也提升了性能
  • 但是 proxy 只能代理一层，比 Object.getdefineProperty 强一点的地方，就是不用每个属性都单独监听
  • proxy 的 getter 和 setter 都可以拿到 target，更加方便
  • proxy 解决了 Object.getdefineProperty 的局限性，就是对 Map、Set、WeakMap 和 WeakSet 的支持
  • 缺点：兼容性不好，proxy 兼容到 IE11，如果要兼容低版本浏览器怎么办，答案就是自己造轮子，加入兼容，使用defineGetter和defineSetter
  • 重写虚拟 DOM，因为 template 和 React 类似，而且优化了 ast 树速度

defineGetter和defineSetter

下面附上 MDN 的示例，该方法会被弃用，已从 Web 标准中删除，部分浏览器还在支持

// 请注意，该方法是非标准的：

var o = {};
o.__defineGetter__('gimmeFive', function() { return 5; });
console.log(o.gimmeFive); // 5

// 请尽可能使用下面的两种推荐方式来代替：

// 1. 在对象字面量中使用 get 语法
var o = { get gimmeFive() { return 5; } };
console.log(o.gimmeFive); // 5

// 2. 使用 Object.defineProperty 方法
var o = {};
Object.defineProperty(o, 'gimmeFive', {
  get: function() {
    return 5;
  }
});
console.log(o.gimmeFive); // 5
0