在 Vue中，定義data時，經(jīng)常有好幾種寫法，一不小心會混淆，這里徹底詳述一下，以便記分清 。

一、在vue中，定義data可以有三種寫法

1. 第一種寫法，data是一個對象。

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

2. 第二種寫法，data是一個函數(shù)。

var app = new Vue({
　　el: '#app',
　　data: function() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

3. 第三種寫法，data是一個函數(shù)，是第二種寫法的ES6寫法。

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　mess: 'aerchi'
　　　　}
　　}
})

二、在Vue實例及組件中定義 data的形式。

1.  在Vue 實例中可以這樣定義 data， 兩種定義方法均生效。

//Vue中定義的data可以是 object 也可以是函數(shù)，效果相同。驗證 2020-3-7
new Vue({
 // data () {
    //   return {
    //     message: 'message-data() function!',
    //   }
    // },
    data: {
        message: 'message-data{} object !',
    },
    ...
})

2.  在Vue 組件中data必須定義成函數(shù)形式， function定義方法和ES6定義均生效。

Vue.component('todo-item', {
    data:function(){
        return {mess: "aerchi--function"};
    },
    // data(){
    //     return {mess: "aerchi--data()"};
    // },
    template: '<li>{{mess}}</li>'
})

三、data三種寫法的區(qū)別

1. 在簡單的vue實例應(yīng)用中，三種寫法幾乎是沒有什么區(qū)別的，因為上述定義的 #app對象  不會被復(fù)用。

var app = new Vue({...})

2. 在組件應(yīng)用的環(huán)境中，會存在多個地方調(diào)用同一個組件的情況，為了不讓多個地方的組件共享同一個data對象，通過提供 data 函數(shù)，每次創(chuàng)建一個新實例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。

請注意： 在一個組件的定義里，data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)。

這個與JavaScript的作用域特性有關(guān)，函數(shù)自己擁有私有的作用域，函數(shù)之間的作用域相互獨立，也就不會出現(xiàn)組件對數(shù)據(jù)的綁定出現(xiàn)交錯的情況。

export default{
    data(){
        return {
            ...
        }
    }

四、Vue官方中關(guān)于data的說明

(https://cn.vuejs.org/v2/api/?#data)

data

類型：Object | Function

限制：組件的定義只接受 function。

詳細：

Vue 實例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。

對象必須是純粹的對象 (含有零個或多個的 key/value 對)：

• 瀏覽器 API 創(chuàng)建的原生對象，原型上的屬性會被忽略。
• 大概來說，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象。

一旦觀察過，你就無法在根數(shù)據(jù)對象上添加響應(yīng)式屬性。因此推薦在創(chuàng)建實例之前，就聲明所有的根級響應(yīng)式屬性。

實例創(chuàng)建之后，可以通過 vm.$data 訪問原始數(shù)據(jù)對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價于訪問 vm.$data.a。

以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理，因為它們可能和 Vue 內(nèi)置的屬性、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。

當(dāng)一個組件被定義，data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因為組件可能被用來創(chuàng)建多個實例。

如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個新實例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。

如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數(shù)據(jù)對象。

示例：

var data = { a: 1 }
 
// 直接創(chuàng)建一個實例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true
 
// Vue.extend() 中 data 必須是函數(shù)
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

注意，如果你為 data 屬性使用了箭頭函數(shù)，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數(shù)的第一個參數(shù)來訪問。

data: vm => ({ a: vm.myProp })

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論