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教程: