JS核心-(56)-物件屬性延伸章節：屬性的特徵-屬性特徵與主流框架(Vue)的關係

前言

這篇將利用第七單元所學到的內容來檢視主流框架(Vue)的撰寫技巧

首先我們先來看到 Vue 原始碼

因為 Vue 的原始碼包含了許多 ES6 的寫法，所以需要經過編譯才能運用。

大部分未被編譯的原始碼都包含在 /src 的目錄中，所以這裡我們先點開 src 的目錄

點進來以後可以看到有很多不同的目錄，其實也就是把 Vue 的功能進行分裝

那我們就進入到這個路徑，看一下檔案裡面的內容

看到 Object.defineProperty 以及 Getter 的用法，是不是很熟悉呢！

再來我們先回到最上層，如果你要找編譯後的程式碼，可以到 /dist 的資料夾

進來之後可以看到 vue.js (未壓縮版本) 以及 vue.min.js (壓縮後版本)，那我們進入未壓縮的版本

你可以看到，裡面有很多寫法你已經有學過或看得懂的，其中比較特別的技巧就是，如果我們要一個空物件，

可以利用 freeze 來產生。

var emptyObject = Object.freeze({});

要確保該物件真的是空的！再來我們來看範例是怎麼運行的。

var app = new Vue({
    el: '#app',
    data:{
        num: 1,
        obj: {
            objnum: 1
        }
    },
    methods: {
        add: function () {
            this.num += 1;
        }
    },
    mounted: function () {
        console.log(this);
    }
});