Vue,為什麼數據必須是函數

使用Vue,您肯定會問自己一個問題:“為什麼數據必須是返回對象的函數,而不僅僅是返回對象?”

使用Vue時,您肯定會問自己一個問題:“為什麼必須data是一個返回對象而不僅僅是對象的函數?”

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>

<script> export default { data: function() { return { counter: 0 } } } </script>

特別是在某些地方,data不是一個功能,如您在幾個示例中的App組件中最有可能看到的那樣。

解釋是,當多次使用該組件時,如果它不是一個函數,而是一個常規對象,則如下所示:

data: {
  counter: 0
}

然後由於JavaScript的工作原理,組件的每個實例都將共享此屬性

在99.9%的情況下,這不是您想要的,而是必須執行以下操作:

data: function() {
  return {
    counter: 0
  }
}

乍一看可能不是很直觀,但是一旦您接受了這種解釋並了解到它對您的應用程序有害,並且可能是錯誤的來源,您將記住始終使用函數來處理數據。

免費下載我的Vue手冊


更多vue教程: