由Vue3引发的思考

尤大的Vue3已经初露头角 指路，我们当然也要看看咯

一看发现，嗬，高级，竟然有没听过的词（暴露了我的无知，请轻喷o(╥﹏╥)o）
不过没有关系，没听过还不会查吗？所以这篇文章可以看成是 Vue3 特性词汇扫盲篇

Proxy

相比Object.defineProperty更加完善

function extend(sup, base) {
    var descriptor = Object.getOwnPropertyDescriptor(
        base.prototype, "constructor"
    ); // base.prototype.constructor --> base
    base.prototype = Object.create(sup.prototype); // base.prototype.__proto__ --> sup.prototype
    var handler = {
        construct: function (target, args) {
            var obj = Object.create(base.prototype); // ≈ new base()，但不执行 constructor
            this.apply(obj, args); // this --> handler
            return obj;
        },
        apply: function (that, args) {
            sup.apply(that, args);
            base.apply(that, args);
        }
    };
    var proxy = new Proxy(base, handler);
    descriptor.value = proxy;
    Object.defineProperty(base.prototype, "constructor", descriptor);
    return proxy;
}

var Person = function (name) {
    this.name = name
};

var Boy = extend(Person, function (name, age) {
    this.age = age;
});

Boy.prototype.sex = "M";

var Peter = new Boy("Peter", 13);
console.log(Peter.sex); // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age); // 13

treeshaking

下面是webpack中的 解释

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

简单来说就是在webpack中通过配置，在打包时剔除未引用的代码。这样可以减少打包的体积。
以为这一趴就过去了，等等，让我们看看 静态结构 这个词……em……这又是个啥？

静态结构

ES6 modules 的特性之一，简单说就是一个模块暴露出的内容在编译前就已确定，不会动态改变。
静态结构的优点有：

• 剔除未引用代码（看到没，这就是 treeshaking 啊）
• 简化打包，不需要额外的格式包装
• 迅速查找 imports
• 变量检查
• 宏拓展
• 类型拓展
• 支持其他语言

具体内容看官方介绍哈~

这里要提一下 ES6 modules 的另外一个特性：支持循环引用

循环引用

循环引用大家应该听说过，不再赘述。但是支持循环引用，具体是怎么个支持发呢？指路

这里参考 node 的介绍：假设A引用B，B又引用A。当B引用A时，会返回一个未完成的复制对象给B，使B可以继续执行完毕。

看到没，清晰明了！

本次科普就到这里啦~想知道更多可以评论留言哦，虽然我不一定能及时看到ORZ