学习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