Vue的實例對象（三）

時間 2019-11-20

標籤 vue 實例對象简体版

原文原文鏈接

1、建立一個 Vue 實例

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：html

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

當建立一個 Vue 實例時，你能夠傳入一個選項對象。這些選項能夠用來表示你要想的行爲。vue

2、數據與方法

當一個 Vue 實例被建立時，它將 data 對象中的全部的屬性加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。npm

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            {{ a }}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 咱們的數據對象
        var data = {
            a: 1
        }

        var vm = new Vue({
            el: '#app',
            data: data
        })

        // 得到這個實例上的屬性
        // 返回源數據中對應的字段
        //vm.a == data.a // => true, 在html中，由於Vue實例已經指定了範圍，因此實例的屬性是能夠直接使用的，如vm.a，在html中直接用{{a}}獲取值

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

        // ……反之亦然
        //data.a = 3
        //vm.a // => 3
    </script>

</html>

注：只有當Vue實例被建立時就已經存在於 data 中的屬性纔是響應式的。即實例建立後再建立新的屬性（如：vm.b='hi'）不會觸發任何視圖的更新。若是你知道你會在晚些時候須要一個屬性，能夠設置給屬性設置默認值。另外，使用 Object.freeze()，會阻止修改現有的屬性，意味着響應系統沒法再追蹤變化。app

<script>
    var obj = {
        foo: 'bar'
    }

    //Object.freeze(obj) //若註釋該語句，foo的值會變成baz

    new Vue({
        el: '#app',
        data: obj
    })
</script>

<div id="app">
    <p>{{ foo }}</p>
    <!-- 這裏的 `foo` 不會更新！ -->
    <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

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

3、實例的生命週期鉤子

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。this

好比 created 鉤子能夠用來在一個實例被建立以後執行代碼：spa

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

也有一些其它的鉤子，在實例生命週期的不一樣階段被調用，如 mounted、updated 和 destroyed。生命週期鉤子的 this 上下文指向調用它的 Vue 實例。.net

4、生命週期圖示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。