Vue模板編譯，生成render函數

testbird 發布于2019-08-26 10:39 / 2706人閱讀

摘要：模板轉換成瀏覽器認識的過程如下解析方法運行這里總結下第一步模板編譯成函數的方式，生成的函數都會加在實例的上或者原型上，調用實例的方法時被調用。

模板轉換成瀏覽器認識的HTML過程如下：

template -> AST render （compiler解析template）

AST render -> vNode (render方法運行)

vNode -> DOM (vdom.patch)

這里總結下第一步模板編譯成AST render函數的方式，生成的render函數都會加在vue實例的$options上或者$options原型上，調用實例的_render方法時被調用。可以看vue的源碼：

Vue.prototype._render = function () {
    var vm = this;
    var ref = vm.$options;
    var render = ref.render;
    var _parentVnode = ref._parentVnode;

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      );
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode;
    // render self
    var vnode;
    try {
      // There"s no need to maintain a stack becaues all render fns are called
      // separately from one another. Nested component"s render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm;
      vnode = render.call(vm._renderProxy, vm.$createElement);
    } catch (e) {
      handleError(e, vm, "render");
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== "production" && vm.$options.renderError) {
        try {
          vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e);
        } catch (e) {
          handleError(e, vm, "renderError");
          vnode = vm._vnode;
        }
      } else {
        vnode = vm._vnode;
      }
    } finally {
      currentRenderingInstance = null;
    }
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0];
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== "production" && Array.isArray(vnode)) {
        warn(
          "Multiple root nodes returned from render function. Render function " +
          "should return a single root node.",
          vm
        );
      }
      vnode = createEmptyVNode();
    }
    // set parent
    vnode.parent = _parentVnode;
    return vnode
  };
}

1. webpack打包工具，引入的"vue-template-compiler"編譯生成render函數

這也是在使用打包工具時，只需引入運行時的vue，如vue/dist/vue.runtime.esm.js

單文件 HelloWorld.vue

測試文件main.js

import HelloWorld from "./components/HelloWorld"
console.log("===========vue-template-compiler===========")
console.log(HelloWorld);

單文件HelloWorld.vue經過vue-loader處理，由vue-template-compiler編譯生成的render函數：

詳細內容如下圖，里面的_h, _c, _v, _s都是vue實例函數的簡稱

2. vue源碼完整版，vue全局API Vue.compile編譯生成的render函數

import Vue from "vue"

let templateHelloworld = `{{ msg }}`
// Vue完整版里的compiler
let vueCompilerResult = Vue.compile(templateHelloworld);
console.log("===========vue compiler===========")
console.log(vueCompilerResult);

這是一個匿名函數，with包裹作用域，_c同上，是vue實例的方法簡寫

3 用jsx寫render函數，經過編譯后的結果：

import Vue from "vue"
let jsxHellowWorld = new Vue({
  render: function(h){
    return(
      
        {msg}
      
    )
  }
})

console.log("===========jsx===========")
console.log(jsxHellowWorld.$options.render);

GPU云服務器云服務器模板預編譯 aspx 生成模板模板函數 T4模板生成其他類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106556.html

關于一些Vue的文章。（2）

摘要：原文鏈接我的，歡迎。這次想要分享的一篇文章是從一個奇怪的錯誤出發理解的基本概念。瞬間明白了，原來是函數，一個考驗編程能力的函數，比更接近編譯器。來看這里有一個小知識點被忽略在實例掛載之后，元素可以用訪問腦補會用到的場景中。。。原文鏈接我的blog，歡迎STAR。這次想要分享的一篇文章是：從一個奇怪的錯誤出發理解Vue的基本概念。這篇文章以Vue的兩種構建方式做為切入點，深入探討...

DirtyMind 2019-08-20 15:33 評論0 收藏0
Vue不同編譯輸出文件的區別

摘要：源碼是選用了作為，看的源碼時發現對應了不同的構建選項。這也對應了最后打包構建后產出的不同的包。第四種構建方式對應的構建腳本為不同于前面種構建方式這一構建對應于將關于模板編譯的成函數的單獨進行打包輸出。 Vue源碼是選用了rollup作為bundler，看Vue的源碼時發現：npm script對應了不同的構建選項。這也對應了最后打包構建后產出的不同的包。不同于其他的library，V...

awesome23 2019-08-21 11:54 評論0 收藏0
vue源碼閱讀之數據渲染過程

摘要：圖在中應用三數據渲染過程數據綁定實現邏輯本節正式分析從到數據渲染到頁面的過程，在中定義了一個的構造函數。一、概述 vue已是目前國內前端web端三分天下之一，也是工作中主要技術棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結。本文旨在梳理初始化頁面時data中的數據是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0
【Vue原理】Compile - 源碼版之從新建實例到 compile結束的主要流程

摘要：頁面這個實例，按理就需要解析兩次，但是有緩存之后就不會理清思路也就是說，其實內核就是不過是經過了兩波包裝的第一波包裝在中的內部函數中內部函數的作用是合并公共和自定義，但是相關代碼已經省略，另一個就是執行第二波包裝在中，目的是進行緩存寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 ...

CODING 2019-08-26 10:40 評論0 收藏0
【Vue源碼探究二】從 $mount 講起，一起探究Vue的渲染機制

摘要：的構造函數將自動運行啟動函數。我在閱讀源碼的過程中，發現源碼余行，而和模板編譯相關的代碼，則約有行左右。這個是創建的方法，作為第一個參數傳入。最后會返回一個節點。這個時候將賦值為這個節點，掛載完成 mount，意思為掛載。可以理解為將vue實例（邏輯應用），掛靠在某個dom元素（載體）上的一個過程。一、創建Vue實例時的渲染過程上一篇文章我們講到，在創建一個vue實例的時候(v...

LeanCloud 2019-08-20 16:40 評論0 收藏0