先說下上一篇留下的問題
if (child.mixins) {
for (let i = 0, l = child.mixins.length; i < l; i++) {
let mixin = child.mixins[i]
if (mixin.prototype instanceof Vue) { // 這個(gè)if暫時(shí)不明白功能作用，一般的用法都不會走這里
mixin = mixin.options
}
parent = mergeOptions(parent, mixin, vm)
}
}
// 這段代碼就是把傳入的每一項(xiàng)mixins遍歷，然后執(zhí)行mergeOptions合并，mixin只能是數(shù)組的形式，所以，
// 這里就是對mixin的一個(gè)遞歸調(diào)用，知道后面沒有mixin這一字段為止，比如下面這種情況
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p style="color: blue">{{msg}}</p>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var mixinDataOne_child_child = {
data () {
return {
msg: 'hello world from mixin one child child',
name: 'name from mixin one child child'
}
},
created () {
console.log('created from mixin one child child')
}
}
var mixinDataOne_child = {
data () {
return {
msg: 'hello world from mixin one child',
name: 'name from mixin one child'
}
},
created () {
console.log('created from mixin one child')
},
mixins: [mixinDataOne_child_child]
}
var mixinDataOne = {
data () {
return {
msg: 'hello world from mixin one',
name: 'name from mixin one'
}
},
created () {
console.log('created from mixin one')
},
mixins: [mixinDataOne_child]
}
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
created () {
console.log('created from root')
},
mixins: [mixinDataOne]
}
var myVue = new Vue(options)
console.log(myVue.msg)
console.log(myVue.name)
</script>
</html>
// 這里就是不斷對有mixin的字段進(jìn)行合并，關(guān)鍵在于對于data，created還有其他的屬性等等的合并方法，
// 不同的字段屬性用不同的方法，這個(gè)才是Vue合并策略的重點(diǎn)，也就是這一段
const options = {}
let key
for (key in parent) {
mergeField(key)
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key)
}
}
function mergeField (key) {
const strat = strats[key] || defaultStrat
options[key] = strat(parent[key], child[key], vm, key)
}
// 而重點(diǎn)在于先前說過的strat對象，如下
strats = {
el: function (parent, child, vm, key) {
return defaultStrat(parent, child)
},
propsData: function (parent, child, vm, key) {
return defaultStrat(parent, child)
},
data: function (parentVal: any,childVal: any,vm?: Component) {
do something...
},
beforeCreate: function mergeHook () {
do something...
},
created: function mergeHook () {
do something...
},
beforeMount: function mergeHook () {
do something...
},
mounted: function mergeHook () {
do something...
},
beforeUpdate: function mergeHook () {
do something...
},
updated: function mergeHook () {
do something...
},
beforeDestroy: function mergeHook () {
do something...
},
destroyed: function mergeHook () {
do something...
},
activated: function mergeHook () {
do something...
},
deactivated: function mergeHook () {
do something...
},
components: function mergeAssets () { // 這里加上個(gè)s復(fù)數(shù)
do something...
},
directives: function mergeAssets () { // 這里加上個(gè)s復(fù)數(shù)
do something...
},
filters: function mergeAssets () { // 這里加上個(gè)s復(fù)數(shù)
do something...
},
watch: function (parentVal: ?Object, childVal: ?Object) {
do something...
},
props: function (parentVal: ?Object, childVal: ?Object) {
do something...
},
methods: function (parentVal: ?Object, childVal: ?Object) {
do something...
},
computed: function (parentVal: ?Object, childVal: ?Object) {
do something...
}
}
下一篇則重點(diǎn)學(xué)習(xí)這個(gè)，在這先把之前留下的一個(gè)問題解決
- initMixin(Vue)
src\core\global-api\mixin.js
export function initMixin (Vue: GlobalAPI) {
Vue.mixin = function (mixin: Object) {
this.options = mergeOptions(this.options, mixin)
}
}
// 這個(gè)this.options便是之前說過的Vue.options
Vue.options = {
components: {
KeepAlive,
Transition,
TransitionGroup
},
directives: {
model,
show
},
filters: {},
_base: Vue
}
// 比如下面這個(gè)例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p style="color: blue">{{msg}}</p>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
var mixinGlobal_child = {
data () {
return {
msg: 'hello world from mixin global child',
name: 'name from mixin global child'
}
},
created () {
console.log('created from mixin global child')
}
}
Vue.mixin({
created () {
console.log('created from global Vue mixin')
},
mixins: [mixinGlobal_child]
})
var options = {
el: '#app',
data () {
return {
msg: 'hello world'
}
},
created () {
console.log('created from root')
}
}
var myVue = new Vue(options)
</script>
</html>
// 這里和上面一樣，還是合并所有的mixin字段，直到?jīng)]有為止，但是這里有個(gè)疑問
// 全局混合的屬性在所有的組件里面都有的，但是這里沒有看到Vue用什么方法區(qū)分的?。?！
<p style="font-weight: bold;margin-bottom: 10px;color: #FF0000">剩下的幾個(gè)問題</p>
Vue.set = set // 涉及到Vue的數(shù)據(jù)響應(yīng)式系統(tǒng)，先保留
Vue.delete = del // 涉及到Vue的數(shù)據(jù)響應(yīng)式系統(tǒng)，先保留
Vue.nextTick = util.nextTick // 水平有限，看不懂 - -#
initExtend(Vue) // 水平有限，看不懂 - -#
extend(Vue.options.directives, platformDirectives) // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents) // 水平有限，看不懂 - -#
Vue.prototype.__patch__ // 水平有限，看不懂 - -#
compileToFunctions // 水平有限，看不懂 - -#
const extendsFrom = child.extends // 水平有限，看不懂 - -#
