【笔记】Vue3的模板渲染

发表于 更新于 分类于 阅读次数：

前言

Vue3的模板渲染学习笔记

HTML文件模板渲染

通过JS渲染模板

  • 如果组件对象中定义了template属性，则template属性中的内容将作为HTML模板，挂载点内的所有内容将被HTML模板覆盖
1
2
3
4
5
6
7
8
9
<div id="app"></div>

<script>
  const root = {
    template: `<div></div>`
  };
  const app = Vue.createApp(root);
  app.mount("#app");
</script>

通过HTML渲染模板

  • 如果组件对象中没有定义template属性，则挂载点内的内容将作为HTML模板
1
2
3
4
5
6
7
8
9
10
11
<div id="app">
  <div></div>
</div>

<script>
  const root = {
    ...
  };
  const app = Vue.createApp(root);
  app.mount("#app");
</script>

Vue文件模板渲染

通过Vue的template渲染模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="">
    <div v-on:click="fn">key: {{ key }}</div>
    <div></div>
    <Son />
  </div>
</template>

<script>
  import Son from "@/components/Son.vue"
  
  export default {
    components: {
      Son: Son
    },
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      fn: function () {
        ...
      }
    }
  }
</script>

通过Vue的render渲染模板

OptionsAPI

第一个参数：必选，标签名
第二个参数：可选，属性对象（class属性可以改用className）
第三个参数：可选，子节点数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
  import { createVNode } from "vue"
  import Son from "@/components/Son.vue"
  
  export default {
    components: {
      Son: Son
    },
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      fn: function () {
        ...
      }
    },
    render: function () {
      return createVNode(
        "div",
        { className: "" },
        [
          createVNode(
            "div",
            { onClick: this.fn },
            `key: ${this.key}`
          ),
          createVNode("div"),
          createVNode(Son)
        ]
      );
    }
  }
</script>
  • 简写，h()当作createVNode()使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
  import { h } from "vue"
  import Son from "@/components/Son.vue"
  
  export default {
    components: {
      Son: Son
    },
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      fn: function () {
        ...
      }
    },
    render: function () {
      return h(
        "div",
        { className: "" },
        [
          h(
            "div",
            { onClick: this.fn },
            `key: ${this.key}`
          ),
          h("div"),
          h(Son)
        ]
      );
    }
  }
</script>

CompositionAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
  import { ref, createVNode } from "vue"
  import Son from "@/components/Son.vue"
  
  export default {
    setup: function () {
      
      const key = ref("value");

      const fn = function () {
        ...
      }
      
      return function () {
        return createVNode(
          "div",
          { className: "" },
          [
            createVNode(
              "div",
              { onClick: fn },
              `key: ${key.value}`
            ),
            createVNode("div"),
            createVNode(Son)
          ]
        );
      }
    }
  }
</script>
  • 语法糖，<template></template>中插入一个<render />组件，并在JS中定义render变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <render />
</template>

<script setup>
  import { ref, createVNode } from "vue"
  import Son from "@/components/Son.vue"

  const key = ref("value");
  
  const fn = function () {
    ...
  }
  
  const render = function () {
    return createVNode(
      "div",
      { className: "" },
      [
        createVNode(
          "div",
          { onClick: fn },
          `key: ${key.value}`
        ),
        createVNode("div"),
        createVNode(Son)
      ]
    );
  }
</script>

通过JSX渲染模板

VueCli环境配置

下载依赖
1
npm install -D @vue/babel-plugin-jsx
修改配置文件
babel.config.js
1
2
3
4
5
module.exports = {
  plugins: [
      "@vue/babel-plugin-jsx"
  ]
};

Vite环境配置

下载依赖
1
npm install -D @vitejs/plugin-vue-jsx
修改配置文件
vite.config.js
1
2
3
4
5
6
7
8
9
10
11
12
import { fileURLToPath, URL } from "node:url"

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import jsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [
      vue(),
      jsx()
  ]
})

渲染模板

OptionsAPI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script lang="jsx">
  import Son from "@/components/Son.vue"

  export default {
    components: {
      Son: Son
    },
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      fn: function () {
        ...
      }
    },
    render: function () {
      return (
        <div className="">
          <div onClick={ this.fn }>key: { this.key }</div>
          <div></div>
          <Son />
        </div>
      )
    }
  }
</script>
CompositionAPI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script lang="jsx">
  import { ref } from "vue"
  import Son from "@/components/Son.vue"
  
  export default {
    setup: function () {
      
      const key = ref("value");
      
      const fn = function () {
        ...
      }
      
      return function () {
        return (
          <div className="">
            <div onClick={ fn }>key: { key.value }</div>
            <div></div>
            <Son />
          </div>
        );
      }
    }
  }
</script>
  • 语法糖，<template></template>中插入一个<jsx />组件，并在JS中定义jsx变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <jsx />
</template>

<script lang="jsx" setup>
  import { ref } from "vue"
  import Son from "@/components/Son.vue"

  const key = ref("value");

  const fn = function () {
    ...
  }
  
  const jsx = function () {
    return (
      <div className="">
        <div onClick={ fn }>key: { key.value }</div>
        <div></div>
        <Son />
      </div>
    );
  }
</script>

完成