詳解Vue文件中幾個易忽略部分的剖析

針對Vue文件中部分大家可能不會去研讀的內容，這篇文章主要介紹了詳解Vue文檔中幾個易忽視部分的剖析，非常具有實用價值，需要的朋友可以參考下

針對Vue文件中部分大家可能不會去研讀的內容，我做了個小總結，作為有經驗者的快餐，不是特別適合初學者，可能有不妥之處，希望大家多提建議。

可重複使用程式碼量的mixin

mixin概念：元件級可重複使用邏輯，包括資料變數/生命週期鉤子/公用方法，從而混入的元件中可以直接使用，不用重複寫入冗餘邏輯(類似繼承)

使用方法:

在某一公用資料夾pub下建立mixin資料夾，其下建立mixinTest.js

const mixinTest = {
  created() {
    console.log(`components ${this.name} created`)
  },
  methods: {
    hello() {
      console.log('mixin method hello')
    }
  }
}
export default mixinTest

#在元件中引用剛才的公共混入檔案並使用

import mixinTest from '../pub/mixin/mixinTest.js'
export default {
  data() {
    return {
      name: 'hello'
    }
  },
  mixins: [mixinTest],
  methods: {
    useMixin() {
      this.hello()
    }
  }
}

ps: 若是使用Vue.mixin()這個方法，則會影響之後建立的所有Vue範例，請慎用！

注意mixin的幾個特性:

1. 混入的資料變數是淺合併，衝突時以元件內的資料優先(物件裡面的自訂變數)

2. 混入的生命週期函數內的邏輯會與元件內定義的生命週期函數邏輯合併，並且先執行(created/mounted/destroy)

3. 混入的值為物件的選項，會混合成一個對象，衝突後也是以元件內鍵名優先(data/method/components/directives)

3. slot內容分發

4. slot概念引入：Vue跟React在寫法上的不同就在於元件與子元件內部元素的組織上，在元件裡面沒有children元素供我們存取和展現(暫不考慮render函數)，取而代之的API是slot

使用場景定義：

自訂的子元件裡面有巢狀的HTML或其他自訂的標籤元件

這個自訂的子元件是寫在父元件裡面，巢狀的東西也放在父元件裡面

1. 透過在子組件的模板裡面使用58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee標籤，從而達到渲染寫在父組件裡的嵌套標籤的效果

2. ##本質是把父元件放在子元件裡的內容，插到了子元件的位置，多個標籤也會一起被插入

3. <template>
     <p id="app"> 
       <self-component> <!--self-component表示自定义的组件-->
         <span>12345</span> <!--父组件里的嵌套标签--> 
       </self-component> 
     </p> 
   </template>
   <script>
   export default {
     components: [selfComponent]
   }
   </script>
   
   <!--self-component的组件模板-->
   <template>
     <p>
       <button><slot></slot></button>
     </p>
   </template>
   <script>
   export default {
     // 只有子组件的模板里面有slot标签，才能取到写在自定义组件里面的标签的渲染引用
   }
   </script>

#slot特性的進階兩點：

1. slot插入內容的編譯作用域：被分發的內容的作用域，根據其所在模板決定

##具體內容寫的位置，決定了編譯的作用域(大部分情況都是在父元件作用域下)
#2.1.0 新增作用域插槽，從而可以把子元件的屬性暴露給父元件中寫在子元件內的內容使用
子元件中的slot標籤可以直接寫自訂屬性，然後父元件寫在slot的標籤加上slot-scope屬性

<!-- 父组件模板 -->
<child :items="items">
 <!-- 作用域插槽也可以是具名的 -->
 <li slot="item" slot-scope="props" class="my-fancy-item">{{ props.text }}</li>
</child>

<!-- 子组件模板 -->
<ul>
 <slot name="item" v-for="item in items" :text="item.text">
  <!-- 这里写当父组件引用子组件但没写内部内容时展示的东东 -->
 </slot>
</ul>

#slot的name屬性來指定標籤插入的位置，也就是文件裡面的具名插槽(這篇官方文件說的明白)

在子組件的模板裡面寫的slot有個name屬性(af84d27f87c182823f3fa1c1661899d27971cf77a46923278913ee247bc958ee)

1. 在父元件中寫子元件裡面的插槽內容，指明slot屬性(51b5f07300a0fda9b389018dc635da2c12394b3e26ee717c64999d7867364b1b4a3)

2. 父元件的內容就會對應slot==name放到正確的位置

3. #沒有指明slot屬性的就會預設放到匿名插槽的位置上

動態元件

#動態元件這個特性，很多人寫的Vue專案也不少，但也沒用到過這個，有必要多說幾句

動態元件適用情況：

1. #單頁應用，部分元件的切換不涉及路由，只是頁面有一塊區域的元件要變更

2. 變更的元件參數定義上是一致的，例如都是對話框，要傳一個物件進去，但物件裡面的資料結構不同

3. 透過使用component的is屬性，避免在template中的冗餘元件程式碼，避免多個v-if模板程式碼更加整潔

