Vue實例

1. 創建一個Vue實例

一個Vue應用由一個通過new Vue創建的根Vue實例,以及可選的嵌套的、可復用的組件樹組成。所有的Vue組件都是Vue實例,接受相同的選項對象(一些根實例特有的屬性除外).

// 每個Vue應用都是通過用Vue函數創建一個新的Vue實例開始的
var vm = new Vue({  // 通常使用vm(ViewModel)這個變量名表示Vue實例
    // 選項
})

2. 數據與方法

當一個Vue實例被創建時,它將data對象中的所有屬性加入到Vue的響應式系統中.當屬性變化,視圖將會產生"響應”.

// 數據對象
var data = { a: 1 }

// 將對象加入Vue實例中
var vm = new Vue({
    data: data
})

// 獲得這個實例上的屬性,返回源數據中對應的字段
vm.a == data.a  // true

// 設置屬性也會影響到源數據
vm.a = 2;
data.a  // 2

// 反之亦然
data.a = 3;
vm.a    // 3

只有當實例被創建時data中存在的屬性才是響應式的

// b的改動將不會觸發任何視圖的更新
vm.b = 'hi'

屬性開始為空或者不存在，需要設置一些初始值

data: {
    newTodoText: '',
    visitCount: 0,
    hideCompletedTodos: false,
    todos: [],
    error: null
}

ps. Object.freeze()會阻止修改現有的屬性,響應系統無法再追蹤變化.

var obj = {
    foo: 'bar'
}

Object.freeze(obj)

new Vue({
    el: '#app',
    data: obj
})

<div id="app">
    // 這里的foo不會更新
    <p>{{ foo }}</p>
    <button v-on:click="foo='baz'">change it</button>
</div>

除了數據屬性,Vue還提供了一些有用的實例屬性與方法.

// 用前綴$,以便與用戶定義的屬性區分開
var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})

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

// 實例方法
vm.$watch('a', function (newValue, oldValue) {
    // 這個回調將在vm.a改變后調用
})

3. 實例生命周期鈎子

每個Vue實例在被創建時都要經過一系列初始化過程(設置數據監聽、編譯模板、將實例掛載到dom並在數據變化時更新dom等).同時,也會運行一些叫做生命周期鈎子的函數,用戶在不同階段可以添加自己代碼.

new Vue({
    data: {
        a: 1
    },
    created: function () {  // 在實例被創建之后執行
        // this指向vm實例
        console.log(this.a) // 1
    }
})

在實例生命周期的不同階段還有一些其他的鈎子函數被調用,如mounted、updated和destoryed.生命周期鈎子的this上下文指向調用它的Vue實例.

ps.不要在選項屬性或回調上使用箭頭函數

// 箭頭函數並沒有this,this會作為變量一直向上級詞法作用域查找,直到找到為止
// 經常導致Uncaught TypeError: Cannot read property of undefined
// 或Uncaught TypeError: this.myMethod is not a function
created: () => console.log(this.a)

vm.$watch('a', newValue => this.myMethod())

4. 生命周期圖示