详解Vue文档中几个易忽视部分的剖析

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了详解Vue文档中几个易忽视部分的剖析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

针对Vue文档中部分大家可能不会去研读的内容，我做了个小总结，作为有经验者的快餐，不是特别适合初学者，可能有不妥之处，希望大家多提建议。

节省代码量的mixin

mixin概念：组件级可复用逻辑，包括数据变量/生命周期钩子/公共方法，从而在混入的组件中可以直接使用，不用重复写冗余逻辑(类似继承)

使用方法:

在某一公共文件夹pub下创建mixin文件夹，其下创建mixinTest.js

在组件中引用刚才的公共混入文件并使用

ps: 若是使用Vue.mixin()这个方法，则会影响之后创建的所有Vue示例，慎用！

注意mixin的几个特性:

  1. 混入的数据变量是浅合并，冲突时以组件内的数据优先(对象里面的自定义变量)
  2. 混入的生命周期函数内的逻辑会与组件内定义的生命周期函数逻辑进行合并，并且先执行(created/mounted/destroy)
  3. 混入的值为对象的选项，会混合成一个对象，冲突后也是以组件内键名优先(data/method/components/directives)

slot内容分发

slot概念引入：Vue跟React在写法上的不同就在于组件与子组件内部元素的组织上，在组件里面没有children元素供我们访问和展现(暂不考虑render函数)，取而代之的API是slot

使用场景定义：

  1. 自定义的子组件里面有嵌套的HTML或者其他自定义的标签组件
  2. 这个自定义的子组件是写在父组件里面，嵌套的东西也放在父组件里面
  3. 通过在子组件的模板里面使用标签，从而达到渲染写在父组件里的嵌套标签的效果
  4. 本质是把父组件放在子组件里的内容，插到了子组件的位置，多个标签也会一起被插入
12345

slot特性的进阶两点：

slot插入内容的编译作用域：被分发的内容的作用域，根据其所在模板决定

  1. 具体内容写的位置，决定了编译的作用域(大部分情况都是在父组件作用域下)
  2. 2.1.0+新增作用域插槽，从而可以把子组件的属性暴露给父组件中写在子组件内的内容使用
  3. 子组件中的slot标签可以直接写自定义属性，然后父组件写在slot中的标签加上slot-scope属性

    • slot的name属性来指定标签插入的位置，也就是文档里面的具名插槽(这个官方文档说的明白)

    1. 在子组件的模板里面写的slot有个name属性()
    2. 在父组件中写子组件里面的插槽内容，指明slot属性(

      )

    3. 父组件的内容就会对应slot==name放到正确的位置
    4. 没有指明slot属性的就会默认放到匿名插槽的位置上

    动态组件

    动态组件这个特性，很多人写的Vue项目也不少，但也没用到过这个，有必要多说几句

    动态组件适用情况：

    1. 单页应用，部分组件的切换不涉及路由，只是页面有一块区域的组件要变更
    2. 变更的组件参数定义上是一致的，比如都是对话框，要传一个对象进去，但对象里面的数据结构不同
    3. 通过使用component的is属性，避免在template中的冗余组件代码，避免多个v-if模板代码更加整洁

    使用的方法(借鉴文档):

    注意点：

    1. 动态切换的组件都要引入到父组件中，渲染是动态的，但引入不是。
    2. 包裹动态组件时，会缓存不活动的组件实例，提高性能，避免重复渲染(keep-alive不会渲染额外DOM结构)
    3. 有include和exclude这两个属性，用于指定缓存和不缓存的组件(传入字符串/数组/正则)
    4. 另一种避免重新渲染的方法是为标签增加属性v-once，用于缓存大量的静态内容，避免重复渲染。

    ps:不会在函数式组件中正常工作，因为它们没有缓存实例。

    动画与过渡

    其实很多前端工程师第一次用Vue的动画和过渡都是通过库组件来做到的，所以对这块没怎么深挖，各种过渡特效和按钮动画就跑起来了，现在就看下文档，补补课

    前端实现动画的基本方法分为三种种：css3的过渡和keyframe/javascript操纵dom/使用webgl或者canvas来独立实现，其中第三种是作为展示动画，与交互结合较少，而Vue作为一个框架，其支持动画基是从前两种入手的，从官方文档提到的四种支持就可以看出这一点。不过官方文档是从DOM过渡和状态过渡两个方面来讲解，前者是DOM的消失和出现的动画等属性的变化，后者是页面上某些值的变化。

    DOM属性的改变

    若是单个元素/组件的显隐，在组件外面包裹一层，而后选择是css过渡还是javascript过渡

    CSS过渡：

    1. vue提供了六个样式后缀，本质是在dom过渡的过程中动态地添加和删除对应的className。(-[enter|leave]-?[active|to]?)
    2. 如果用css库来辅助开发，可以在transiton这个标签上定义自定义过渡类名，也是六个属性。([enter|leave]-?[active|to]?-class)
    3. 常见的一种效果是元素首次渲染的动画，如懒加载图片飞入，这个时候要在transiton标签上加上appear，另有三个属性可指定(appear-?[to|active]?-class)
    ...

    JS过渡：

    1. 因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式
    2. 通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)
    3. 监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数
    4. 元素首次渲染的动画，可以指定的监听事件有4个([before|after]?-?appear和appear-cancelled)

    多元素过渡其实就是一句话：照常使用v-if/v-else的同时对同一种标签加上key来标识

    Vue对于这种多元素动画有队列上的处理，这就是transiton这个标签上的mode属性，通过指定(in-out|out-in)模式，实现消失和出现动画的队列效果，让动画更加自然。

    多组件过渡也是一句话：用上一节提到的动态组件，即可完成。

    针对列表过渡，其本质仍是多个元素的同时过渡，不过列表大部分是通过数组动态渲染的，因此有独特的地方，不过整体的动画思路不变。具体有以下几点

    1. 使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。
    2. 列表的每个元素需要提供key属性
    3. 使用CSS过渡的话，要考虑到列表内容变化过程中，存在相关元素的定位改变，如果要让定位是平滑过渡的动画，要另外一个v-move属性。 这个属性是通过设置一个css类的样式，来将创建元素在定位变化时的过渡，Vue内部是通过FLIP实现了一个动画队列，只要注意一点就是过渡元素不能设置为display:inline,这里需要文档上的代码做一个简短的demo：(其实通过在li上设置过渡transition属性也可以实现v-move的效果)