【笔记】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
<template>
  <div></div>
</template>

通过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
<script>
  import { createVNode } from "vue"
  import Son from "@/components/Son.vue"
  
  export default {
    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
<script>
  import { h } from "vue"
  
  export default {
    render() {
      return h("div");
    }
  }
</script>

CompositionAPI

setup函数
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  import { ref, createVNode } from "vue"
  
  export default {
    setup: function (attrs, slots, emit) {
      const key = ref("value");
      
      return function () {
        return createVNode("div", {}, `key: ${key.value}`);
      }
    }
  }
</script>
setup语法糖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <render />
</template>

<script setup>
  import { ref, createVNode } from "vue"

  const key = ref("value");
  
  const fn = function () {
    ...
  }
  
  const render = function () {
    return createVNode("div", { onClick: fn }, `key: ${key.value}`);
  }
</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
<script lang="jsx">
  export default {
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      fn: function () {
        ...
      }
    },
    render: function () {
      return (
          <div onClick={ this.fn }>
            key: { this.key }
          </div>
      )
    }
  }
</script>
CompositionAPI
setup函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script lang="jsx">
  import { ref } from "vue"
  
  export default {
    setup: function () {
      
      const key = ref("value");
      
      const fn = function () {
        ...
      }
      
      return function () {
        return (
            <div onClick={ fn }>
              key: { key.value }
            </div>
        );
      }
    }
  }
</script>
setup语法糖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <jsx />
</template>

<script lang="jsx" setup>
  import { ref } from "vue"

  const key = ref("value");

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

完成