4. 使用的方法(借鑒文件):

   ######

   <keep-alive>
     <component v-bind:is="currentView">
     <!-- 组件在 vm.currentview (对应组件名称)变化时改变！ -->
     <!-- 非活动组件将被缓存！可以保留它的状态或避免重新渲染 -->
     </component>
   </keep-alive>

   #########注意點：############動態切換的元件都要引入父元件中，渲染是動態的，但引入不是。 ############7c9485ff8c3cba5ae9343ed63c2dc3f7包裹動態元件時，會快取不活動的元件實例，提高效能，避免重複渲染(keep-alive不會渲染額外DOM結構)## ##########7c9485ff8c3cba5ae9343ed63c2dc3f7有include和exclude這兩個屬性，用來指定快取和不快取的元件(傳入字串/陣列/正規)####### ######另一種避免重新渲染的方法是為標籤增加屬性v-once，用於快取大量的靜態內容，避免重複渲染。 ###

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

动画与过渡

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

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

DOM属性的改变

若是单个元素/组件的显隐，在组件外面包裹一层300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81，而后选择是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)

<!-- 每种CSS动画库对应的class命名规则可能不同，所以根据不同库要自己写，以animate.css为例 -->
<transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
  :duration="{ enter: 500, leave: 800 }"
>...</transition>
<!-- duration属性可以传一个对象，定制进入和移出的持续时间-->

JS过渡：

1. 因为现在很多动画库需要工程师调用库提供的函数，把dom元素传入进行处理，这个时候需要这种方式

2. 通过在transiton这个标签上添加监听事件，共8个([before|after]?-?[enter|leave]-?[cancelled]?)

3. 监听事件的回调函数的第一个参数都是el，为过渡的dom元素，在enter和leave这两个还会传入done作为第二个参数

4. 元素首次渲染的动画，可以指定的监听事件有4个([before|after]?-?appear和appear-cancelled)

<template>
  <transition v-bind:css="false"
  v-on:before-enter="beforeEnter" v-on:enter="enter"
  v-on:leave="leave" v-on:leave-cancelled="leaveCancelled">
    <!-- 对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测 -->
  </transition>
</template>
<script>
methods: { // 以Velocity库为例
  beforeEnter: function (el) {/*...*/},
 // 此回调函数是可选项的设置
 enter: function (el, done) {
  // Velocity(el, { opacity: 1, fontSize: &#39;1.4em&#39; }, { duration: 300 })
  done() //回调函数 done 是必须的。否则，它们会被同步调用。
 },
 leave: function (el, done) {
  // Velocity(el, { translateX: &#39;15px&#39;, rotateZ: &#39;50deg&#39; }, { duration: 600 })
  done()
 },
 leaveCancelled: function (el) {/*...*/}
}
</script>

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

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

<transition name="fade" mode="out-in">
 <!-- ... the buttons ... -->
</transition>

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

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

1. 使用transitoin-group这个组件，其需要渲染为一个真实元素，可以通过tag这个属性来指定。

2. 列表的每个元素需要提供key属性

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

<template>
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">{{ item }}</li>
  </transition-group>
</template>
<script>
import _ from &#39;lodash&#39;;
export default {
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9]
    }
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
}
</script>
<style lang="css">
.flip-list-move {
 transition: transform 1s;
}
</style>

数值和属性动态变化

这一部分的动画主要是针对数据元素本身的特效，比如数字的增减，颜色的过渡过程控制，svg动画的实现等，其本质都是数字/文本的变化。 我自己总结就是：通过利用Vue的响应式系统，把数字的变化通过外部库把DOM上对应数值的变化做出连续的效果，如1->100是个数字递增的连续过程，黑色->红色的过程。官方文档主要是用几个示例代码来说明，其本质步骤如下：

1. 在页面上通过input的双向绑定修改某一变量a，还有一个处理dom上的过渡效果的变量b

2. 这个数据被watcher绑定(watch对象中某个属性是这个变量a)，触发逻辑

3. 在watcher里面的逻辑就是通过外部过渡库，指定初始值b和最终值a，是把b的值最后改为a

4. DOM上绑定的变量就是b，如果某些复杂情况可能是基于b的计算属性，从而把b的变化过程展现出来

上面這個思路走一遍下來就完成了一個單元級別的動畫效果，這種類似的流程其實是很常見的需求，所以有必要把這個過程封裝成一個元件，只暴露要過渡的值作為入口，每次改變這個值都是一個動畫過渡效果。元件封裝需要在上面四個步驟的基礎上加入mounted生命週期規定初始值即可，同時原來的兩個值a/b在元件裡面作為一個值，可以用watch物件中的newValue和oldValue作為區分。至於最後的SVG，其本質也是數字的過渡，只不過裡面涉及的狀態變數更多，程式碼更長而已，不過純前端頁面這種需求倒還是不多的，不過作為愛好倒可以鼓搗一些好玩的小demo，不過肯定需要設計師的參與，要不要那些參數可不好調出來吶。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Angular使用過濾器uppercase/lowercase實作字母大小寫轉換功能範例

Angular使用操作事件指令ng-click傳遞多個參數範例

JavaScript程式碼實作txt檔案的上傳預覽功能

以上是詳解Vue文件中幾個易忽略部分的剖析的詳細內容。更多資訊請關注PHP中文網其他相關文章！