美文网首页原创的~Vue.js
5.最俗学习之-Vue源码学习-合并策略(下)

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

作者: 木子tar | 来源:发表于2018-02-05 19:27 被阅读37次

    源码地址

    这篇重点学习strat realizes目录下的方法,主要就是学习Vue的合并策略

    首先推荐两位大神的文章,讲解的十分到位

    vue2.0源码解读之选项合并策略 optionMergeStrategies

    vue源码学习--合并策略对象mergeOptions

    首先文件夹内添加Vue.js文件,在最后面8470行加入了window.strats = strats这一段,这样就可以使用这个方法了,通过这个文件夹的例子再参考两位大神的文章就可以明白这几个合并策略大概的功能了

    到了这里,已经跑题很远了,回到之前的地方

    
    vm.$options = mergeOptions(
        // Vue.options
      {
          components: {
              KeepAlive,
              Transition,
              TransitionGroup
          },
          directives: {
              model,
              show
          },
          filters: {},
          _base: Vue
      },
      // 调用Vue构造函数时传入的参数选项 options
      {
          el: '#app',
          data: {
              a: 1,
              b: [1, 2, 3]
          }
      },
      // this
      vm
    )
    
    // 这里只有el和data,而且parent没有这两个字段各不冲突,返回的结果参考合并策略方法,最后变成这样
    
    vm.$options = {
      _base: Vue,
      components: Object,
      data: mergedInstanceDataFn(),
      directives: Object,
      el: "#app",
      filters: Object
    }
    
    // 这里可以一个一个属性添加上去,比如props,watch等等,慢慢对照着合并策略看最终的结果就能明白
    
    // 然后这里涉及到ES6的proxy,拦截器的概念,还没了解过,先搁着- -#
    
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    
    
    // 最后便是最主要的一幕了,网上的众多教程也是从这里开始讲起的,这个就是Vue数据响应系统
    // 到了这里Vue的引入初始化和一个小实例启动就有个大概的了解了,也还有众多的问题留下
    
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    callHook(vm, 'beforeCreate')
    initState(vm)
    callHook(vm, 'created')
    initRender(vm)
    
    

    <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                   // 水平有限,看不懂 - -#
    
    initProxy(vm)                                       // 水平有限,看不懂 - -#
    
    

    相关文章

      网友评论

        本文标题:5.最俗学习之-Vue源码学习-合并策略(下)

        本文链接:https://www.haomeiwen.com/subject/jjvizxtx.html