前注：
創(chuàng)新互聯(lián)堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十多年網(wǎng)站建設經(jīng)驗創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營銷服務商,為您提供網(wǎng)站制作、做網(wǎng)站、網(wǎng)站設計、H5技術(shù)、網(wǎng)站制作、品牌網(wǎng)站制作、小程序設計服務,給眾多知名企業(yè)提供過好品質(zhì)的建站服務。
版本限制：
Vue.js 2.0+
1.0無法使用
沒耐心，只關(guān)心有什么用的，想知道其大概是獲取什么東西后生成的，可以直接看結(jié)尾的總結(jié)
非使用render方法的情況
完整代碼：
Vue的render方法說明 Hello world!
代碼說明：
這樣的代碼有一個缺陷，就是需要寫大量重復的代碼，如從
使用render方法的情況
解決辦法就是render方法，全部代碼如下：
Vue的render方法說明 Hello world!
代碼說明：
1、這里的代碼和上面區(qū)別之處有兩點：
其一，沒有顯式的模板內(nèi)容，而是通過render方法生成；
其二，使用了createElement方法
2、關(guān)于createElement方法，他是通過render函數(shù)的參數(shù)傳遞進來的，這個方法有三個參數(shù)，
第一個參數(shù)主要用于提供dom的html內(nèi)容，類型可以是字符串、對象或函數(shù)。比如”div”就是創(chuàng)建一個
第二個參數(shù)（類型是對象）主要用于設置這個dom的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類，具體可以參考 官方文檔 里這一小節(jié)的說明
第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode）主要用于說是該結(jié)點下有其他結(jié)點的話，就放在這里。
比如說，有需要分發(fā)的標簽
個人初步理解是，在原本被替換的地方，例如例上面代碼中的
這個數(shù)組中則有兩個元素，分別是
另外，假如這2個元素中間有空格、換行符之類，那么數(shù)組中則有三個元素，那個空格、換行符則為第二個元素。這個屬性有點類似dom的 childNodes屬性，不是單純以標簽才算作子節(jié)點的。（但注意，不是完全相同）
有時候，我們可能想在里面添加其他的組件，例如將abc組件注冊在里面。那么，我們首先要注冊這個abc組件，然后將abc組件在數(shù)組里通過createElement來創(chuàng)建標簽，只有通過這樣的方式創(chuàng)建的abc標簽，才能被abc組件使用。單純輸入字符串 "
如以下代碼是可行的：（在通過render方法生成的模板中添加別的組件）
Vue的render方法說明
顯示結(jié)果是：
Hello
abc
world!
最后，如果想將原有內(nèi)容全部使用（而不是只取部分標簽），那么直接使用 this.$slots.default 作為第三個參數(shù)即可，他本身就是一個數(shù)組。
3、總而言之，createElement方法的作用就是動態(tài)的創(chuàng)建一個dom用于被render函數(shù)渲染，其中參數(shù)二和參數(shù)三可以選擇性省略，參數(shù)二用于設置dom的樣式、屬性、事件等，參數(shù)三用于設置分發(fā)的內(nèi)容，包括新增的其他組件。
粗略理解的話，可以理解為：createElement( 標簽名, 標簽屬性, 標簽里的內(nèi)容)
這樣的話，我們就有了一個組件的模板所需要的全部內(nèi)容了
總結(jié)
1、render方法的實質(zhì)就是生成template模板；
2、通過調(diào)用一個方法來生成，而這個方法是通過render方法的參數(shù)傳遞給他的;
3、這個方法有三個參數(shù)，分別提供標簽名，標簽相關(guān)屬性，標簽內(nèi)部的html內(nèi)容
4、通過這三個參數(shù)，可以生活曾一個完整的模板。
備注：
1、render方法可以使用JSX語法，但需要Babel plugin插件；
2、render方法里的第三個參數(shù)可以使用函數(shù)來生成多個組件（特別是如果他們相同的話），只要生成結(jié)果是一個數(shù)組，且數(shù)組元素都是VNode即可
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
重慶分公司
重慶分公司
