动态组件和异步组件 自定义指令

动态组件

在动态组件上使用keep-alive
组件之间切换的时候，keep-alive可以保持这些组件的状态，以避免反复重渲染导致的性能问题。

 <keep-alive>
          <leftKa v-if="status"></leftKa>
          <rightKa v-else></rightKa>
        </keep-alive>

异步组件

局部注册组件，异步挂载

import Home from "./child/home.vue";
import Succ from "./child/succ";
import err from "./child/err";

 components: {
    // Home(resolve, reject) {
    //   setTimeout(resolve, 2000, Home);
    // },
    // Home(resolve, reject) {
    //   require(["./child/home"], resolve);
    // },
    // Home: () => import("./child/home"),
    // 处理异步加载时状态
    Home: () => ({
      component: new Promise((resolve, reject) => {
        setTimeout(resolve, 1000, Home);
      }),
      // 异步加载时的组件
      loading: Succ,
      // 加载失败时候执行的组件
      error: err,
      // 延迟加载的组件
      delay: 200,
      // 超时
      timeout: 2000,
    }),
  },

自定义组件

自定义指令
注册方式 全局注册和局部注册
主要使用 vue的钩子函数

 <input type="text" v-focus="msg" />
    <button @click="change">切换</button>
    <button v-myshow="isshow">按钮</button>

directives:{}

  directives: {
    focus: {
      bind: (el, banding, vnode) => {
        // 自定义指令首次绑定元素 进行执行
        // 参数1 el 指当前绑定指令的元素
        // 参数2 bind  对象  含有指令的相关属性
        // 参数3 vnode 为vue创建虚拟节点
        // 参数4 oldVnode 上一个虚拟节点
        // el banding Vnode oldVnode
        console.log("1111");
      },
      inserted: (el, band, vnode) => {
        el.focus();
        console.log("当前元素插入父节点执行", vnode);
      },
      //   update: () => {
      //     console.log("虚拟dom更新执行");
      //   },
      //   componentUpdated: () => {
      //     console.log("组件更新执行");
      //   },
      //   unbind: () => {
      //     console.log("解绑当前指令");
      //   },
    },

animation 进入离开，列表过渡

使用transtion标签
在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
也可以引入动画插件
第一步安装插件
cnpm install animate.css --save -dev
第二步引入插件

import animated from 'animate.css'

第三步使用插件

Vue.use(animated);

  <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutLeft"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
    >
      <p v-if="show">hello</p>
    </transition>

css样式

<style>
.bigfont-enter-active,
.bigfont-leave-active {
  transition: all 2s;
}
.bigfont-enter,
.bigfont-leave-to {
  font-size: 12px;
  opacity: 0;
}
</style>

注意animate.css不起效报错的情况
一般安装的是最新版本
这里遇到了新版本animate.css不生效问题animated不识别
解决方案是降版本
这里我降低了版本使用的是3.5.0的版本
cnpm install animate.css@3.5.0 -- save -dev