关于VueComponent+Vue组件封装和复用的重要性_vue中的component在views中运用

关于VueComponent:

每一个组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册的

组件的使用分成三个步骤
创建组件构造器
调用Vue.extend()方法创建组件的构造器
注册组件
调用Vue.component()方法注册组件
使用组件
在Vue实例的作用范围内使用组件

    <!--3.使用组件-->
  <div id="app">
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
  </div>
  <script src="vue.js"></script>
  <script>
      //1.创建组件的构造器对象
      const cpnC=Vue.extend({
          //传的参数是个对象
          template:`
          <div>
            <h2>标题</h2>
            <p>内容</p>
          </div>`
      })
      //2.注册组件
      Vue.component('my-cpn',cpnC)
      const app=new Vue({
          el:'#app',
          data:{
              message:'hello'
          }
      })
  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

我们需要知道引用组件<my-cpn></my-cpn>时，已经创建和注册好组件

//构造函数  
//正因为构造函数我们在控制台看见的是一个[VueComponent]的函数对象
   function Person(name, height) {
          this.name = name;
          this.height = height;
     }
  
      var boy = new Person('Keit', 120);
      console.log([boy]);
       var a=[boy]
      console.log(a[0]);
      console.log(a[0].name);
      console.log(boy.name); //'Keit'
      console.log(boy.height); //120
  
     var girl = new Person('Samsara', 160);
    console.log(girl.name); //'Samsara'
     console.log(girl.height); //160
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

关于this指向：
（1）组件配置中：

data函数，methods中的函数，watch中的函数，computed中的函数 它们的this均是{VueComponent实例对象}

（2）new Vue(options)配置中：

data函数，methods中的函数，watch中的函数，computed中的函数，它们的this均是{Vue实例对象}。

VueComponent的实例对象，简称vc（也可称为：组件实例对象）
Vue的实例对象，简称vm

总结：说白了都是创建对象。
组件是对象，组件创建和注册的对象叫vc，他是vue实例在内部new VueComponent()，所以在控制台才会看到VueComponent构造函数。
vue是对象，vue的对象叫vm。是通过new Vue()出来的。

然后说说 vm和vc的区别，区别就是el。vm是vc的管理层，每个在vm中注册的vc都会被vm所管理。

Vue组件封装和复用的重要性：
组件(Component)是Vue.js最强大的功能之一
组件是可复用的Vue 实例，封装了可重用的代码。
组件是独立和可复用的代码组织单元，组件系统是vue核心特性之一。组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，让开发者使用小型、独立和通常可复用的组件构建大型应用，解决了我们传统项目开发：效率低、难维护、复用性低等问题。能让web前端代码实现“高内聚”和“低耦合”，使得前端开发的过程变成搭积木的过程。

在vue中，组件是可复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，就是以组件名称的方式作为自定义的HTML标签。组件大大提高了代码的复用率。

组件封装的大概过程：
使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。但是我们一般用脚手架开发项目，每个 .vue单文件就是一个组件。在另一组件import 导入，并在components中注册，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法。

结合项目开发的实际经验去剖析：在用vue开发项目的时候，一般我都会用到组件封装，采用组件化的思想进行项目开发，我在搭建一个项目的时候，会创建一个views目录和一个component目录和一个feature目录，views目录中放页面级的组件，component中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）。

组件封装方便后期程序的维护，每个组件都是单个的功能，互不影响。

比如像中后台系统一般elementUI和项目业务需求做二次封装，像项目中的弹窗的表单一般都是固定的样式，只是内容或者标题不同，我们就可以动态传值去解决，实现组件的封装复用。
或者页面业务代码太多的时候，有的公司可能会要求单页面的代码最好不能超过1200行，这时候我们就可以单功能解耦，可以分成公共性组件和功能性组件。

我有封装一个转盘的组件，它主要就是一个独立的功能性组件，用到可以直接取。还有就是做项目时的有封装的公共的组件，比如说头部和尾部

vue中的$符号实在所有实例中都可用的一个简单约定，这样做会避免和被用户定义的数据和方法产生冲突。

附：
上次面试有人问我jq封装的组件和vue封装的组件的区别，我当时挺蒙蔽的，jq封装干嘛组件呢，没啥用，现在想想，你看Bootstrap框架有封装组件纯静态的组件，其实硬说jq封装的组件和vue组件的区别就是首先jq组件肯定不能像vue组件那样传值啊，复用性多态性肯定比不了的，还有就是vue封装的组件，我用components注册后，是可以自定义扩展成HTML元素使用的。