Vue组件化–额外知识补充

认识生命周期

生命周期的流程

  1.创建组件实例之前回调beforeCreate函数
  2.创建组件实例
  3.创建组件实例之后回调create函数(1.发送网络请求 2.事件监听 3.this.$watch()组件监听)
  4.对template模板进行编译
  5.在挂载到虚拟DOM之前回调beforeMount函数
  6.挂载虚拟DOM
  7.根据虚拟DOM生成真实DOM
  8.生成真实DOM之后回调mounted函数(1.获取DOM使用DOM)
  9.如果数据更新
  10.回调beforeUpdate函数
  11.根据最新的数据生成新的VNode更新虚拟DOM使用diff算法生成最新的真实DOM
  12回调update函数
  13.如果组件被销毁
  14.回调beforeUnmount函数
  15.将之前挂载在虚拟DOM中的VNode进行移除
  16.回调unmounted函数(1.回收操作:取消事件监听)
  17.将组件实例销毁掉

$refs的使用

$parent和$root

动态组件

切换组件案例

       <template>
        <div class="app">
          <div class="tabs">
            <template v-for="tab,index in tabs" key="index">
              <button :class="{active:index == activeIndex}" 
                      @click="activeAdd(index)">
                      {{ tab }}
                    </button>
            </template>
          </div>
          <div class="view">
            <!-- 使用v-if来判断 -->
            <!-- <template v-if="activeIndex === 0">
              <Home></Home>
            </template>
            <template v-if="activeIndex === 1">
              <About></About>
            </template>
            <template v-if="activeIndex === 2">
              <Category></Category>
            </template> -->
            <!-- 动态组件 -->
             <!-- is中的组件来自全局注册过的组件或者局部注册的组件 -->
             <component :is="tabs[activeIndex]"></component>
          </div>
        </div>
      </template>
      <script>
      import Home from './views/Home.vue';
      import About from './views/About.vue';
      import Category from './views/Category.vue';
      export default{
        data(){
          return{
            tabs:["home","about","category"],
            activeIndex:0,
          }
        },
        methods:{
          activeAdd(index){
            this.activeIndex = index
          }
        },
        components:{
          Home,
          About,
          Category
        }
      }
      </script>
      <style scoped>
      .active{
        color: red;
      }
      </style>

动态组件的实现

动态组件的传值

认识keep-alive

keep-alive属性

缓存组件的生命周期

Webpack的代码分包

Vue中实现异步组件

异步组件的写法二（了解）

组件的v-model

绑定多个属性

认识Mixin混入

  ◼ 目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同
  的代码逻辑进行抽取。
  ◼ 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：
      Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
      一个Mixin对象可以包含任何组件选项；
      当组件使用Mixin对象时，所有Mixin对象的选项将被 混合进入该组件本身的选项中；

Mixin的合并规则

全局混入Mixin