一、vuejs 前端框架 漸進式前端框架。
? ? ? ?適應項目：小，中，大。

二，核心思想

Vue.js是一個提供MVVM數據雙向綁定的庫，專注于UI層面，核心思想是：數據驅動、組件系統。

數據驅動：

Vue.js數據觀測原理在技術實現上，利用的是ES5Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），

可稱為基于依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。

三、vuejs功能

? ? ? VueJS 讓前端和后臺完全分離。

? ? ? 1、擅長移動端單頁應用程序
? ? ? 2、擅長網頁版在線及時聊天(彈幕)
? ? ? 3、傳統多頁網站

四、重要概念

? ? ?數據綁定

? ??Vue通過設定對象屬性的 setter/getter 方法來監聽數據的變化，通過getter進行依賴收集，而每個setter方法就是一個觀察者，在數據

變更的時候通知訂閱者更新視圖。

??

? ? ? ?vue采用的是數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來實現對屬性的劫持，并在數據變動時發布消息給訂閱者，使其觸發相應的監聽回調。

? ? ? 具體步驟：

1、 實現Observer

? ? ? ? 將需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter。實現一個消息訂閱器，維護一個數組，用來收集訂閱者，數據變動觸發notify，再調用訂閱者的update方法

2、 實現Compile

? ? ? ? compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖

3、 實現Watcher

? ? ? ? ?Watcher訂閱者是Observer和Compile之間通信的橋梁

五：Vue優勢

低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。

獨立開發。開發人員可以專注于業務邏輯和數據的開發（ViewModel）。

可測試。界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。

?

六，vue生命周期

? ? ?

• 創建前/后： 在beforeCreate階段，vue實例的掛載元素，el和數據對象data都為undefined,還未初始化。在created階段，vue示例的數據對象data產生，el還未有。

• 載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

• 更新前/后：當data變化時，會觸發beforeUpdate和updated方法。

• 銷毀前/后：在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。

?

??

轉載于:https://www.cnblogs.com/raulfang/p/8748701.html

總結

以上是生活随笔為你收集整理的vue小记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。