Vue（v2.5.12）之選項/數據 - data

官方鏈接地址：https://cn.vuejs.org/v2/api/#data

一、data的類型

• data爲Object對象類型

<div id="app">
    <span>姓名: {{ username }} </span><br>
    <span>年齡: {{ age }} </span><br>
    <span>是否成年: {{ isAdult }} </span><br>
    <span>課程: {{ classes }} </span><br>
    <span>興趣: {{ avocation }} </span>
</div>

let vm = new Vue({
    el: '#app',
    data: {
        username: '小明',  // str
        age: 17,  // int
        isAdult: false,  // boolean
        classes: ['語文', '數學', '英語'],  // array
        avocation: null  // object
    }
})

頁面渲染如下：

• data爲Function函數類型

let vm = new Vue({
    el: '#app',
    data: function () {
        return {
            username: '小明',  // str
            age: 17,  // int
            isAdult: false,  // boolean
            classes: ['語文', '數學', '英語'],  // array
            avocation: null  // object
        }
    }
})

以上寫法與data爲Object類型頁面渲染相同。
值得強調的是當組件被定義時，data必須聲明爲返回一個初始數據對象的函數，因爲組件很有可能被用來創建多個實例。如果data 仍然是一個純粹的對象 (含有零個或多個的 key/value 對)，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例後，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

<div id="app">
    <global-message></global-message>
</div>

Vue.component('global-message', {
    template: "<p>我是{{ national  }}人.</p>",
    data: function () {
        return {
            national: '中國',
        }
    }
});
new Vue({
    el: '#app',
})

頁面渲染如下：

如果這麼寫

Vue.component('global-message', {
    template: "<p>我是{{ national  }}人.</p>",
    data: {
        national: '中國'
    }
});
new Vue({
    el: '#app',
});

將會有如下錯誤，即定義爲組件時data必須聲明爲Function函數類型：

二、獲取/編輯data的值

let data = {
    username: '小明',  // str
    age: 17,  // int
    isAdult: false,  // boolean
    classes: ['語文', '數學', '英語'],  // array
    avocation: null  // object
};
let vm = new Vue({
    el: '#app',
    data: data
})

• 獲取data數據：vm.$data 或 vm._data
• 獲取data中對象屬性值：vm.$data.username 或 vm.$_data.username 或 vm.username
• 編輯data中對象屬性值：data.classes = ['英語'] 或 vm.classes = ['英語']
  注意：data的編輯是響應式的，即數據改變時，視圖也會改變（雙向綁定）。如果想阻止修改現有的屬性，可以使用Object.freeze()。如果嘗試想編輯data中的值，就會出現以下錯誤：
  

三、注意點

• 注意點1：以_或 $開頭的屬性 不會 被 Vue 實例代理

let vm = new Vue({
    el: '#app',
    data: {
        _username: '小明'
    }
})

將會有如下錯誤：

我們先到Vue Devtools來看一下Root，發現是有_username屬性

我們再從Console看一下，發現是可以取到data屬性的值的

總結：官方不建議data中屬性使用_/$命名對象名，是爲了防止與Vue 內置的屬性、API 方法衝突，且在視圖不能正常展示對應屬性的數據，但可以通過vue實例訪問data屬性

• 注意點2：給data添加新屬性，並不能響應式展示

let vm = new Vue({
   el: '#app',
   data: {
       username: '小明'
   }
})

如想增加password，我們一般使用vm.password = '123654'，可以看到添加新屬性後在Root中並沒有增加新屬性

不過，我們可以通過m.$set( target, key, value )方法實現響應式的更新data數據。

• 注意點3：在組件中的data必須聲明爲Function函數類型，具體本博文第一節