vue组件化

组件的定义 —— 实现应用中局部功能代码和资源的合集

注意：拆分页面叫组件化，拆分js叫js的模块化

• 非单文件组件： 一个文件中包含N个组件

• 单文件组件： 一个文件中只包含1个组件

使用组件的步骤：

1. 创建组件 const school = Vue.extend({.....
2. 注册组件

//1.局部注册组件
new Vue({
    components:{
        school:school//属性名也叫别的名字
    }
})

//2.全局注册组件：
Vue.component()

3. 使用（下面是非单文件组件的使用方法，实际开发中都是单文件的形式）

注意：为什么组件中 data 要用函数的形式返回值，而不直接用对象的形式？

1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。

2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。

3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

4.当我们组件的date单纯的写成对象形式，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。