由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