詳解Vue.js Mixins 混入使用
Mixins一般有兩種用途：
1、在你已經(jīng)寫好了構(gòu)造器后，需要增加方法或者臨時(shí)的活動(dòng)時(shí)使用的方法，這時(shí)用混入會(huì)減少源代碼的污染。
2、很多地方都會(huì)用到的公用方法，用混入的方法可以減少代碼量，實(shí)現(xiàn)代碼重用。
一、Mixins的基本用法
我們現(xiàn)在有個(gè)數(shù)字點(diǎn)擊遞增的程序，假設(shè)已經(jīng)完成了，這時(shí)我們希望每次數(shù)據(jù)變化時(shí)都能夠在控制臺(tái)打印出提示：“數(shù)據(jù)發(fā)生變化”.
代碼實(shí)現(xiàn)過程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加數(shù)量</button></P>
</div>
<script type="text/javascript">
//額外臨時(shí)加入時(shí)，用于顯示日志
var addLog={
updated:function(){
console.log("數(shù)據(jù)放生變化,變化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>
二、mixins的調(diào)用順序
從執(zhí)行的先后順序來說，都是混入的先執(zhí)行，然后構(gòu)造器里的再執(zhí)行，需要注意的是，這并不是方法的覆蓋，而是被執(zhí)行了兩邊。
在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù)：
updated:function(){
console.log("構(gòu)造器里的updated方法。")
},
這時(shí)控制臺(tái)輸出的順序是：
mixins數(shù)據(jù)放生變化,變化成2.
構(gòu)造器里的updated方法。
PS：當(dāng)混入方法和構(gòu)造器的方法重名時(shí)，混入的方法無法展現(xiàn)，也就是不起作用。
三、全局API混入方式
我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個(gè)功能了。我們來看一下全局混入的方法：
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})
PS：全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE 文字轉(zhuǎn)語音播放的實(shí)現(xiàn)示例
本文主要介紹了VUE 文字轉(zhuǎn)語音播放的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
Vue.js?是一個(gè)流行的?JavaScript?框架,用于構(gòu)建用戶界面,它提供了一種簡潔的方式來管理和渲染數(shù)據(jù),同時(shí)也支持與其他庫和工具的集成,本文主要來和大家聊聊如何在vue中使用canvas,有需要的可以參考下2023-09-09
基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫一個(gè)數(shù)字華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍動(dòng)畫效果
不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍的動(dòng)畫效果,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個(gè)頁面,并且打開瀏覽器新頁面是虛擬機(jī)的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09