開講之前我先簡單的自我介紹一下，本人自喻：flitrue，工作三年有餘，在一家不知名的互聯網企業擔任前端架構師之職。
技術選型問題
近幾年前端發展快速，很多同學抱怨學不動了，要回家餵豬。面對前端技術海量的“輪子”，我們犯了“選擇困難症”，到底選擇哪個技術學習？在實際項目中如何選擇技術棧？
對於喜歡不斷學習的同學，各種技術都想嘗試一下，希望在實際的項目中使用。但是往往舉步維艱，還沒開始就扼殺在搖籃裏了。如果我們每個項目都要選擇不同都技術棧，可能我們的同事要瘋掉，每個人會的東西不一樣，學習能力也不一樣，很難在實際中實施。而且，如果我們的項目每個的技術棧都不一樣，老闆都會瘋掉吧，每次招人都需要問到各個技術會不會，有沒有用過。發佈都項目總得有人去維護，所以這樣會提高很多成本，老闆不瘋纔怪。
所以我們在實際開發中，還是要保持一致性。
約束一致性
我相信每個公司都會有一套開發規範，要求每個技術人掌握。具體分爲如下兩種：
- 技術選型
- 代碼規範
技術選型
對於vue項目開發，很多項目都採用vue全家桶（vue + vue-router + vuex + axios …)。創建vue項目最簡單的方式就是使用vue-cli腳手架，約定好採用哪些特性（Babel、TypeScript、CSS Pre-processors、Linter等)。
代碼規範
在開發中，首先我們要保證項目目錄結構的清晰。然後我們還要保證文件夾和文件名命名規範，比如：src/components/Common/公共組件的命名首字母要大寫，裏面的組件命名統一採用大駝峯命名。
// 項目目錄
.
├── README.md
├── babel.config.js # babel配置文件
├── package.json # 依賴配置文件
├── dist # 打包後的項目目錄
├── public # 公共資源
│ ├── favicon.ico
│ └── index.html
└── src # 源代碼
├── App.vue # 項目入口文件
├── assets # 靜態資源
│ ├── images/
│ └── json/
├── components # vue組件庫
│ ├── Common # 公共組件
│ └── HelloWorld.vue
├── configs # 配置項
├── less # css預處理文件
├── libs # 工具庫
├── main.js # 程序入口文件
├── router.js # 路由配置
├── store.js # 狀態管理器
└── views # 業務頁面模塊
└── Home.vue
除此之外，我們最好約定單個vue組件結構順序，<template>要位於最上面一層，<script>放在中間位置，<style>放在最後。如果你還想規範一點，可以約定<script>內的選項和鉤子函數書寫順序。
// 單個vue組件
<template>
...
</template>
<script>
export default {
name: "",
props: {},
data() {
return {}
},
components: {},
watch: {},
computed: {},
methods: {}
...
}
</script>
<style lang="less" scoped>
...
</style>
當然了，如果我們還想更加嚴格的規範，我推薦採用eslint進行約束。
如何優化性能
我們都知道瀏覽器有自動垃圾回收機制(GC)，GC採用標記清除原理，但是我們最好是手動清除佔用的內存資源。
<script>
export default {
name: "",
props: {},
data() {
return {
penson: {
name: "flitrue"
age: 18,
sex: "man",
getRealAge() {
return this.age + 10;
}
}
}
},
beforeDestroy() {
this.person = null; // vue實例銷燬前手動清除this.person
}
}
</script>
如果我們需要學習高級的性能優化，需要掌握vue源碼和瀏覽器運行機制，所以最終我們還是要學習底層知識，才能徹底掌握性能如何優化。
雙向綁定原理
vue是採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。但是Object.defineProperty()不能監聽數組中數據的變動。如果還不知道Object.defineProperty()方法的使用，可以查看mdn的詳細介紹。
vue利用Object.defineProperty()把內部解耦爲三部分：
Observer: 遞歸的監聽對象上的所有屬性，當屬性改變時觸發對應的Watcher
Watcher:當對象的數據值修改時，執行相應的回調函數，更新模板內容
dep：鏈接Observer和Watcher，每一個Observer對應一個dep，內部維護一個數組，保存與該Observer相關的Watcher
最後
最後，我留下兩個問題供大家思考。
data選項怎麼不是一個對象，而是一個返回對象的方法？- vue中是如何實現監聽數組的變化？