Mixin 混入的基礎語法 · vue筆記

[TOC] >[success] # Mixin 混入的基礎語法這章講解一下 **vue** 中相關的一些 **復用性代碼** 該怎么去寫，首先介紹一下 **mixin 混入** ， **mixin 混入：就是把某一些內容混入到哪里去** 。 >[success] ## 局部混入如下代碼，定義了一個 **myMixin** 混入，并且 **混入的代碼中** 同樣有一個名稱為 **number** 的 **變量** ， **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data 優先級高于mixin data 優先級 const myMixin = { data(){ return { number: 2, count: 222 } } } const app = Vue.createApp({ data(){ return { number: 1 } }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 如果 **混入的變量與文件中的變量名相同** 的情況下，使用文件自己的 **number** 變量，如果文件中沒有 **number** 這個變量，就會使用 **混入的代碼中的 number 變量** ，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data 優先級高于mixin data 優先級 const myMixin = { data(){ return { number: 2, count: 222 } } } const app = Vue.createApp({ data(){ return { // number: 1 } }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **生命周期** 也是可以 **混入** 的，那么如果 **組件代碼中與混入代碼中** 都有 **created** 會怎么樣呢，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數，先執行 mixin 里面的，再執行組件里面的 const myMixin = { data(){ return { number: 2, count: 222 } }, created(){ console.log('我是混入的created') }, methods: { handleClick(){ console.log('mixin handleClick') } } } const app = Vue.createApp({ data(){ return { number: 1 } }, created(){ console.log('我是自己的created') }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **生命周期函數** ，會先執行 **mixin** 里面的，再執行 **組件** 里面的。 >[success] ## 全局混入假如有這樣一個場景：**A組件** 中引入了 **mixin混入代碼** ，并且 **A組件** 中引入了 **B組件** ，在這個時候如果 **B組件** 想使用 **A組件** 引入的 **mixin混入代碼** ， **可以直接使用嗎？答案是不可以的** 。如果也想使用 **mixin混入的代碼**，必須也要在 **B組件** 內引入 **mixin混入代碼** 才能使用，這就跟 **vue** 的 **局部組件** 一個道理，那么 **如何引入一次混入，任何組件都可以使用** 呢，接下來講解一下 **全局混入** 的使用方法。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數，先執行 mixin 里面的，再執行組件里面的 const app = Vue.createApp({ data(){ return { number: 1 } }, created(){ console.log('我是自己的created') }, methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <child /> <button @click="handleClick">增加</button> </div>` }) // 創建全局mixin app.mixin({ data(){ return { number: 2, count: 222 } }, created(){ console.log('我是混入的created') }, methods: { handleClick(){ console.log('mixin handleClick') } } }) // 創建子組件 app.component('child', { template: "<div>{{count}}</div>" }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 自定義屬性與mixin 下面代碼中的 **number** 屬性，這種在 **實例里** 或者 **組件里** 面定義的內容，實際上是一個 **自定義屬性** ，既不在 **data** 里，也不在 **methods** 里，又不在 **計算屬性** 里，又不在 **各種各樣（例如：watch等等...）** 的方法里，直接 **定義在組件的最外層這樣的一個屬性** ，這種內容，我們把它叫做 **自定義屬性** 。 **this.$options** 指的是當前的 **vue應用** 或 **組件**，所有的內容，在**vue** 做處理之后，都會把它掛到 **this.$options** 里面來，直接 **this.number** 是獲取不到的，用 **this.$options.number** 這種方式才可以獲取到。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數，先執行 mixin 里面的，再執行組件里面的 const myMixin = { number: 1 } const app = Vue.createApp({ mixins: [myMixin], number: 2, template: ` <div> <div>{{this.$options.number}}</div> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **組件的自定義屬性優先級高于 mixin 自定義屬性優先級** >[success] ### 自定義屬性優先級修改雖然上面說到了 **組件的自定義屬性優先級高于 mixin 自定義屬性優先級** ，但是**vue** 是 **支持修改自定義屬性優先級** 的，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數，先執行 mixin 里面的，再執行組件里面的 const myMixin = { number: 1 } const app = Vue.createApp({ mixins: [myMixin], number: 2, template: ` <div> <div>{{this.$options.number}}</div> </div>` }) // 對自定義屬性number的合并策略做修改， app.config.optionMergeStrategies.number = (mixinVal, appVal) => { return mixinVal || appVal // mixinVal 有就用 mixinVal，否則用appVal } const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 總結 1. **組件的 data, methods 優先級高于mixin data, methods 優先級** 2. **生命周期函數，先執行 mixin 里面的，再執行組件里面的** 3. **組件的自定義屬性優先級高于 mixin 自定義屬性優先級**