【备战春招】第十一天+vue复习

学习课程：前端工程师2022版-vue基础入门

lesson26：列表动画2-6 列表动画-慕课网体系课 (imooc.com)

lesson27：状态动画2-7 状态动画-慕课网体系课 (imooc.com)

lesson28：Mixin混入的基础语法（1）1-1 Mixin 混入的基础语法（1）-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了列表动画、状态动画和Mixin混入的基础语法（1）。

如果要做列表动画，那么外面包裹的标签为<transition-group></transition-group>。它的入场出场动画的类名v-enter和v-leave的六个类名。所以它的使用和之前单元素组件的方法一样。但是它多了一个v-move的类名，作用是使之前存在的列表项在做运动时也能拥有动画属性。

状态动画则是通过方法来实现。方法中定义目标值，用当前值和目标值进行比较直到相等。中间可以通过setInterval定时器设定间隔时间和数据操作。

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

mixin 本质上就是一个 Object 对象，它和 vue 实例上的属性一致，包含 data、methods、computed、watch、生命周期函数等等.

想要混入定义好的 mixin，只需要通过组件的 mixins 属性传入想要混入的 mixin 数组即可我们在定义 mixin 时会出现属性名重复的情况。

组件 data、methods 优先级高于mixin data、methods优先级；生命周期函数，先执行mixin里面的，再执行组件里面的。

继续加油！