vuejs的兩個核心是什麼

vuejs的兩個核心是資料驅動和元件系統。資料驅動也就是資料的雙向綁定，用來確保資料和視圖的一致性。元件系統能夠把頁面抽象化成多個相對獨立的模組；可以實現程式碼重用，提高開發效率和程式碼品質，以便於程式碼維護。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue.js的兩大核心：1. 資料驅動------------- 2.元件系統

1. 數據驅動，也就是資料的雙向綁定

資料變更後，會重新對頁面渲染，這就是Vue響應式，那麼這一切是怎麼做到的呢？

想完成這個過程，我們需要：

• 偵測資料的變更
• 在收集視圖依賴了哪些資料
• 資料變更時，自動「通知」需要更新的視圖部分，並進行更新

對應專業俗語分別是：

##資料劫持/ 資料代理
• 依賴收集
• 發布訂閱模式  

也就是說：Vue 響應式核心就是，getter 的時候會收集依賴，setter 的時候會觸發依賴更新

#vue將

遍歷data中物件的所有property，並使用 Object.defineProperty 把這些property 全部轉為 getter/setter#。

這些getter/setter 對使用者來說是看不見的，但在內部它們

讓Vue 能夠追蹤依賴，在property 被存取和修改時通知變更# 。

每個元件實例都對應一個 watcher 實例，它會在元件渲染的過程中把「接觸」過的資料 property 記錄為依賴。

getter 的時候我們會收集依賴，依賴收集就是訂閱資料變化watcher的收集，依賴收集的目的是

當響應式資料發生變化時，能夠通知對應的訂閱者去處理相關的邏輯。

setter 的時候會觸發依賴更新，之後當依賴項的

setter 觸發時，會通知watcher，從而使它關聯的元件重新渲染。

總結：

1）原理：

當建立Vue 實例時,vue 會遍歷data 選項的屬性,利用Object.defineProperty 為屬性新增getter 和setter 對資料的讀取進行劫持（getter 用來依賴收集,setter 用來派發更新）,並且在內部追蹤依賴,在屬性被存取和修改時通知變化。

每個元件實例會有對應的watcher 實例,會在元件渲染的過程中記錄依賴的所有資料屬性（進行依賴收集,還有computed watcher,user watcher 實例）,之後依賴項會改變時,setter 方法會通知依賴與此data 的watcher 實例重新計算（派發更新）,

從而使它關聯的元件重新渲染。

2）實作過程：

    我們已經知道實作資料的雙向綁定，首先要對資料進行劫持監聽，所以我們需要設定一個監聽器Observer，用來監聽所有屬性。如果屬性發上變化了，就需要告訴訂閱者Watcher看是否需要更新。

因為訂閱者有很多個，所以我們需要有一個訊息訂閱器​​Dep來專門收集這些訂閱者，然後在監聽器Observer和訂閱者Watcher之間進行統一管理的。接著，我們還需要有一個指令解析器Compile，對每個節點元素進行掃描和解析，

將相關指令對應初始化成一個訂閱者Watcher，並替換模板資料或綁定對應的函數，此時當訂閱者Watcher接收到對應屬性的變化，就會執行對應的更新函數，進而更新視圖。因此接下去我們執行以下3個步驟，實現資料的雙向綁定：

1.實作一個監聽器Observer，用來劫持並監聽所有屬性，如果有變動的，就通知訂閱者。

2.實作一個訂閱者Watcher，可以收到屬性的變更通知並執行對應的函數，從而更新檢視。

3.實作一個解析器Compile，可以掃描和解析每個節點的相關指令，並根據初始化模板資料以及初始化對應的訂閱器

附註：Proxy 是 JavaScript 2015 的新功能。 Proxy 的代理程式是針對整個物件的，而不是物件的某個屬性，因此不同於 Object.defineProperty 的必須遍歷物件每個屬性，Proxy 只需要做一層代理就可以監聽同級結構下的所有屬性變化，當然對於深層結構，遞迴還是需要進行的。此外Proxy支援代理數組的變化。 Proxy 就是vue3.0使用的方法

#2. 元件系統

認識：

1）能夠把頁面抽象化成多個相對獨立的模組；

2）實現程式碼重用，提高開發效率和程式碼質量，便於程式碼維護

元件的核心選項

1 範本（template）：範本宣告了資料和最終展現給使用者的DOM之間的對應關係。

2 初始資料（data）：一個元件的初始資料狀態。對於可重複使用的元件來說，這通常是私有的狀態。

3 接受的外部參數(props)：元件之間透過參數來進行資料的傳遞和共用。

4 方法（methods）：資料的改動操作一般都在組件的方法內進行。

5 生命週期鉤子函數（lifecycle hooks）：一個元件會觸發多個生命週期鉤子函數，而最新2.0版本對於生命週期函數名稱改變很大。

6 私有資源（assets）：Vue.js當中將使用者自訂的指令、篩選器、元件等統稱為資源。一個元件可以聲明自己的私有資源。私有資源只有該元件和它的子元件可以呼叫。

相關推薦：《vue.js教學》

以上是vuejs的兩個核心是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！