学习Vue框架第五天心得

1.transition过度

  • Vue提供transition组件来帮助我们实现过度效果,依据就是在控制元素显示隐藏的时候为dom在指定的时刻添加对应的类名,而我们只需要在这些类名里面写上对应的css样式
 .b-enter-active{
    animation: aaa 2s;
}
.b-leave-active{
    animation: aaa 2s reverse;
}
@keyframes aaa{
    0%{
         opacity: 0;
         transform:translateX(100px)
     }
     100%{
         opacity: 1;
         transform: translateX(0px);
     }
 }
  • v-enter 进入开始的时候
  • v-enter-to 进入过程结束的时候
  • v-leave 离开的时候
  • v-letave-to 离开过程结束的时候
  • v-enter-active 定义元素插入时的过度状态
  • v-leave-active 定义元素离开时的过度状态
 <div id="app">
   <button @click="isShow=!isShow">click</button>
    <transition name="b" mode="out-in" appear>    <!-- appear每次刷新就会有入场动画 -->
        <div v-if="isShow" key="1">111111111111111111</div>
        <div v-else key="2">2222222222222222222</div>
    </transition>
</div>v

对上面代码做一个解释。

  • 当点击按钮切换显示和隐藏,通过v-if和v-else表示出现和隐藏。
  • name=“b”,动画的自定义类名,对应上面的css样式
  • transition组件主要作用就是可以给元素子某些特定的时候添加特定的类名 =>组件默认是进入和离开同时发生
  • transition template component这几对标签分别对应动画 模板 组件(实现组件的切换) 这几个标签都不会被渲染出来
  • transition-grooup 会被渲染出一个额外的span标签,过度多个元素的时候用这个标签包裹。 可以通过tag来更换为其他元素
  • appear => 添加了这个属性,每次刷新的时候就会有动画效果。
  • 关于key
    • 如果这里不写key的化,他不会把之前的老节点卸载,他会在虚拟dom中比较,发现只是text文本不一样,他只会替换文本,所以我看不到动画效果(其实我们已经写好了动画效果),当我们加上key值得时候,他内部会把之前得节点卸载,创建一个新得节点,就会出现动画效果了
  • 关于mode=“out-in”
    • 这是一种过度模式,分为两种
      • in-out:新元素先进行过度,完成之后当前元素过度离开
      • out-in:当前元素先进行过度,完成之后新元素过度进入

2.生命周期

  • 组件从创建到销毁的一系列过程 叫做 组件的声明周期
  • vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑

组件的生命周期钩子函数可以分为三个阶段:初始化 运行中 销毁

  • 初始化阶段:beforCreate created bedorMount mounred
  • 运行阶段:beforeUpdate updated
  • 销毁阶段:beforeDestroy destoryed

初始化阶段

  1. 一个组件 / 实例 的生命周期都是通过new开始的
  2. 实例化之后,内部会做一些初始化事件和声明周期相关的配置
  3. 在初始化的时候,beforeCreate钩子函数立马执行,这里数据还没有进行拦截相关操作,所以这里获取不到虚拟dom和真实dom
  4. 之后呢走初始化注入&校检,内部对数据继续宁拦截,内部通过Object.defineProperty()为数据添加set get方法
  5. created钩子函数内部的数据已经被挂载了,这里可以获取到数据虚拟dom,但是获取不到真实dom,在这个钩子函数里面可以进行ajax的异步操作
  6. 接下来他会判断你有没有绑定挂载,没有绑定挂载,调用vm.$mount(el),在判断是否绑定template,没有绑定将el外部html当作template,然后将其编译成虚拟dom,即将放入render函数中做初始化渲染的操作。
  7. beforeMount钩子函数代表dom马上要被渲染出来了,但是 还没有真正的在页面中渲染出来,所以和created钩子函数基本一致,可以做ajax与初始化事件的绑定操作,这里可以获取到数据,但是获取不到真实dom。
  8. 生成好了虚拟dom,然后在rander函数里面替换对应的el,渲染成真实的dom阶段,render是将虚拟dom渲染成真实都没
  9. mounted钩子函数是初始化阶段最后一个函数,数据已经挂载完毕了,真实dom也已经渲染出来了,所以这里可以获取到数据,也可以获取到真实dom,这个钩子函数可以做一些实例化的相关操作。===>拖拽

运行阶段

  1. beforeupdate钩子函数updated钩子函数,只有当dom挂载完毕了,然后数据发送变化的时候,着两个钩子函数才会执行
  2. 这两个钩子函数是有区别的:
    • beforeupdate这个钩子函数里面,获取的真实dom,是更新之前的内容,当数据改变了,会立马进入这个钩子函数,不会去进行对比,重新渲染。
    • updated这个钩子函数里面dom的获取内容是更新之后的内容,新的内容会生成新的虚拟dom,与上一次虚拟dom1进行对比差异,比较出来差异,再去进行dom的重新渲染

销毁阶段

通过执行this.$destroy()来让组件销毁

  1. beforeDestory钩子函数代表销毁之前,可以做一些善后操作,例如清除一些事件绑定 / 清除定时器
  2. destroyed钩子函数代表销毁后,组件dom结构还是存在的,只是组件的双向绑定,事件监听,watch功能都已经不存在了,组件没有任何意义了

3.生命周期示例图

在这里插入图片描述

4.实例方法 / 生命周期

  • vm.$mount(el)
    • 如果vue实例化时没有收到el选项,则它处于“未挂载”状态,可以通过这个方法手动绑定一个挂载
  • vm.$destroy()
    • 这个方法可以完全销毁一个实例。清除它与其他实例的链接,接触他的全部指令和事件监听器,触发beforedeatory和destroyed的钩子函数
  • vm.$nextTick( [callback] )
    • 他和全局方法 Vue.nextTick一样,不同是回调的this自动绑定到调用它的实例上。
    • 将回调延迟到到下次DOM更新循环之后执行。在修改数据之后,立即使用这个方法,获取真实的DOM
    • 他在updated钩子函数之后执行,可以获取到真实DOM
发布了7 篇原创文章 · 获赞 0 · 访问量 45
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览