<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看