Vue2组件优化必知的几点

组件的封装和复用

Mixin和DIrective

如何封装代码

• Vue2推荐的代码组织方式是.vue文件
• 早期前后端未分离时代，我们的代码组织形式一般是MVC，Model文件夹，View文件夹，Controller文件夹
• 前后端分离后，逻辑上View这一层分离出来作为单独的前端项目。
• 我们都知道前端三件套，HTML，CSS，JavaScript。如果每个页面都要对应三个文件，就会显得非常杂乱。
• 而.vue文件解决了代码组织的问题，可以将HTML，CSS，JavaScript放在一个.vue文件中

如何复用代码

Mixin局部混入

• 以.vue组织的代码，默认导出是组件的定义对象，该对象有非常多的属性，常见的有data，methods，computed，watch，filter，component等
• 而Mixin就是用来复用组件属性的一种方式。
• 在vue中一般不直接操作DOM，如果需要操作DOM，我们可以将其封装为一个函数，可以通过mixin来混入进行复用，也可以通过Directive指令来复用。比如组件大小的自适应。

components局部组件

• 除了复用组件定义对象的属性外，我们也可以复用整个组件。
• 在组件定义对象中将需要复用的组件导入，放在components属性中即可。

全局的复用

• 我们可以将属性注册在全局中，这样每个组件内都被混入了该属性，比如directive，filter。
• 我们可以将组件注册为全局组件

插件和过滤器

插件plugin

插件应该导出一个对象，该对象拥有一个install方法

install方法接受两个参数，Vue构造器，option选项。

在方法内，我们可以在Vue构造器上添加一个全局的方法和属性，或者使用Vue构造器的directive，components等等去添加一些全局的指令组件等

插件就是用来扩展Vue的功能的，常见的有vue-router，第三方组件库等

过滤器filter

过滤器是用于对Vue中的js表达式进行转换的

只能用于插值表达式和v-bind中

注册在组件的选项对象中filters中

使用时放在表达式的最后，使用|分割，可以链式使用

transition和animate

transition组件

transiton用于给元素或组件添加进入或离开的过渡效果

默认的类名有v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to，我们可以在css中给每个类名设置对应的过渡效果

默认的生命周期事件有before-enter，enter，after-enter，enter-caccelled，leave同enter，在每个生命周期钩子中，可以通过js设置过渡或动画效果

默认情况下，过渡进入和离开是一起发生的，我们可以通过mode的两种值in-out，out-in来设置新元素和旧元素的过渡时间顺序

提供了name属性，可以改变类名的前缀v。提供apper属性不需要值，可以设置节点的初始渲染过渡，具体用法见官网

transition中包含多个标签进行过渡时，应该给每个元素加上key属性，否则，对于相同标签名的只会替换内容，而不是切换元素

transition中包含多个组件进行过渡时，不需要提供key属性，使用component结合is属性即可轻松实现

在对应的类名中我们可以通过transition来设置过渡效果，或者通过animation设置动画效果

Vue默认是监听transition end或animation end这俩个事件来确定过度是否完成，当你给过渡组件同时设置了动画和过渡时，就需要使用type来显示的声明vue监听哪个事件

通过设置duration属性可以设置动画或者过渡的持续时间。可以是一个数字或一个对象（分别设置进入和离开的延迟）

transition-group组件

transition-group可以同时显示多个节点，比如列表的渲染，transition组件同一时间只能切换显示一个节点

transition-group没有mode，因为不需要切换不同的组件，始终渲染同一个组件，可能组件内部元素有变动但不属于组件切换

transition-group本身是以span元素显示在真实的DOM中的，而transition则只是一个虚拟的元素

默认的class和name以及事件都一致，多了一个move事件，用于列表元素移动的过渡设置（Vue使用了FLIP的动画队列实现的移动过渡，我们只需要设置过渡时间即可）

注意点

transition组件中只能包含一个组件，即只能出现v-if，v-show，不能出现v-else等

transition组件中过渡和动画都有时，过渡的时间设置不能省略，否则动画不生效

复用过渡组件很简单，将transition或transition-group作为根元素，将需要过度的内容作为slot插进来即可，就能实现一套过渡效果多次使用

动态过渡也很简单，作为一个组件，其每个属性都可以动态绑定，同时使用组件提供的钩子函数，获取到全部上下文信息进行动态设置过渡也很容易

除了元素的增删，移动的动画或过渡之外，对于颜色的改变，坐标的改变，尺寸的改变等等这类数值的变化，也可以通过结合第三方的动画库实现数值的变化过程

这种数值的变化过程，一般需要第三方库去通过js操作实现动画的变化过程

示例查看