Vue2实例中的data属性三种写法与作用

Posted 2021-01-06 yangai

<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>

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

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