vue Mutation 必須是同步函數 為什麼_為什麼 vue 元件中的 data 是函數而不是對象

在

vue

元件中

data

的屬性值是函數,如下所示

export default {
  data() {
    // data是一個函數,data: function() {}的簡寫
    return {
      // 頁面要初始化的資料
      name: 'itclanCoder',
    };
  },
};
           

而非:如下所示

export default {
  data: {
    // data是一個對象
    name: 'itclanCoder',
  },
};
           

當一個元件被定義,

data

必須聲明為傳回一個初始資料對象的函數,因為元件可能被用來建立多個執行個體

也就是說,在很多頁面中,定義的元件可以複用在多個頁面

如果

data

是一個純碎的對象,則所有的執行個體将共享引用同一份

data

資料對象,無論在哪個元件執行個體中修改

data

,都會影響到所有的元件執行個體

如果

data

是函數,每次建立一個新執行個體後,調用

data

函數,進而傳回初始資料的一個全新副本資料對象

這樣每複用一次元件,會傳回一份新的

data

資料,類似于給每個元件執行個體建立一個私有的資料空間,讓各個元件的執行個體各自獨立,互不影響,保持低耦合

可以看下面一段代碼

// 聲明構造器函數
function Person() {}

Person.prototype.data = {
  // 原型下挂載一對象,并有name屬性
  name: 'itclanCoder',
};

var p1 = new Person();
var p2 = new Person();
p1.data.name = '川川';
console.log(p1.data.name); // 川川
console.log(p2.data.name); // 川川
           

挂載在原型下屬性如果是一個對象,執行個體化出來的對象

(p1,p2)

都指向的是同一份實體

原型下的屬性相當于是公有的

修改一個執行個體對象下的屬性,也會造成另一個執行個體屬性跟着改變,這樣在元件複用的時候,肯定是不行的,那麼改成函數就可以了的,如下代碼所示

function Person() {
  this.data = this.data();
}

Person.prototype.data = function() {
  return {
    name: 'itclanCoder',
  };
};

var p1 = new Person();
var p2 = new Person();

p1.data.name = '随筆川迹'; // 如果是函數的形式去定義屬性,它是有自定的作用域的,在修改的時候不會影響到别人
console.log(p1.data.name); // 随筆川迹
console.log(p2.data.name); // itclanCoder