原创的~Vue.js

4.最俗学习之-Vue源码学习-合并策略(上)

2018-02-05  本文已影响4人  木子tar

源码地址

先说下上一篇留下的问题


if (child.mixins) {
  for (let i = 0, l = child.mixins.length; i < l; i++) {
    let mixin = child.mixins[i]
    if (mixin.prototype instanceof Vue) {  // 这个if暂时不明白功能作用，一般的用法都不会走这里
      mixin = mixin.options
    }
    parent = mergeOptions(parent, mixin, vm)
  }
}

// 这段代码就是把传入的每一项mixins遍历，然后执行mergeOptions合并，mixin只能是数组的形式，所以，
// 这里就是对mixin的一个递归调用，知道后面没有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的字段进行合并，关键在于对于data，created还有其他的属性等等的合并方法，
// 不同的字段属性用不同的方法，这个才是Vue合并策略的重点，也就是这一段

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)
}

// 而重点在于先前说过的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 () {  // 这里加上个s复数
    do something...
  },
  directives: function mergeAssets () {  // 这里加上个s复数
    do something...
  },
  filters: function mergeAssets () {  // 这里加上个s复数
    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...
  }
}

下一篇则重点学习这个，在这先把之前留下的一个问题解决

src\core\global-api\mixin.js


export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
  }
}

// 这个this.options便是之前说过的Vue.options

Vue.options = {
  components: {
      KeepAlive,
      Transition,
      TransitionGroup
  },
  directives: {
      model,
      show
  },
  filters: {},
  _base: Vue
}

// 比如下面这个例子

<!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字段，直到没有为止，但是这里有个疑问
// 全局混合的属性在所有的组件里面都有的，但是这里没有看到Vue用什么方法区分的！！！

<p style="font-weight: bold;margin-bottom: 10px;color: #FF0000">剩下的几个问题</p>


Vue.set = set                       // 涉及到Vue的数据响应式系统，先保留
Vue.delete = del                    // 涉及到Vue的数据响应式系统，先保留
Vue.nextTick = util.nextTick        // 水平有限，看不懂 - -#
initExtend(Vue)                     // 水平有限，看不懂 - -#


extend(Vue.options.directives, platformDirectives)  // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents)  // 水平有限，看不懂 - -#
Vue.prototype.__patch__                             // 水平有限，看不懂 - -#
compileToFunctions                                  // 水平有限，看不懂 - -#


const extendsFrom = child.extends                   // 水平有限，看不懂 - -#
上一篇 下一篇

猜你喜欢

热点阅读