更加底層的 render 函數 · vue筆記

[TOC] >[success] # 更加底層的 render 函數本章講解一下 **render 函數** ，它是 **vue** 中 **比較底層** 的一塊內容，來簡單的了解一下。我們封裝了一個 **title 組件**，我們的 **title 組件** 中有一個 **h1 標簽**，但是這個 **h幾的標簽** ，我們想 **通過外部傳遞的參數來控制** ，那我們肯定第一印象是 **通過 props 傳入一個值來進行判斷來顯示對應的h幾的標簽** ，我們通過 **template** 以及 **render 函數** 來實現此效果，代碼如下： >[success] ## template 實現 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更加底層的 render 函數</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // render function //?template?->?render?->?h?->?虛擬DOM(JS?對象)?->?真實DOM?->?展示到頁面上 const app = Vue.createApp({ template: ` <my-title :level="2"> hello </my-title > ` }) app.component('my-title', { props: ['level'], template: ` <h1 v-if="level === 1"><slot /></h1> <h2 v-if="level === 2"><slot /></h2> <h3 v-if="level === 3"><slot /></h3> <h4 v-if="level === 4"><slot /></h4> <h5 v-if="level === 5"><slot /></h5> <h6 v-if="level === 6"><slot /></h6> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## render 函數實現通過 **render 函數** ，就可以實現非常多的代碼實現的功能，而且很簡單， **render 函數** 與 **template** 之間的關系是什么呢，實際上 **template** 在 **底層被編譯之后** ，會 **生成這個 render函數**，這個 **render 函數** 它里面調用 **vue** 的 **h 方法** 去 **返回一個內容** ，這個內容實際上是 **vue** 中一個叫做 **虛擬dom** 的一個東西，**虛擬dom是什么呢，它實際上是 dom 節點的一個 js對象的表述** ~~~ // 真實的dom的樣子 <div>hello</div> // 虛擬dom的樣子（虛擬dom就是js對象，它是對真實dom對象的一個映射） { tagName: 'div', text: hello, attributes: {} } ~~~ 上面的 **真實的 div 會被映射成下面這個虛擬dom** ， **vue** 里面把 **template** 變成 **render 函數** ， **render 函數** 再去返回一個 **虛擬 dom** ，它的意義在于什么呢，它有 **2個好處** ： 1. **它可以讓vue的性能更快** 2. **它可以讓vue具備一個跨平臺的能力，不僅可以寫網頁上的東西，還可以通過weex這樣的開發工具，去編寫移動端的一些代碼** ，所以說 **虛擬 dom** 它的作用還是很大的，但是它是一個 **比較深的內容** ，如果大家感興趣可以查閱相關內容。 **h 函數** 就是返回 **虛擬dom 節點** 的一個 **函數**， **第一個參數是告訴虛擬 dom的標簽是什么，第二個參數是標簽的屬性，第三個參數是標簽的內容** 。上面說了一些 **虛擬dom** 的內容，下面看一下使用 **render 函數** 實現的效果。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更加底層的 render 函數</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // render function //?template?->?render?->?h?->?虛擬DOM(JS?對象)?->?真實DOM?->?展示到頁面上 const app = Vue.createApp({ template: ` <my-title :level="5"> hello dell </my-title > ` }) app.component('my-title', { props: ['level'], // 用render實現的代碼 render(){ // 引入h函數 const { h } = Vue; // 參數1：標簽名字 // 參數2：屬性 // 參數3：內容 // 在render函數里面或者在vue的其他函數里面， // 通過this.$slot能獲取到slot的相關內容， // 如果調用默認插槽中的內容可以通過this.$slots.default()來獲取 return h('h' + this.level, {}, this.$slots.default()) } // 原來的代碼 // template: ` // <h1 v-if="level === 1"><slot /></h1> // <h2 v-if="level === 2"><slot /></h2> // <h3 v-if="level === 3"><slot /></h3> // <h4 v-if="level === 4"><slot /></h4> // <h5 v-if="level === 5"><slot /></h5> // <h6 v-if="level === 6"><slot /></h6> // ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## render 函數嵌套 **h函數** 可以 **深層次嵌套** ，這樣就可以生成自己想要的結構。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更加底層的 render 函數</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // render function // template -> render -> h -> 虛擬DOM(JS 對象) -> 真實DOM -> 展示到頁面上 const app = Vue.createApp({ template: ` <my-title :level="1"> hello dell </my-title > ` }) app.component('my-title', { props: ['level'], render(){ // 引入h函數 const { h } = Vue; // 參數1：標簽名字 // 參數2：屬性 // 參數3：內容 // 在render函數里面或者在vue的其他函數里面， // 通過this.$slot能獲取到slot的相關內容， // 如果調用默認插槽中的內容可以通過this.$slots.default()來獲取 return h('h' + this.level, {}, [ this.$slots.default(), h('h4', {}, 'dell') ]) } }) const vm = app.mount('#root') </script> </html> ~~~