JS每日一題 Vue中mixin怎麼理解？

20190122

vue中mixin怎麼理解？

mixin是為了讓可復用的功能靈活的混入到當前元件中，混合的物件可以包含任意元件選項（生命週期，指令之類等等）, mixin翻譯過來叫混合,高階的詞彙可以叫外掛程式入侵

// 定義乙個混合物件

const mymixin = ,
methods: 
}}// 定義乙個使用混合物件的元件
const component = vue.extend()
var component = new component() // js 每日一題

當元件和混合物件含有同名選項時,選項會按照規則進行合併

**理解

const mixin = 

}new vue(
})// => "混合物件的鉤子被呼叫"
// => "元件鉤子被呼叫"
// 從上面的**我們可以看出來混合物件的生命週期會被先呼叫

**理解

const mixin = ,

conflicting: function () 
}}const vm = new vue(,
conflicting: function () 
}})vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

也可以全域性註冊混合物件。注意使用！ 一旦使用全域性混合物件，將會影響到 所有 之後建立的 vue 例項

// 為自定義的選項 'myoption' 注入乙個處理器。

vue.mixin(
}})new vue()
// => "hello!"

// 原始碼位址 

export function mergeoptions (
parent: object,
child: object,
vm?: component
): object 
if (typeof child === 'function') 
normalizeprops(child, vm)
normalizeinject(child, vm)
normalizedirectives(child)
const extendsfrom = child.extends
//若存在extends，則將其內容合併到父物件parent中儲存，最後再和自身child合併
if (extendsfrom) 
// 若存在mixins，則將其內容合併到父物件parent中儲存，最後再和自身child合併
if (child.mixins) 
} //初始化乙個物件，用於儲存parent和child合併後的內容，並作為mergeoptions函式的結果返回
const options = {}
let key
for (key in parent) 
for (key in child) 
} //使用策略物件對parent和child進行合併
function mergefield (key) 
return options
}export function initmixin (vue: globalapi) 
}

mixin就是採取一定規則將乙個功能(元件)的屬性混合到另乙個元件或者全域性當中，優點就是靈活度高，耦合度低，便於維護

關於js每日一題

js每日一題可以看成是乙個語音答題社群

每天利用碎片時間採用60秒內的語音形式來完成當天的考題

群主在次日0點推送當天的參***

JS每日一題

1.將金額12345轉成中文金額表示 要求12345 一萬兩千三百四十五 10086 一萬零八十六 100010001 一億零一萬零一 100000000 一億 單位支援到億 function numtostring num return maxjump 0 3.leetcode56.合併區間 va...

js每日一題01

如下，請給出執行結果並說明原因 let obj obj.push 1 obj.push 2 console.log obj 執行結果 題目解析 1 首先obj呼叫push方法，走的是陣列的push方法 即每次都在最後一項新增值 那麼問題來了，陣列的push方法到底是怎麼實現的呢？array.prot...

每日一題 1

題目詳情 peter喜歡玩數字遊戲，但數獨這樣的遊戲對他來說太簡單了，於是他準備玩乙個難的遊戲。遊戲規則是在乙個n n的 裡填數，規則 對於每個輸入的n，從左上角開始，總是以對角線為起點，先橫著填，再豎著填。這裡給了一些樣例，請在樣例中找到規律並把這個n n的 列印出來吧。輸入描述 多組測試資料 資...