Vue之vue.js聲明式渲染

標籤：efi   停用   組件   建立   cin   update   func   undefined   邏輯   

Html:

<div id="app">

  {{ message }}

</div>

Vue:

var app = new Vue({

  el: ‘#app‘,

  data: {

    message: ‘Hello Vue!‘

  }

})

本例子由HTML模板（View）+Vue執行個體（ViewModel）組成。

建立Vue的執行個體，需傳入一個選項對象，如：

資料（data）：Vue 將會遞迴將 data 的屬性轉換為 getter/setter，從而讓 data 的屬效能夠響應資料變化。

屬性（props）： 可以是數組或對象，用於接收來自父組件的資料。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置進階選項，如類型檢測、自訂校正和設定預設值。

掛載元素（el）：提供一個在頁面上已存在的 DOM 元素作為 Vue 執行個體的掛載目標。可以是 CSS 選取器，也可以是一個 HTMLElement 執行個體。

計算（computed）：聲明計算，處理複雜邏輯

方法（methods）：聲明方法，VM 執行個體可以訪問這些方法，或者在指令運算式中使用。計算屬性預設有getter，但也可以自訂一個setter。

computed和method比較：methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩衝，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。computed 效能會更好，但是如果你不希望緩衝，你可以methods。

為什麼需要緩衝？

假設我們有一個效能開銷比較大的的計算屬性 A ，它需要遍曆一個極大的數組和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有緩衝，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩衝，請用 method 替代。

watch：觀察和響應資料變化。一個對象，鍵是需要觀察的運算式，值是對應回呼函數。值也可以是方法名，或者包含選項的對象。

    computed和watch比較：計算屬性在大多數情況下更合適，但有時也需要一個自訂的 watch。watch 選項允許我們執行非同步作業（訪問一個 API），限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這是計算屬性無法做到的。

擴充（extended）：擴充到另一個組件。

minxin：混合執行個體對象可以像正常的執行個體對象一樣包含選項。

parent：指定已建立的執行個體之父執行個體，在兩者之間建立父子關係。

component：聲明組件，包含 Vue 執行個體可用組件的雜湊表。

生命週期：

執行個體

 var app = new Vue({

          el: ‘#app‘,

          data: {

              message : "xuxiao is boy"

          },

           beforeCreate: function () {

                    console.group(‘beforeCreate 建立前狀態===============》‘);

                   console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

                   console.log("%c%s", "color:red","data   : " + this.$data); //undefined

                   console.log("%c%s", "color:red","message: " + this.message) 

            }

}）

指令	描述
beforeCeate	在執行個體初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被調用。
created	執行個體已經建立完成之後被調用。在這一步，執行個體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount	在掛載開始之前被調用：相關的 render 函數首次被調用。 該鉤子在伺服器端渲染期間不被調用
mounted	el 被新建立的 vm.$el 替換，並掛載到執行個體上去之後調用該鉤子。如果 root 執行個體掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
beforeUpdate	資料更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程
updated	由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。 當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。
activated	keep-alive 組件啟用時調用。 該鉤子在伺服器端渲染期間不被調用。
deactivated	keep-alive 組件停用時調用。 該鉤子在伺服器端渲染期間不被調用
bedoreDestroy	執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。 該鉤子在伺服器端渲染期間不被調用。
destroyed	Vue 執行個體銷毀後調用。調用後，Vue 執行個體指示的所有東西都會解除綁定定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。 該鉤子在伺服器端渲染期間不被調用。

Vue之vue.js聲明式渲染