<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>
java render是什麼？讓我們一起來了解一下吧！
Java render是是組件渲染的重要內容，render函數與template模板開發一樣，只不過這種方式的開發，render更比較接近底層，這樣便可以使Vue編譯時少轉換一次。
一.render函數的返回數值是一個VNode -> "virtual node"虛擬節點
二.render函數的參數是一個createElement函數
三．createElement 函數的參數（三個）
實戰演練，具體步驟如下所示：
/** * render: 渲染函數 * 參數: createElement * 參數類型: Function */ render: function (createElement) { let _this = this['$options'].parent // 我這個是在 .vue 檔案的 components 中寫的，這樣寫才能訪問this let _header = _this.$slots.header // $slots: vue中所有分發插槽，不具名的都在default裏 /** * createElement 本身也是一個函數，它有三個參數 * 返回值: VNode，即虛擬節點 * 1. 一個 HTML 標籤字元串，組件選項對象，或者解析上述任何一種的一個 async 異步函數。必需參數。{String | Object | Function} - 就是你要渲染的最外層標籤 * 2. 一個包含模板相關屬性的數據對象你可以在 template 中使用這些特性。可選參數。{Object} - 1中的標籤的屬性 * 3. 子虛擬節點 (VNodes)，由 `createElement()` 構建而成，也可以使用字元串來生成“文字虛擬節點”。可選參數。{String | Array} - 1的子節點，可以用 createElement() 創建，文字節點直接寫就可以 */ return createElement( // 1. 要渲染的標籤名稱：第一個參數【必需】 'div', // 2. 1中渲染的標籤的屬性，詳情檢視文檔：第二個參數【可選】 { style: { color: '#333', border: '1px solid #ccc' } }, // 3. 1中渲染的標籤的子元素數組：第三個參數【可選】 [ 'text', // 文字節點直接寫就可以 _this.$slots.default, // 所有不具名插槽，是個數組 createElement('div', _header) // createElement()創建的VNodes ] ) }
