源碼地址

這篇重點(diǎn)學(xué)習(xí)strat realizes目錄下的方法，主要就是學(xué)習(xí)Vue的合并策略

首先推薦兩位大神的文章，講解的十分到位

vue2.0源碼解讀之選項(xiàng)合并策略 optionMergeStrategies

vue源碼學(xué)習(xí)--合并策略對(duì)象mergeOptions

首先文件夾內(nèi)添加Vue.js文件，在最后面8470行加入了window.strats = strats這一段，這樣就可以使用這個(gè)方法了，通過這個(gè)文件夾的例子再參考兩位大神的文章就可以明白這幾個(gè)合并策略大概的功能了

到了這里，已經(jīng)跑題很遠(yuǎn)了，回到之前的地方

vm.$options = mergeOptions(
    // Vue.options
  {
      components: {
          KeepAlive,
          Transition,
          TransitionGroup
      },
      directives: {
          model,
          show
      },
      filters: {},
      _base: Vue
  },
  // 調(diào)用Vue構(gòu)造函數(shù)時(shí)傳入的參數(shù)選項(xiàng) options
  {
      el: '#app',
      data: {
          a: 1,
          b: [1, 2, 3]
      }
  },
  // this
  vm
)

// 這里只有el和data，而且parent沒有這兩個(gè)字段各不沖突，返回的結(jié)果參考合并策略方法，最后變成這樣

vm.$options = {
  _base: Vue,
  components: Object,
  data: mergedInstanceDataFn(),
  directives: Object,
  el: "#app",
  filters: Object
}

// 這里可以一個(gè)一個(gè)屬性添加上去，比如props，watch等等，慢慢對(duì)照著合并策略看最終的結(jié)果就能明白

// 然后這里涉及到ES6的proxy，攔截器的概念，還沒了解過，先擱著- -#

/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
  initProxy(vm)
} else {
  vm._renderProxy = vm
}


// 最后便是最主要的一幕了，網(wǎng)上的眾多教程也是從這里開始講起的，這個(gè)就是Vue數(shù)據(jù)響應(yīng)系統(tǒng)
// 到了這里Vue的引入初始化和一個(gè)小實(shí)例啟動(dòng)就有個(gè)大概的了解了，也還有眾多的問題留下

// 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">剩下的幾個(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                   // 水平有限，看不懂 - -#

initProxy(vm)                                       // 水平有限，看不懂 - -#