vue實例以及生命週期

1.Vue實例API

1.構造器(實例化)

　var vm = new Vue({　

　　　//選項

　　　|-------DOM（3）

　　　|  　　　　|-------el (提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標。)

　　　|  　　　　|-------template (一個字符串模板做爲 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。)

　　　|  　　　　|-------render (字符串模板的代替方案，容許你發揮 JavaScript 最大的編程能力。)

　　　|-------數據（6）

　　　|  　　　　|-------data    (Vue實例的數據對象。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性可以響應數據變化)

　　　|  　　　　|-------props　(能夠是數組或對象，用於接收來自父組件的數據。)

　　　|  　　　　|-------propsData (建立實例時傳遞 props。主要做用是方便測試。)

　　　|  　　　　|-------computed (計算屬性將被混入到 Vue 實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例)

　　　|  　　　　|-------methods (methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。)

　　　|  　　　　|-------watch (一個對象，鍵是須要觀察的表達式，值是對應回調函數。)

　　　|-------生命週期鉤子（10）

　　　|  　　　　|-------beforeCreate(在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。)

　　　|  　　　　|-------create(實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見)

　　　|  　　　　|-------beforeMount(在掛載開始以前被調用：相關的 render 函數首次被調用。)

　　　|  　　　　|-------mounted(el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。)

　　　|  　　　　|-------beforeUpdate(數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。)

　　　|  　　　　|-------updated(因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。)

　　　|  　　　　|-------activated(keep-alive 組件激活時調用。)

　　　|  　　　　|-------deactivated(keep-alive 組件停用時調用。)

　　　|  　　　　|-------beforeDestroy(實例銷燬以前調用。在這一步，實例仍然徹底可用。)

　　　|  　　　　|-------destroyed(Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。)

　　　|-------資源（3）

　　　|  　　　　|-------directives(包含 Vue 實例可用指令的哈希表。)

　　　|  　　　　|-------filters(包含 Vue 實例可用過濾器的哈希表。)

　　　|  　　　　|-------components(包含 Vue 實例可用組件的哈希表。)

　　　|-------雜項（6）

　　　|  　　　　|-------parent(指定已建立的實例之父實例，在二者之間創建父子關係。子實例能夠用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中。)

　　　|  　　　　|-------mixins(mixins 選項接受一個混合對象的數組。Mixin鉤子按照傳入順序依次調用,並在調用組件自身的鉤子以前被調用。)

　　　|  　　　　|-------name(容許組件模板遞歸地調用自身。注意，組件在全局用 Vue.component() 註冊時，全局 ID 自動做爲組件的 name。)

　　　|  　　　　|-------extends（容許聲明擴展另外一個組件。這主要是爲了便於擴展單文件組件。這和 mixins 相似，區別在於，組件自身的選項會比要擴展的源組件具備更高的優先級。）

　　　|  　　　　|-------delimiters（改變純文本插入分隔符。）

　　　|  　　　　|-------functional（使組件無狀態（沒有 data ）和無實例（沒有 this 上下文）。他們用一個簡單的 render 函數返回虛擬節點使他們更容易渲染。）

　})

   擴展Vue構造器：能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器：

　var MyComponent = Vue.extend({

　}) 

2.屬性與方法

　　1.實例屬性(10)

　　vm.$data（Vue 實例觀察的數據對象。Vue 實例代理了對其 data 對象屬性的訪問。）

　　vm.$el（Vue 實例使用的根 DOM 元素。）

　　vm.$options（用於當前 Vue 實例的初始化選項。須要在選項中包含自定義屬性時會有用處）

　　vm.$parent（父實例，若是當前實例有的話。）

　　vm.$root（當前組件樹的根 Vue 實例。若是當前實例沒有父實例，此實例將會是其自已。）

　　vm.$children（當前實例的直接子組件。）

　　vm.$slots（用來訪問被 slot 分發的內容。每一個具名 slot 有其相應的屬性（例如：slot="foo" 中的內容將會在 vm.$slots.foo中被找到）。default 屬性包括了全部沒有被包含在具名 slot 中的節點。）

　　vm.$scopedSlots（用來訪問 scoped slots.）

　　vm.$refs（一個對象，其中包含了全部擁有 ref 註冊的子組件。）

　　vm.$isServer（當前 Vue 實例是否運行於服務器。）

　　2.實例方法/數據（3）

　　　　vm.$watch（觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數獲得的參數爲新值和舊值。）

　　　　vm.$set（這是全局 Vue.set 的別名。）

　　　　vm.$delete（這是全局 Vue.delete 的別名。）

　　3.實例方法/事件（4）

　　　　vm.$on（監聽當前實例上的自定義事件。事件能夠由vm.$emit觸發。回調函數會接收全部傳入事件觸發函數的額外參數。）

　　　　vm.$once（監聽一個自定義事件，可是隻觸發一次，在第一次觸發以後移除監聽器。）

