vuejs的兩個(gè)核心是什么

今天就跟大家聊聊有關(guān)vuejs的兩個(gè)核心是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

vuejs的兩個(gè)核心是數(shù)據(jù)驅(qū)動(dòng)和組件系統(tǒng)。數(shù)據(jù)驅(qū)動(dòng)也就是數(shù)據(jù)的雙向綁定，用于保證數(shù)據(jù)和視圖的一致性。組件系統(tǒng)能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊；可以實(shí)現(xiàn)代碼重用，提高開(kāi)發(fā)效率和代碼質(zhì)量，便于代碼維護(hù)。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vue.js的兩大核心：1. 數(shù)據(jù)驅(qū)動(dòng) ------------- 2.組件系統(tǒng)

1. 數(shù)據(jù)驅(qū)動(dòng)，也就是數(shù)據(jù)的雙向綁定

數(shù)據(jù)發(fā)生變化后，會(huì)重新對(duì)頁(yè)面渲染，這就是Vue響應(yīng)式，那么這一切是怎么做到的呢？

想完成這個(gè)過(guò)程，我們需要：

• 偵測(cè)數(shù)據(jù)的變化

• 收集視圖依賴(lài)了哪些數(shù)據(jù)

• 數(shù)據(jù)變化時(shí)，自動(dòng)“通知”需要更新的視圖部分，并進(jìn)行更新

對(duì)應(yīng)專(zhuān)業(yè)俗語(yǔ)分別是：

• 數(shù)據(jù)劫持 / 數(shù)據(jù)代理

• 依賴(lài)收集

• 發(fā)布訂閱模式

也就是說(shuō)：Vue 響應(yīng)式核心就是，getter 的時(shí)候會(huì)收集依賴(lài)，setter 的時(shí)候會(huì)觸發(fā)依賴(lài)更新

vue將遍歷data中對(duì)象的所有property，并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter。

這些 getter/setter 對(duì)用戶(hù)來(lái)說(shuō)是不可見(jiàn)的，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴(lài)，在 property 被訪問(wèn)和修改時(shí)通知變更。

每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例，它會(huì)在組件渲染的過(guò)程中把“接觸”過(guò)的數(shù)據(jù) property 記錄為依賴(lài)。

getter 的時(shí)候我們會(huì)收集依賴(lài)，依賴(lài)收集就是訂閱數(shù)據(jù)變化watcher的收集，依賴(lài)收集的目的是當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，能夠通知相應(yīng)的訂閱者去處理相關(guān)的邏輯。

setter 的時(shí)候會(huì)觸發(fā)依賴(lài)更新，之后當(dāng)依賴(lài)項(xiàng)的 setter 觸發(fā)時(shí)，會(huì)通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染。

總結(jié)：

1）原理：

當(dāng)創(chuàng)建 Vue 實(shí)例時(shí),vue 會(huì)遍歷 data 選項(xiàng)的屬性,利用 Object.defineProperty 為屬性添加 getter 和 setter 對(duì)數(shù)據(jù)的讀取進(jìn)行劫持（getter 用來(lái)依賴(lài)收集,setter 用來(lái)派發(fā)更新）,并且在內(nèi)部追蹤依賴(lài),在屬性被訪問(wèn)和修改時(shí)通知變化。

每個(gè)組件實(shí)例會(huì)有相應(yīng)的 watcher 實(shí)例,會(huì)在組件渲染的過(guò)程中記錄依賴(lài)的所有數(shù)據(jù)屬性（進(jìn)行依賴(lài)收集,還有 computed watcher,user watcher 實(shí)例）,之后依賴(lài)項(xiàng)被改動(dòng)時(shí),setter 方法會(huì)通知依賴(lài)與此 data 的 watcher 實(shí)例重新計(jì)算（派發(fā)更新）,

從而使它關(guān)聯(lián)的組件重新渲染。

2）實(shí)現(xiàn)過(guò)程：

我們已經(jīng)知道實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)，所以我們需要設(shè)置一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)監(jiān)聽(tīng)所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。

因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來(lái)專(zhuān)門(mén)收集這些訂閱者，然后在監(jiān)聽(tīng)器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。接著，我們還需要有一個(gè)指令解析器Compile，對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，

將相關(guān)指令對(duì)應(yīng)初始化成一個(gè)訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時(shí)當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化，就會(huì)執(zhí)行對(duì)應(yīng)的更新函數(shù)，從而更新視圖。因此接下去我們執(zhí)行以下3個(gè)步驟，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定：

1.實(shí)現(xiàn)一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)劫持并監(jiān)聽(tīng)所有屬性，如果有變動(dòng)的，就通知訂閱者。

2.實(shí)現(xiàn)一個(gè)訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。

3.實(shí)現(xiàn)一個(gè)解析器Compile，可以?huà)呙韬徒馕雒總€(gè)節(jié)點(diǎn)的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器

注：Proxy 是 JavaScript 2015 的一個(gè)新特性。Proxy 的代理是針對(duì)整個(gè)對(duì)象的，而不是對(duì)象的某個(gè)屬性，因此不同于 Object.defineProperty 的必須遍歷對(duì)象每個(gè)屬性，Proxy 只需要做一層代理就可以監(jiān)聽(tīng)同級(jí)結(jié)構(gòu)下的所有屬性變化，當(dāng)然對(duì)于深層結(jié)構(gòu)，遞歸還是需要進(jìn)行的。此外Proxy支持代理數(shù)組的變化。Proxy 就是vue3.0使用的方法

2. 組件系統(tǒng)

認(rèn)識(shí)：

1）能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊；

2）實(shí)現(xiàn)代碼重用，提高開(kāi)發(fā)效率和代碼質(zhì)量，便于代碼維護(hù)

組件的核心選項(xiàng)

1 模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶(hù)的DOM之間的映射關(guān)系。

2 初始數(shù)據(jù)（data）：一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可復(fù)用的組件來(lái)說(shuō)，這通常是私有的狀態(tài)。

3 接受的外部參數(shù)(props)：組件之間通過(guò)參數(shù)來(lái)進(jìn)行數(shù)據(jù)的傳遞和共享。

4 方法（methods）：對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行。

5 生命周期鉤子函數(shù)（lifecycle hooks）：一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，最新2.0版本對(duì)于生命周期函數(shù)名稱(chēng)改動(dòng)很大。

6 私有資源（assets）：Vue.js當(dāng)中將用戶(hù)自定義的指令、過(guò)濾器、組件等統(tǒng)稱(chēng)為資源。一個(gè)組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用。

看完上述內(nèi)容，你們對(duì)vuejs的兩個(gè)核心是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。