vue實(shí)例配置對(duì)象中el、template、render的用法

更新時(shí)間：2023年11月15日 09:31:27 作者：Wyyyy1024

這篇文章主要介紹了vue實(shí)例配置對(duì)象中el、template、render的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

三者優(yōu)先級(jí)

render > template > el

el

只在用 new 創(chuàng)建實(shí)例時(shí)生效
提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。
可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例
在實(shí)例掛載之后，元素可以用 vm.$el 訪問(wèn)

template

一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。
模板將會(huì)替換掛載的元素。
掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽

render

字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。
該渲染函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建 VNode

三者的聯(lián)系

當(dāng)Vue選項(xiàng)對(duì)象中有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)將直接使用渲染函數(shù)渲染DOM樹(shù)
當(dāng)選項(xiàng)對(duì)象中沒(méi)有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)首先通過(guò)將template模板編譯生成渲染函數(shù)，然后再渲染DOM樹(shù)
當(dāng)Vue選項(xiàng)對(duì)象中既沒(méi)有render渲染函數(shù)，也沒(méi)有template模板時(shí)，會(huì)通過(guò)el屬性獲取掛載元素的outerHTML來(lái)作為模板，并編譯生成渲染函數(shù)

進(jìn)行DOM樹(shù)的渲染時(shí)，render渲染函數(shù)的優(yōu)先級(jí)最高，template次之且需編譯成渲染函數(shù)，而掛載點(diǎn)el屬性對(duì)應(yīng)的元素若存在，則在前兩者均不存在時(shí)，其outerHTML才會(huì)用于編譯與渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="vapp-1">{{ info }}</div>
    <div class="vapp-2">{{ info }}</div>
    <div class="vapp-3">{{ info }}</div>
    <script src="./js/vue.js"></script>
    <script>
      new Vue({
        el: ".vapp-1",
        data: {
          info: "這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染。",
        },
        template: "<div>這是template屬性模板渲染。</div>",
        render: function (h) {
          return h("div", {}, "這是render屬性方式渲染。");
        },
      });

      new Vue({
        el: ".vapp-2",
        data: {
          info: "這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染。",
        },
        template: "<div>這是template屬性模板渲染。</div>",
      });

      new Vue({
        el: ".vapp-3",
        data: {
          info: "這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染。",
        },
      });
    </script>
  </body>
</html>
<!-- 結(jié)果-->
這是render屬性方式渲染。
這是template屬性模板渲染。
這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染。