uni的vue程式碼是如何在微信小程式裡面執行的，對此比較感興趣所以去除錯學習了一波.

準備工作

// 在vue.config.js裡開啟非壓縮的程式碼
module.exports = {
  configureWebpack: config => {
    config.devtool = 'none'
    config.mode = 'development'
  }
}
// 執行時程式碼路徑  node_modules\@dcloudio\uni-mp-weixin\dist\index.js
// uni修改過後的vue程式碼路徑  node_modules\@dcloudio\vue-cli-plugin-uni\packages\mp-vue\dist\mp.runtime.esm.js

 

頁面初始化

不管是頁面還是元件，uni都是通過微信提供的全域性component方法來實現的，uni在原生的conponent基礎上做了一層代理

const MPPage = Page;
const MPComponent = Component;

if (!MPPage.__$wrappered) {
  MPPage.__$wrappered = true;
  // page 也做了代理，但是沒有使用（至少正常配置沒有使用）
  Page = function (options = {}) {
    initHook('onLoad', options);
    return MPPage(options)
  };
  Page.after = MPPage.after;

  Component = function (options = {}) {
    initHook('created', options);
    return MPComponent(options)
  };
}
 

對外暴露了createComponent, createPage 這2個方法，在生成的vue檔案裡會呼叫這2個方法，這2個方法的核心都是parseComponent

function createPage (vuePageOptions) {
  {
    // Component 是被包裹一次的wx原生方法
    return Component(parsePage(vuePageOptions))
  }
}

function createComponent (vueOptions) {
  {
    return Component(parseComponent(vueOptions))
  }
}
function parseBasePage (vuePageOptions, {
  isPage,
  initRelation
}) {
  const pageOptions = parseComponent(vuePageOptions);

  initHooks(pageOptions.methods, hooks$1, vuePageOptions);

  pageOptions.methods.onLoad = function (query) {
    this.options = query;
    const copyQuery = Object.assign({}, query);
    delete copyQuery.__id__;
    this.$page = {
      fullPath: '/' + (this.route || this.is) + stringifyQuery(copyQuery)
    };
    this.$vm.$mp.query = query; // 相容 mpvue
    this.$vm.__call_hook('onLoad', query);
  };

  return pageOptions
}

function parsePage (vuePageOptions) {
  return parseBasePage(vuePageOptions, {
    isPage,
    initRelation
  })
}
 

頁面互動