关于Vue的一些疑惑解答

1.组件的全局注册格式

在学习父子组件间通信的时候，我发现碰到了如下两种写法：

 // 写法一： 组件的全局注册的语法糖写法
 const cpn2 = Vue.component('cpn2', {
        template: '#cpn2'
    })

 // 写法二：那这个呢？
const cpn3 = {
        template: '#cpn3'
    }

回答：

 // 疑问1： 写法二也是组件的全局注册吗？
    // 回答：不是，写法二只是在创建一个对象，组件的全局注册只有使用.component()方法，组件的局部注册得写在Vue实例化或者其他组件的components属性里
    // 写法一：全局注册的语法糖
    const cpn2 = Vue.component('cpn2', {
        template: '#cpn2'
    })

    // 写法二： 此处是对象字面量，它是指以{}形式直接表示的对象
    // 如果它未在Vue实例化中的components属性中添加，那么无法使用
    const cpn3 = {
        template: '#cpn3'
    }

2.Vue实例中的data类型和组件中的data类型

学习父子组件间通信的时候，我发现碰到了关于data的如下两种写法：

// 写法一：什么时候使用到它？
data() {
  return {
      categories: [
          {id: 'a', name: '热门推荐'},
          {id: 'b', name: '手机数码'},
          {id: 'c', name: '家用家电'},
          {id: 'd', name: '电脑办公'}
      ]
  }
}

// 写法二：什么时候使用到这种格式？
 data: {
   name: 'Hello Ketty'
}

// 写法三： 什么时候使用到这种格式？
data: {
    return() {
 	}
 },

回答：

// 疑问2： 下面有2个data，但是第一个data后面有（）；第二个data后面没有（）
 // 它们的区别是什么
 // 回答：data后面有（）表示函数(即Function)，data后面没有（）表示对象(即Object)。Vue实例化的时候data可以使用函数和对象，但是组件里的data只能使用函数。
 // 写法一：
  data() {
            // 组件(component)里的定义的data必须是Function类型的
            return {
                categories: [
                    {id: 'a', name: '热门推荐'},
                    {id: 'b', name: '手机数码'},
                    {id: 'c', name: '家用家电'},
                    {id: 'd', name: '电脑办公'}
                ]
            }
        }
        
// 写法二：
data: {
    // 实例化的Vue中的data可以是Object或者Function
}

// 写法三：
data: {
    return() {
 	}
 }

更多详情： vue中data和data()的区别说明

3.ES6的字面量方法语法糖

 // ES6的对象字面量方法简写允许我们省略对象方法的function关键字及之后的冒号
  // data: function() {
data() {
 return {
  }
}

更多详情： 重新认识ES6中的语法糖