Vuejs中的mixins該怎么使用

本篇文章給大家分享的是有關(guān)Vuejs中的mixins該怎么使用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

混合以一種靈活的方式為組件提供分布復(fù)用功能?；旌蠈?duì)象可以包含任意的組件選項(xiàng)。當(dāng)組件使用了混合對(duì)象時(shí)，混合對(duì)象的所有選項(xiàng)將被“混入”組件自己的選項(xiàng)中。

一、Mixins的基本用法

現(xiàn)在有個(gè)數(shù)字點(diǎn)擊遞增的程序，假設(shè)已經(jīng)完成了，這時(shí)我們希望每次數(shù)據(jù)變化時(shí)都能夠在控制臺(tái)打印出提示：“數(shù)據(jù)發(fā)生變化”.

代碼實(shí)現(xiàn)過程:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    var addLog = {
    	// 將updated鉤子混入到vue實(shí)例中
        updated() {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        mixins: [addLog], //混入
    })
</script>

當(dāng)點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)混入的 addLog 中的 updated 方法。

二、mixins的調(diào)用順序

• 從執(zhí)行的先后順序來說，都是 混入的先執(zhí)行，然后構(gòu)造器里的再執(zhí)行

• data中的屬性 和 methods里的方法，會(huì)覆蓋（ 構(gòu)造器覆蓋混入的屬性和方法 ）

• 生命周期的鉤子則會(huì)調(diào)用2遍，不會(huì)覆蓋（ 先調(diào)用混入鉤子再調(diào)用構(gòu)造器鉤子 ）

在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù)：

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    var addLog = {
        updated : function () {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("構(gòu)造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

三、全局混入方式

全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加數(shù)量</button></P>
</div>


<script>
    Vue.mixin({
        updated: function () {
            console.log('我是全局被混入的');
        }
    })

    var addLog = {
        updated : function () {
            console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("構(gòu)造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

順序總結(jié)：全局混入 > 局部混入 > 構(gòu)造器

兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)

當(dāng)混入和組件對(duì)象中都有test方法（重名）時(shí)，最終的值取組件對(duì)象的鍵值對(duì)

  <div id="app">
      <p>num:{{ num }}</p>
      <P>
          <button @click="add">增加數(shù)量</button>
      </P>
  </div>

  <script>
      var addLog = {
          updated: function () {
              console.log("數(shù)據(jù)放生變化,變化成" + this.num + ".");
              this.test();
          },
          methods: {
              test: function () {
                  console.log('混入中的test')
              }
          }
      }

      var app = new Vue({
          el: '#app',
          data: {
              num: 1
          },
          methods: {
              add: function () {
                  this.num++;
              },
              test:function(){
                  console.log('組件對(duì)象中的test')
              }
          },
          mixins: [addLog], //混入
      })
</script>

以上就是Vuejs中的mixins該怎么使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。