vue组件化

vue组件化 1. 了解组件 1-1 组件化

组件 —— 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强，，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件

传统 web 应用开发方式都是采用插件化形式开发，一个页面引入多个依赖文件（css 文件、js 文件），依赖关系紊乱不好维护并且代码复用性不高vue 则实现了组件化开发，将页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护，并且组件是独立的在系统内部可复用，组件和组件之间可以嵌套，可以极大简化代码量，并且对后期的需求变更和维护也更加友好 1-2 模块化

模块 —— 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架

1-3 组件化与模块化优点 开发和调试效率高 —— 随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改可维护性强 —— 便于后期代码查找和维护避免阻断 —— 模块化是可以独立运行的，如果一个模块产生了 bug，不会影响其他模块的调用版本管理更容易 —— 如果由多人协作开发，可以避免代码覆盖和冲突 1-4 .extend构造器

.extend 是 Vue 中的构造器，用于创建一个子组件，参数是一个包含组件选项的对象

组件是可复用的 Vue 实例的，它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

Vue.component 注册组件时可以传入一个选项对象，并自动调用 Vue.extend。当使用 component 注册组件时，会默认去找传入的对象并执行 extend 方法，所以可以简化 extend 构造器写法，直接省略以对象形式书写

<div id="app">
  <head-title>head-title>
div>

// Vue.extend组件构造器 —— 用于创建子组件，可传入与实例相同的options选项，除了el外
// 创建组件Vue.extend是一个VueComponent组件构造函数， title则为组件实例
// let headTitle = Vue.extend({
//   // template 组件模版
//   template: '{{title}}',
//   data() {
//     return {
//       title: 'Hello extend'
//     }
//   }
// })

// 可以省略Vue.extend 当注册组件时传入对象component会自动调用 Vue.extend
let headTitle = {
  // template 组件模版
  template: '{{title}}',
  data() {
    return {
      title: 'Hello extend'
    }
  }
}

const vm = new Vue({
  el: '#app',
  data: function() {
    return {

    }
  },
  // components 局部注册组件
  components: {
    headTitle
  }
})

1-5 组件data必须是函数

Vue 源码中判断了 data 是否是个函数，如果是函数，就会使用 getData() 方法执行以下，并将执行后的结果作为最后的值，否则呢，就会直接使用用户自己设置的 data，如果 data是一个对象，那么就会走源码中的 else 代码，直接将用户传入的 data 进行使用，如果有多个组件，就会造成 data 数据共享，这样会形成数据污染

为了使每一个组件的状态相互不干扰，不形成数据污染，data 必须是一个函数

创建根实例的时候使用 new 的方式只能创建一个，是一个单例，不会像 vue 组件实例可以创建很多个，就不会发生 vue 组件实例中的数据污染，相互干扰

首先判断下是否是 vue 组件，那么执行 mergeDataOrFn 方法的时候就不会传第三个参数 vm 实例，所以就会进行 function 的校验，但是如果使根实例的时候，在执行 mergeDataOrFn 方法的时候传第三个参数，也就是 vm 实例，所以就会躲避了 function 的校验

Vue 中根实例的 data 是没有限制的，可以是函数也可以是对象

1-6 template选项

template 选项 —— 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽

如果 Vue 实例中有 template 属性，会将该属性值进行编译，将编译后的虚拟 DOM 直接替换掉 Vue 实例绑定的元素

template 选项中的 DOM 结构只能有一个根元素，如果有多个根元素需要使用 v-if、v-else、v-else-if 设置成只显示其中一个根元素

在该属性对应的属性值中可以使用 Vue 实例 data、methods 中定义的数据

el 选项 —— 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板

el 选项只在用 new 创建实例时生效

<div id="app">
  <h3>Hello Worldh3>
  <head-title>head-title>
div>

let headTitle = Vue.extend({
  // template 组件模版
  // template选项只能有一个根元素  多个根元素会报错
  // 可以在template中使用data methods computed等定义的数据
  template: '{{title}}
Hello jsx
',
  data() {
    return {
      title: 'Hello extend'
    }
  }
})
const vm = new Vue({
  // el提供实例挂在的元素目标 可以是选择器或者元素对象
  el: '#app',
  // Vue实例中有template属性会替换掉Vue实例绑定的元素 挂载元素的内容都将被忽略
  // template: '{{title}}',
  data: function() {
    return {
      title: 'hello vue'
    }
  },
  components: {
    headTitle
  }
})

1-7 模版定义X-Template

模版定义 X-Template —— 定义模板的方式是在一个