组件化的描述和创建

一、组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

模块化：从代码角度分析问题，把项目中功能类似的代码抽离出，成为一个单独的模块，伪了保证以相同的方式封装模块于是有了模块化规范（commonjs）

组件化：从ui的角度考虑，把页面上有重用性的ui结构给解构出来，单独的抽离出来，提高开发的效率。

现在，我们来创建一个组件：

创建一个Vue实例,得到 ViewModel

创建组件的三种方法：

第一种：

创建全局组件。定义的组件也是vue的一个实例 const FeatureConstructor = Vue.extend创建一个组件，Vue.component('mycomponent', FeatureConstructor);引用一个组件，前面的'mycomponent'是组件名，直接在实例div上

<div id="app">
        <mycomponent></mycomponent>
    </div>

第二种：

也是创建全局组件。const Feature = Vue.component直接使用component定义Vue.component('mycom',myfeature);与第一种不一样，前面那个是用extend关键字创建

const Feature = Vue.component('mycomponent', {
            template: ``,
        });

第三种：
 

    Vue.component('FeatureCompnent', {
            template: '#tmpl'
        });

这个是以id名命名的一个组件，在div中写入id名即可导入

以上是定义的全局组件，下面我们来看看私有组件该怎么定义：
和data和methods一样，与其并列的方法下定义：
 

const vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getlist() {},
                add() {
                    console.log("方法被点击了")
                }
            },
            filters: {},
            directives: {},
            created() { //表示data数据和methods方法都已经可用
                this.getlist()
            },
            mounted() { //表示内存中的渲染好的dom树，已经挂载好了在真实的页面中

            },
            components: {}

这个主件也可以在里面定义方法，同时，这个组件也属于这个vue实例的：
 

components: { //定义的私有组件的 组件名称 和组件的解构
                'mycom1': {
                    template: `<div><input value="+1" type='button' @click = 'add()'><h3 @click = 'add()'>这是定义的组件{{msg}}</h3></div>`,
                    data() { //在组件中，有自己的私有数据，而且，定义的数据要为一个函数，并且一定要返回一个对象
                        return {
                            msg: 0,
                        };
                    },
                    methods: { //定义组件的私有方法
                        add() {
                            console.log('这个是一个组件')
                            this.msg++;
                        }
                    }
                }
            }

以上，就是vue组件的创建和对模型化和组件化的区别描述，希望可以对你有所帮助