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

饒平ssl適用于網站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

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

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

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

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

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

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

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

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

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

對應專業(yè)俗語分別是：

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

• 依賴收集

• 發(fā)布訂閱模式

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

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

這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。

每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù) property 記錄為依賴。

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

setter 的時候會觸發(fā)依賴更新，之后當依賴項的 setter 觸發(fā)時，會通知 watcher，從而使它關聯(lián)的組件重新渲染。

總結：

1）原理：

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

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

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

2）實現(xiàn)過程：

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

因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進行統(tǒng)一管理的。接著，我們還需要有一個指令解析器Compile，對每個節(jié)點元素進行掃描和解析，

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

1.實現(xiàn)一個監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動的，就通知訂閱者。

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

3.實現(xiàn)一個解析器Compile，可以掃描和解析每個節(jié)點的相關指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應的訂閱器

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

2. 組件系統(tǒng)

認識：

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

2）實現(xiàn)代碼重用，提高開發(fā)效率和代碼質量，便于代碼維護

組件的核心選項

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

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

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

4 方法（methods）：對數(shù)據(jù)的改動操作一般都在組件的方法內進行。

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

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

看完上述內容，你們對vuejs的兩個核心是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當前文章：vuejs的兩個核心是什么
文章地址：http://www.rwnh.cn/article2/jscsoc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、面包屑導航、網站設計公司、網站收錄、App開發(fā)、動態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)