　　　　vm.$off（移除事件監聽器。）

　　　　vm.$emit（觸發當前實例上的事件。附加參數都會傳給監聽器回調。）

　　4.實例方法/生命週期（4）

　　　　vm.$mount（若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.$mount()手動地掛載一個未掛載的實例。）

　　　　vm.$forceUpdate（迫使Vue實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。）

　　　　vm.$nextTick（將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新。）

　　　　vm.$destroy（徹底銷燬一個實例。清理它與其它實例的鏈接，解綁它的所有指令及事件監聽器。）

3.全局API（10）

　　　　Vue.extend　------使用基礎 Vue 構造器，建立一個「子類」。參數是一個包含組件選項的對象。

　　　　Vue.nextTick ------在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

　　　　Vue.set          ------設置對象的屬性。若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。

　　　　Vue.delete     ------刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制，可是你應該不多會使用它。

　　　　Vue.directive  ------註冊或獲取全局指令。

　　　　Vue.filter        ------註冊或獲取全局過濾器。

　　　　Vue.component----註冊或獲取全局組件。註冊還會自動使用給定的id設置組件的名稱

　　　　Vue.use         ------安裝 Vue.js 插件。

　　　　Vue.mixin　　------全局註冊一個混合，影響註冊以後全部建立的每一個 Vue 實例。

　　　　Vue.compile  ------在render函數中編譯模板字符串。只在獨立構建時有效

4.全局配置 Vue.config　（6）

　　　　Vue.config.silent = true   　　　　　　　　　　   ------取消 Vue 全部的日誌與警告。

　　　　Vue.config.optionMergeStrategies.methods　　  ------自定義合併策略的選項。

　　　　Vue.config.devtools= true   　　　　　　　　　　------配置是否容許vue-devtools檢查代碼。

　　　　Vue.config.errorHandler= functiono(err, vm){}  ------指定組件的渲染和觀察期間未捕獲錯誤的處理函數。

　　　　Vue.config.ignoredElements = ['my-custom-web-component', 'another-web-component']　　　------忽略在Vue 以外的自定義元素。

　　　　Vue.config.keyCodes   　　　　　　　　　　　　　------給v-on自定義鍵位別名

2.生命週期

　　Vue實例有一個完整的生命週期，從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。

　　

　　圖片轉載自：http://www.cnblogs.com/fly_dragon/p/6220273.html

　　

那麼下面咱們來進行測試一下

<section id="app-8">
    {{data}}
</section>

var myVue=new Vue({
        el:"#app-8",
        data:{
            data:"aaaaa",
            info:"nono"
        },
        beforeCreate:function(){
            console.log("建立前========")
            console.log(this.data)
            console.log(this.$el)
        },
        created:function(){
            console.log("已建立========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeMount:function(){
            console.log("mount以前========")
            console.log(this.info)
            console.log(this.$el)
        },
        mounted:function(){
            console.log("mounted========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("更新前========");

        },
        updated:function(){
            console.log("更新完成========");
        },
        beforeDestroy:function(){
            console.log("銷燬前========")
            console.log(this.info)
            console.log(this.$el)
        },
        destroyed:function(){
            console.log("已銷燬========")
            console.log(this.info)
            console.log(this.$el)
        }
    })

 

代碼如上，瀏覽器開始加載文件

 

 

 

 

由上圖可知：

　　一、beforeCreate 此時$el、data 的值都爲undefined

　　二、create以後，此時能夠拿到data的值，可是$el依舊爲undefined

　　三、mount以前，$el的值爲「虛擬」的元素節點

　　四、mount以後，mounted以前，「虛擬」的dom節點被真實的dom節點替換，並將其插入到dom樹中，因而在觸發mounted時，能夠獲取到$el爲真實的dom元素()

　　myVue.$el===document.getElementById("app-8")  // true

 

接着，在console中修改data，更新視圖

 

 　  觸發beforeUpdata 和updated

接着，執行myVue.$destroy()

 

總結一下，對官方文檔的那張圖簡化一下，就獲得了這張圖

轉載自：http://www.cnblogs.com/gagag/p/6246493.html

 　

　　再看一個綜合的實戰的例子，可能涉及到ajax和組件，不過先看一下vue的生命週期的例子的用法：

import Axios from 'axios'       // 這是一個輕量級的ajax庫，import是es6模塊導入的語法。
export default {                // 這是一個vue的模塊，後面講奧。
  name: 'app',
  components: {
  },
  data: function () {
    return {
      list: []
    }
  },
  mounted: function () {          // 掛在完成後的生命週期鉤子註冊。
    this.$nextTick(function () {  // 等待下一次更新完成後執行業務處理代碼。
      Axios.get('/api/menulist', {// 將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新
        params: {
        }
      }).then(function (res) {
        this.list = res.data
      }.bind(this))
    })
  }
}

 

 

 

 

 

 

 

 

轉載自：http://www.cnblogs.com/fly_dragon/p/6220273.html