vue.js - Vue 实例中的 data 属性究竟应该如何表示？

问题描述

问 题

很简单的一段代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <span>{{count}}</span>
    <button @click="inc">+</button>
</div>
<script>
var app = new Vue({
  // 1.
  // data () {
  //   return {count: 0}
  // },

  // 2.
  // data: {
  //   count: 0
  // },

  // 3.
  data: function() {
    return {
      count: 0
    }
  },

  methods: {
    inc () {this.count++}
  }
})
app.$mount('#app')
</script>

能运行。看我注释部分，官网 guide 示例应该用的是 2，但是 1 和 3 为何也能执行？它们和 2 表示的应该不是一个东西吧？求指导

解决方案

首先，1是3的语法糖，是新的ES6语法，和3一摸一样。

然后1和2在官方文档上都有例子，区别也解释得很清楚。简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。

官方文档比我说的更详细：https://vuejs.org/v2/guide/co...

这篇关于vue.js - Vue 实例中的 data 属性究竟应该如何表示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！