你應該要知道的Vue.js

Lemo_Liu發表於2018-03-22
Vue.js

原文：你應該要知道的Vue.js

元件data為什麼必須是函式？

因為元件可能被多處使用，但他們的data是私有的，所以每個元件都要return一個新的data物件

元件通訊

  • 父子元件通訊：$on、$emit
  • 非父子元件的通訊: event bus
  • 複雜情況： vuex

怎麼動態新增元件

場景：在vue中，點選button，隨機生成a、b、c元件中的一個

  • is
  • render

思路：設定一個components陣列，button點選一次，push一個元件名，v-for遍歷components，並用is或render動態生成

vue-loader是什麼？

vue-loader 是一個 webpack 的 loader，可以將單檔案元件轉換為 JavaScript 模組

引用文件的說法：

  • 預設支援 ES2015；
  • 允許對 Vue 元件的組成部分使用其它 webpack loader，比如對 <style> 使用 Sass 和對 <template> 使用 Jade；
  • .vue 檔案中允許自定義節點，然後使用自定義的 loader 進行處理；
  • 把 <style> 和 <template> 中的靜態資源當作模組來對待，並使用 webpack loader 進行處理；
  • 對每個元件模擬出 CSS 作用域；
  • 支援開發期元件的熱過載。

資料雙向繫結原理

實現資料繫結的常見做法：

  • Object.defineProperty：劫持各個屬性的setter，getter
  • 髒值檢測：通過特定事件進行輪循
  • 釋出/訂閱模式：通過訊息釋出並將訊息進行訂閱

vue採用的是資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來實現對屬性的劫持，並在資料變動時釋出訊息給訂閱者，使其觸發相應的監聽回撥。

具體步驟：

1、 實現Observer

將需要observe的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上setter和getter。實現一個訊息訂閱器，維護一個陣列，用來收集訂閱者，資料變動觸發notify，再呼叫訂閱者的update方法

2、 實現Compile

compile解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視

3、 實現Watcher

Watcher訂閱者是Observer和Compile之間通訊的橋樑

主要做的事情是:

  • 在自身例項化時往屬性訂閱器(dep)裡面新增自己
  • 自身必須有一個update()方法
  • 待屬性變動dep.notice()通知時，能呼叫自身的update()方法，並觸發Compile中繫結的回撥，則功成身退。

4、 實現MVVM

MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到資料變化 -> 檢視更新；檢視互動變化(input) -> 資料model變更的雙向繫結效果

參考：剖析Vue原理&實現雙向繫結MVVM

對Vue.js的template編譯的理解

template會被編譯成AST語法樹，AST會經過generate得到render函式，render的返回值是VNode，VNode是Vue的虛擬DOM節點

vue 為什麼採用Virtual DOM？

一方面是出於效能方面的考量：

  • 建立真實DOM的代價高：真實的 DOM 節點 node 實現的屬性很多，而 vnode 僅僅實現一些必要的屬性，相比起來，建立一個 vnode 的成本比較低。
  • 觸發多次瀏覽器重繪及迴流：使用 vnode ，相當於加了一個緩衝，讓一次資料變動所帶來的所有 node 變化，先在 vnode 中進行修改，然後 diff 之後對所有產生差異的節點集中一次對 DOM tree 進行修改，以減少瀏覽器的重繪及迴流

但是效能受場景的影響是非常大的，不同的場景可能造成不同實現方案之間成倍的效能差距，所以依賴細粒度繫結及 Virtual DOM哪個的效能更好不是一個容易下定論的問題。更重要的原因是為了解耦HTML依賴，這帶來兩個非常重要的好處是：

  • 不再依賴 HTML 解析器進行模版解析，可以進行更多的 AOT 工作提高執行時效率：通過模版 AOT 編譯，Vue 的執行時體積可以進一步壓縮，執行時效率可以進一步提升；
  • 可以渲染到 DOM 以外的平臺，實現 SSR、同構渲染這些高階特性，Weex 等框架應用的就是這一特性。

綜上，Virtual DOM 在效能上的收益並不是最主要的，更重要的是它使得 Vue 具備了現代框架應有的高階特性。

vue 和 react 區別

相同點:

  • 都支援SSR
  • 都有Virtual DOM
  • 元件化開發
  • 資料驅動
  • …

不同點:

  • vue推薦的是使用 webpack + vue-loader 的單檔案元件格式，React 推薦的做法是 JSX + inline style
  • vue 的Virtual DOM是追蹤每個元件的依賴關係，不會渲染整個元件樹，react 每當應該狀態被改變時，全部子元件都會 re-render
  • …

更多內容待更新…

相關文章