Vue混入是一種組合復用代碼的方式，它允許我們將一些相關的邏輯和功能集中管理，然后在多個 Vue 實例之間進行共享。在項目中，我們可能會遇到一些相似的場景，比如多個組件需要進行一些相同的操作，或者多個頁面需要處理相同的數據格式。這時候，我們就可以使用 Vue 混入來避免代碼重復，提高代碼復用性。

Vue 混入的作用主要有以下幾點：

1. 避免代碼重復

var formValidation = {
methods: {
validateForm() {
/**
* 表單校驗邏輯
*/
}
}
}
var formSubmit = {
methods: {
submitForm() {
/**
* 表單提交邏輯
*/
}
}
}
// 定義一個混入對象
var formMixin = {
mixins: [formValidation, formSubmit]
}
Vue.component('my-form', {
mixins: [formMixin],
template: '...'
})

以上代碼中，我們定義了兩個包含相同方法的對象，然后使用混入方式將它們組合到一個新的對象 formMixin 中。這個混入對象可以被多個組件復用，大大減少了代碼量。

2. 提高代碼復用性

// 定義一個混入對象
var formatDateMixin = {
filters: {
formatDate(date) {
/**
* 時間格式化邏輯
*/
}
}
}
Vue.component('my-component-1', {
mixins: [formatDateMixin],
template: '...'
})
Vue.component('my-component-2', {
mixins: [formatDateMixin],
template: '...'
})

在以上代碼中，我們使用混入方式定義了一個時間格式化的過濾器，然后在多個組件中復用這個混入對象。這樣做可以提高代碼的復用性，也可以讓我們的代碼更加簡潔。

3. 解耦邏輯與組件

// 定義一個混入對象
var dataMixin = {
data() {
return {
message: 'Hello, Vue!'
}
}
}
// 定義另外一個混入對象
var loggerMixin = {
methods: {
logMessage() {
console.log(this.message)
}
}
}
Vue.component('my-component', {
mixins: [dataMixin, loggerMixin],
template: '...'
})

以上代碼中，我們定義了一個數據混入對象和一個方法混入對象，然后在組件中同時使用這兩個混入對象。這樣做可以將邏輯和組件進行解耦，讓代碼更加清晰，也方便我們以后對邏輯和組件進行維護。