守卫、组件过渡动画、混入mixin、事件修饰符

最新推荐文章于 2022-11-24 12:46:46 发布

猪皮惡霸

最新推荐文章于 2022-11-24 12:46:46 发布

阅读量157

点赞数

文章标签： mixins

本文链接：https://blog.csdn.net/typeof83/article/details/109732667

版权


mapState 和 mapGetters 映射到组件计算属性中
mapMutations 和 mapActions 映射到组件的methods中
方便操作

导航守卫
导航->路由正则发送改变   /home -> /todo
路由拦截
全局前置守卫
  // 可以拦截到所有路由的变化，一般用在main.js中进行拦截
  router.beforeEach((to,from,next)=>{
    // to 将要进入的目标路由信息对象
    // from 从哪里来的路由信息对象
    // next() 下一步要干什么，要跳转到哪里执行的函数，参数router.push一样
  })

路由独享守卫
  {
    path: '/home',
    component: Home,
    beforeEnter (to,from,next) {
      // 进入此路由之前执行
    }
  }

组件内守卫
  beforeRouteEnter (to,from,next) {
    // 组件创建之前就执行了，没有this
  }
  beforeRouteLeave (to,from,next) {

  }

全局后置钩子
  router.afterEach((to,from)=>{

  })

过渡

用来给任意元素或组件添加过渡动画，如，转场动画
元素或组件包裹在标签中
可以执行过渡动画，也可以执行animation动画

过渡类名

v-enter 过渡的开始状态（起始帧） 0%
v-enter-to 过渡的结束状态（终止帧） 100%
v-enter-active 过渡的起始到结束状态（整个过程）
v-leave 过渡离开的初始状态 100%
v-leave-to 过渡离开的结束状态 0%
v-leave-active 过渡离开时从初始到结束的状态（整个过程）

name属性

设置过渡类名的前缀，区分不同过渡元素或组件
如果标签没有name属性，过渡的六个类名默认类名前缀为 v-
如果标签有name属性，过渡的六个类名类名前缀为 hehe-enter hehe-leave …

过渡顺序

默认进入和离开同时执行
设置过渡执行顺序
mode=“out-in” 先离开再进入
mode=“in-out” 先进入再离开

自定动画类名

enter-class -> v-enter
enter-active-class -> v-enter-active
enter-to-class -> v-enter-to
leave-class -> v-leave
leave-active-class -> v-leave-active
leave-to-class -> v-leave-to

keep-alive

可以识别包裹在标签中的组件，在组件将要销毁时，不进行销毁，进行缓存
当路由切换到被缓存的组件时，不会重新创建，从缓存取出展示
主要用于保存组件的状态和避免重复渲染组件
4 8 2 1
4 四个阶段
8 每个阶段两个钩子函数 4*2 = 8
2 两个缓存钩子
1 一个错误钩子函数

被 keep-alive 缓存的组件激活时调用activated钩子函数
被 keep-alive 缓存的组件停用时调用deactivated钩子函数

errorCaptured

当捕获一个来自子孙组件的错误时被调用

mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
组件部分功能复用
对象合并( Object.assign(obj1,obj2) )
全局混入和局部混入
全局混入：会把混入对象合并到所有vue实例，所有的组件也会被混入（慎用!）
Vue.mixin({// 混入对象

})
混入对象中的配置可以是组件配置项中的所有内容

当混入对象和组件配置对象属性冲突时，以组件的数据为主
当混入对象和组件配置对象的方法重名时，保留两个方法，先执行混入对象的方法，再执行组件的方法

事件修饰符

v-on指令的修饰符
事件流 -> 事件的执行顺序
事件对象 -> 包含与事件相关的所有信息
@click.stop 阻止事件传播
@click.prevnet 阻止默认行为
@click.capture 设置事件流为捕获
@click.self 事件必须发生在自己身上才会执行
@click.once 事件只发生一次

// dom.onclick = fn1 DOM 0级事件模型
// dom.onclick = fn2
// dom.onclick = null

// dom.addEventlistener(‘click’,fn1,boolean) DOM 2级事件模型
// dom.addEventlistener(‘click’,fn2,boolean)
// dom.removeEventlistener(‘click’,fn1,boolean)