Vue2 组件

组件

实现局部功能代码和资源的集合（将html，css，js，视频、文字样式等资源统一起来）

复用率高，好维护

单文件组件 .vue 一个文件只有一个组件

创建组件 :

const school = Vue.extend({
    data() {
        return {
          studentName: "小王",
          age: 18
        }
      }
})
//可以简写为
const school = {
    data() {
        return {
          studentName: "小王",
          age: 18
        }
      }
}

Vue.extend({})返回一个构造函数vueComponent

组件名

可以在组件中配置name:‘school’,在vue开发者工具中就会显示该组件名

data为什么要写成函数形式

data(){
    return{
        a:1,
        b:3
    }
}

这样当不同的地方使用该组件时，都会返回一个全新的对象，别的地方修改对象数据，互不影响

VueComponent

每一个组件就是一个构造函数vueComponent,是Vue.extend生成的

当在模板中写时，vue会帮我们创建一个vc的实例对象，即new VueComponent({options}) options是Vue.extend({})中配置的属性

不同的组件是不同的构造函数vueComponent，虽然都差不多，但是return出来的，是不同的vueComponent

vc和vm区别

vc和vm99%相似，都有数据代理，数据监测，methods，computed…

区别：vm有el来确定放置DOM元素的位置，vc没有el

vc中的data必须写成函数式，vm的data可以直接写成对象（不在脚手架中）

为了让vc也可以访问到vue原型上的属性和方法

构造函数有一个显式原型属性prototype来找到构造函数原型对象

构造函数的实例对象有一个隐式原型属性–proto–也是指向构造函数的原型对象

构造函数的原型对象有一个–proto–属性来指向object的原型对象