Vue组件化应用构建（为什么组件中 data 要是函数？---面试题！））

Vue组件化应用构建

1、概念：

组件，即构建应用程序所使用到的部件。组件系统，允许我们使用小型、独立和通常可复用的组件构建大型应用。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

2、定义组件选项：

const options = {
   
  template: '模板-视图的结构(布局)',
  data() {
   
    return {
   }
  },
  methods: {
   }, // 方法
  computed: {
   }, // 计算属性
  components: {
   }, //组件
}

注意：

• template 中定义的结构，必须使用单个根元素包裹
• data 必须是函数结构，在函数体内部返回一个普通对象
  为什么 data 要是函数？（重点）
  1、组件是可被复用的，当创建同一个组件的不同实例时，如果 data 是普通对象，则不同的实例引用到的是同一个 data 对象，当任意一个实例中对 data 数据进行更新时，其它实例都会受影响，通常这与实际业务不符。
  2、定义成函数，则创建各组件实例时，会调用 data 函数生成组件实例自身私有用到的对象数据，各组件实例间数据是独立的，互不受影响。

3、注册组件：

注意：组件的命名不能与html有重！

• 全局注册：

Vue.component(name, options)

注意：全局注册的组件可在任意组件中使用到

• 局部注册：

const options