vue實例配置對象中el、template、render的用法

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

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

三者優(yōu)先級

render > template > el

el

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

template

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

render

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

三者的聯(lián)系

當Vue選項對象中有render渲染函數(shù)時，Vue構造函數(shù)將直接使用渲染函數(shù)渲染DOM樹
當選項對象中沒有render渲染函數(shù)時，Vue構造函數(shù)首先通過將template模板編譯生成渲染函數(shù)，然后再渲染DOM樹
當Vue選項對象中既沒有render渲染函數(shù)，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數(shù)

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

<!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: "這是通過el屬性獲取掛載元素的outerHTML方式渲染。",
        },
        template: "<div>這是template屬性模板渲染。</div>",
        render: function (h) {
          return h("div", {}, "這是render屬性方式渲染。");
        },
      });

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

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