DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Vue.js每天必學之構造器與生命周期
Vue.js每天必學之構造器與生命周期
編輯:關於JavaScript     

構造器

每個 Vue.js 應用的起步都是通過構造函數 Vue 創建一個 Vue 的根實例:

var vm = new Vue({
 // 選項
})

一個 Vue 實例其實正是一個 MVVM 模式中所描述的 ViewModel - 因此在文檔中經常會使用 vm 這個變量名。

在實例化 Vue 時,需要傳入一個選項對象,它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。全部的選項可以在 API 文檔中查看。

可以擴展 Vue 構造器,從而用預定義選項創建可復用的組件構造器:

var MyComponent = Vue.extend({
 // 擴展選項
})

// 所有的 `MyComponent` 實例都將以預定義的擴展選項被創建
var myComponentInstance = new MyComponent()

盡管可以命令式地創建擴展實例,不過在多數情況下將組件構造器注冊為一個自定義元素,然後聲明式地用在模板中。我們將在後面詳細說明組件系統。現在你只需知道所有的 Vue.js 組件其實都是被擴展的 Vue 實例。

屬性與方法

每個 Vue 實例都會代理其 data 對象裡所有的屬性:

var data = { a: 1 }
var vm = new Vue({
 data: data
})

vm.a === data.a // -> true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2

// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被代理的屬性是響應的。如果在實例創建之後添加新的屬性到實例上,它不會觸發視圖更新。我們將在後面詳細討論響應系統。

除了這些數據屬性,Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $,以便與代理的數據屬性區分。例如:

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
 // 這個回調將在 `vm.a` 改變後調用
})

參考 API 文檔查看全部的實例屬性與方法。

實例生命周期

Vue 實例在創建時有一系列初始化步驟——例如,它需要建立數據觀察,編譯模板,創建必要的數據綁定。在此過程中,它也將調用一些生命周期鉤子,給自定義邏輯提供運行機會。例如 created鉤子在實例創建後調用:

var vm = new Vue({
 data: {
 a: 1
 },
 created: function () {
 // `this` 指向 vm 實例
 console.log('a is: ' + this.a)
 }
})
// -> "a is: 1"

也有一些其它的鉤子,在實例生命周期的不同階段調用,如 compiled、 ready 、destroyed。鉤子的 this 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有“控制器”的概念?答案是,沒有。組件的自定義邏輯可以分割在這些鉤子中。

生命周期圖示

下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西,不過以後它會有幫助。

本文已被整理到了《Vue.js前端組件學習教程》,歡迎大家學習閱讀。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved