今天接到通知，公司專案從angular改為使用vue ，兩個框架其實各有千秋吧，Angular相對來說體積大一些，是vue的好幾倍，之前我也寫過angular和vue的資料雙向繫結的區別，一個是髒資料檢查機制，一個是資料劫持，採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。
那就趁著公司需要開發，將vue重新學習一邊，加深印象，便於接下來的開發也是極好的。
下圖是我網上找來的一張圖片，關於angular，react，vue三者的區別

相同點： ng-show和ng-if都可以用來控制元素是否顯示。當值為true時，表示顯示該元素；當值為false時，表示隱藏該元素。
不同點：
ng-show在頁面進行渲染的時候，已經將該元素載入，如果值為false，元素需要隱藏的話，在Chrome瀏覽器中可以查看出，渲染出來的元素僅僅是加了一個ng-hide的class，以此來控制元素的顯示與否。
此時通過dom的類似getElementById的方法可以

ng-if 在頁面渲染的時候，如果值為false，是不會將元素加載出來的，如果值發生了改變為true，則通過操作dom的方式動態新增元素。注意：在這個時候，如果通過document，或者Jquery等方式獲取元素進行操作的話，可能是獲取不到的。
此時通過dom的類似getElementById的方法不可以獲取到元素。

v-show , v-if :其實與ng-show和ng-if類似的，v-show = false是就相當於加了個display:none

v-if = false則相當於頁面沒有此元素，當在為true時，頁面會重新渲染div。
此外v-if 後還有 v-else 和 v-else-if 條件渲染，這裡需要注意的是v-else 必須緊跟 v-if 或v-else-if
例如：
<div v-if="showFlag"> 11111</div> <div v-else>222222</div>

效能比較：
v-show的切換消耗比較低，但是不會重新渲染子元件，所以最好用於靜態的內容或者不需要重新構建結構的元件。而 v-if 比較適合不太頻繁的切換狀態的元件。所以專案設計的時候，不要對複雜的業務設計模組太頻繁的檢視切換。儘量將靜態內容和動態內容分離到不同的模組中。
在切換 v-if 塊時，Vue.js 有一個區域性編譯/解除安裝過程，因為 v-if 之中的模板也可能包括資料繫結或子元件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子元件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始區域性編譯（編譯會被快取起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。

應用場景：
當只需要一次判斷，後續不需要改變是肯定是 v-if 較為合適，因為false的模組不需要渲染。
如果後續會多次切換的，則應該使用 v-show，從而減少效能的損耗。