🎄 Vue、16 +方法でレンダリング

このブログの投稿では、16で何かをレンダリングする方法を示しますVue

🚀 では始めましょう

Talk is cheap. Show me the code.
― Linus Torvalds

ここでは、完全に再生することができます例です
https://github.com/iamandrewluca/vue-render-everywhere

🧰 必要条件
使っているVite この設定で

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

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js' } }
})

DOM要素を参照する場合、すべての例ではHTMLです

<script type="text/html" id="template-in-script">
  <li>The quick brown fox...</li>
</script>

🎁 Vueでレンダリングする方法
私は学習目的のためだけにこれらの方法を示しています.あなた自身のリスクで使用してください.

方法1 :template オプションstring

import { defineComponent } from "vue"

export default defineComponent({
  template: '<li>The quick brown fox...</li>'
})

方法2 :template セレクターとしてのオプション

import { defineComponent } from "vue"

export default defineComponent({
  template: '#template-in-script'
})

方法3 :template オプションとしてHTMLElement

import { defineComponent } from "vue"

export default defineComponent({
  template: document.querySelector('#template-in-script')
})

方法4:使用render オプションとh ファクトリー

import { defineComponent, h } from "vue"

export default defineComponent({
  render() {
    return h('li', 'The quick brown fox...')
  }
})

方法5:使用render オプションとcompile 機能

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('<li>The quick brown fox...</li>')
})

方法6:使用render オプションとcompile セレクタ付き関数

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('#template-in-script')
})

方法7:使用render オプションとcompile 機能付きHTMLElement

import { compile, defineComponent, h } from "vue"

const element = document.querySelector('#template-in-script')
export default defineComponent({
  render: compile(element)
})

方法8:使用setup 機能とh ファクトリー

import { h, defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => h('li', 'The quick brown fox...')
  }
})

方法9:使用setup and compile 機能

import { defineComponent, compile } from "vue"

export default defineComponent({
  setup() {
    return compile('<li>The quick brown fox...</li>')
  }
})

退屈?🤣 まだできていない🚗

方法10:関数コンポーネントとh ファクトリー

import { h } from "vue"

export default function () {
  return h('li', 'The quick brown fox...')
}

方法11⛔️ 機能コンポーネントとcompile 機能

JUST AN EXPERIMENT, DO NOT USE

import { compile } from "vue"

const compiled = compile('<li>The quick brown fox...</li>')
export default function () {
  return compiled({})
}

そして、ここでは、ほとんどのVUE開発者、単一のファイルコンポーネントによって使用されるメソッドがあります

方法12:SFCを使用するtemplate タグ

<template>
  <li>The quick brown fox...</li>
</template>

方法13:SFCを使用しないtemplate タグ

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  template: "<li>The quick brown fox...</li>",
})
</script>

実際にSFCを使用するときtemplate タグ、コンパイラtemplate to render 関数.
だから基本的には、あなたはtemplate タグと上記のメソッドのいずれかを使用します.
しかし、我々はまだしていません.もう3つの方法があります.
JSXを紹介します🤣


方法14:使用render オプションとJSX

import { defineComponent } from "vue"

export default defineComponent({
  render() {
    return <li>The quick brown fox...</li>
  },
})

方法15:使用setup 機能とJSX

import { defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => <li>The quick brown fox...</li>
  },
})

方法16 :機能コンポーネントとJSXの使用

export default function () {
  return <li>The quick brown fox...</li>
}

最後の1つは身近に見えますか?👀 フレンドになりたい人!
VueのJSXを持つ機能コンポーネントは、反応関数コンポーネントと同じです.

ここでは、完全に再生することができます例です
https://github.com/iamandrewluca/vue-render-everywhere
今日はこれで終わりです.私のブログ記事を読んでくれてありがとう!
決して学習を停止します.バイ!👋
カバー写真Joshua Eckstein on Unsplash