Vue之组件化理解

简介

vue是一套用于构建用户界面的渐进式框架。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

• 渐进式框架: 渐进可理解为一步一步的意思，大概意思就是使用Vue的时候，并不需要把整个框架的所有东西都用上，可以根据实际情况选择你需要的部分。
  声明式渲染和组件系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。
  
• VUE只关注视图层- MVVM
  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 Model 的双向数据绑定，这使得Model 的状态改变可以自动传递给 View，即所谓的数据双向定。
  Model(数据模型): 数据层(后端传递的数据)。它仅仅关注数据本身,不关心任何行为。
  View(视图): 用户操作界面, 用户在屏幕上看到的结构、布局和外观（UI）。当ViewModel对数据进行更新时,会通过数据绑定更新到View。
  ViewModel: 视图模型, 业务逻辑层。它是连接view和model的中间桥梁,它有两个方向:
  一是把Model(模型)转化为View(视图),把数据转化成所看见的页面,实现方式是: 数据绑定.
  二是把View(视图)转化为Model(模型),即把所看到的页面转化成数据,实现方式是: DOM事件监听
  这两个方向的实现,我们称之为数据的双向绑定
  
  总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实 现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

组件化定义

组件化就是将实现页面某一部分功能的结构、样式和逻辑,封装成为一个整体，使其高内聚，低耦合，达到可复用的目的.
组件系统是vue的最强大的功能之一,它让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树. vue组件注册

组件化与模块化区别

模块化:是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一. 如: 实现某个功能的js代码, 这段功能代码在项目的其它地方也需要用到,就将之封装成具有特定功能的模块,实现可复用和分治;某些css样式,在其它地方也可能用到,我们也可以将之css模块化,实现可复用.具体说来，JS模块化方案很多有ES6 Module/CommonJS/AMD等，CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的.

组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的复用. 组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面,每个组件有独立的HTML、css、js代码.

组件生命周期

生命周期: vue从创建到销毁的过程,就是生命周期.也就是创建实例 ,初始化数据,编译模板, render渲染,挂载DOM,更新,实例销毁等一系列的过程,共分为创建前/后,挂载前/后,更新前/后,销毁前/后八个阶段
生命周期作用: vue所有功能的实现都是围绕生命周期进行,在生命周期的不同阶段调用对应的钩子函数,实现组件数据管理和DOM渲染.

生命周期八个阶段:

• beforeCreate(创建前)
  数据观测事件机制还未形成,实例的挂载元素$el和数据对象data都是undefined, 还未初始化;
  可以在这加loading事件.
• created(创建后)
  完成数据观测, vue实例的data数据完成初始化,el还未初始化
  若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中
• beforeMount(挂载前)
  vue实例的$el和data都初始化了,相关的render函数首次被调用;
  实例已完成以下配置: 编译模板,把data里面的数据和模板生成html;
• mounted(挂载后)
  el被新创建的vm.$el替换,并挂载到实例上去之后调用;
  在此阶段可进行ajax交互.
• beforeUpdate(更新前)
  在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程
• updated(更新后)
  在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
• beforeDestroy(销毁前)
  在实例销毁之前调用。实例仍然完全可用。
• destroyed(销毁后)
  在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
  注意: 一般Vue实例初始化(页面第一次加载)时，只会执行前四个钩子函数

父子组件生命周期

• 创建: 当子组件挂载完成后，父组件才会挂载
  父组件beforeCreat -> 父组件created -> 父组件beforeMount-> 子组件beforeCreat -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted。

• 销毁：先销毁子组件,在销毁父组件
  父组件beforeDestory -> 子组件beforeDestory -> 子组件destoryed -> 父组件destoryed
  父子组件的生命周期遵循：由外到内，再由内到外

组件通讯

组件的隔离必然会带来数据流动的壁垒，所以组件化就要解决组件之间的通信处理。组件通信主要分为父子组件通信和非父子组件通信

• 父子组件通讯
  
  父传子: 父组件使用props向子组件传递数据,
  子传父: 父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

• 非父子组件通讯
  实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。

  Bus.js

  import Vue from 'vue'
  export default new Vue()
  

  在需要通信的组件都引入Bus.js:

  <template>
    <button @click="toBus">传值给兄弟组件</button>
  </template>
  
  <script>
   import Bus from '../common/js/bus.js'
   export default{
     methods: {
       toBus () {
         // 广播自定义事件
         Bus.$emit('on', '来自兄弟组件')
       }
     }
  }
  </script>
  

  另一个组件也import Bus.js, 在钩子函数中监听on事件

  <script>
  import Bus from '../common/js/bus.js'
  export default {
     data() {
       return {
         message: ''
       }
     },
     method: {
       getData(msg) {
          this.message = msg
       }
     },
     mounted() {
        // 绑定自定义事件
        Bus.$on('on', this.getData())
      },
      beforeDestroy() {
         // 及时销毁,否则可能造成内存泄露
         Bus.$off('on', this.getData()) 
      }
    }
  </script>
  

• 通用通讯方法-vuex
  如果是多层嵌套的组件或者兄弟组件,传递参数将会非常繁琐, 所以把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！代码将会变得更结构化且易维护