Vue.js的資料與方法

當一個 Vue 執行個體被建立時，它将 data 對象中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖将會産生“響應”，即比對更新為新的值。

<div id="app">
	{{ a }}
</div>
           

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

需要注意的是，這裡的“ data: data ”中我們沒有像之前那樣的“ data: { a:1 } ”，我們在這裡聲明了一個名為“data”的變量，“:”前後的“data”含義是不同的，前面那個是Vue()的data資料，後米那個是代表資料的變量。

下面我們進行一些調用：

這裡我們是對變量data進行了修改，同時下面的語句也能達到同樣的效果：

這樣也能修改變量的值。但是如果我們在HTML中增加一個變量：

<div id="app">
	{{ a }}{{ b }}
</div>
           

然後在不對data的聲明做修改的情況下，給b一個值：

var data = { a : 1 };
var vm = new Vue({
    el: '#app',
    data: data
})
vm.b = "test"//或data.b = "test"
           

我們會發現頁面中并沒有渲染對應的内容。但是如果我們将“ data.a = “Hi World” ”加上，就會發現内容都能正常的渲染了。

還有一種方法可以讓響應系統不能再追蹤變化：

var data = {a : 1};

Object.freeze(data)

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

這時，我們就無法通過data.a或vm.a的方式去改變變量的值了。

Vue執行個體中還暴露了一些有用的執行個體 property 與方法。它們都有字首 $，以便與使用者定義的 property 區分開來。諸如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data.a = "Hi"//效果與data.a = "Hi"相同
vm.$el//效果與document.getElementById('example')相同 ，=> true
           

下面我們要介紹一下$watch()方法，這個方法能夠觀察一個變量的變化，并擷取變量變化前後的結果。

<script type="text/javascript">
        var data = { a : 1 };
        var vm = new Vue({
            el: '#app',
            data: data
        })
        vm.$watch('a', function(newValue, oldValue) {
            console.log(newValue, oldValue);
        })
        vm.$data.a = "Hi World"
    </script>
           

這裡我們打開控制台就能看見