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

Posted 2021-01-05 caoxueying2018

<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
  // 　},        
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//和2在官方文档上都有例子，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//地址是：https://blog.csdn.net/baidu_31333625/article/details/70238611
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//但是在组件中，因为可能在多处调用同一组件，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//所以为了不让多处的组件共享同一data对象，只能返回函数。                 
  // 3.data: function() {                         //1是3的区别：1是3的语法糖，和1一模一样
    　　　　return {
    　　　　  count: 0
  　　　　  }
　　　　 },
  methods: {
    inc () {this.count++}
  }
})
app.$mount(‘#app‘)
</script>