Advanced Vue 3 Techniques: createVNode, render, JSX/TSX, Dependency Injection, Composition API, and Global Component Registration

Vue 3 has become the default version with a complete Chinese documentation, offering developers many powerful APIs. The article starts by demonstrating how createVNode and render can be used to build a modal component without relying on template‑based registration, allowing the component to be mounted anywhere.

const message = {
  setup() {
    const num = ref(1)
    return { num }
  },
  template: `<div>
    <div>{{num}}</div>
    <div>这是一个弹窗</div>
  </div>`
}
const vm = createVNode(message)
const container = document.createElement('div')
render(vm, container)
document.body.appendChild(container.firstElementChild)

Next, the guide compares template syntax with JSX/TSX, highlighting JSX's flexibility, ability to write multiple components in one file, and its seamless integration with JavaScript logic. It provides a simple JSX component example:

export const renderFn = function (props, context) {
  return props.type == 1 ? <btn1>{context.slots.default()}</btn1> : <btn2>{context.slots.default()}</btn2>
}

The article then explains dependency injection in Vue using provide and inject. A parent component provides count and color, while a child component injects them and can emit events to modify the values, effectively replacing the need for a global store like Vuex.

// parent.vue
setup() {
  const count = ref(0)
  const color = ref('#000')
  provide('count', count)
  provide('color', color)
  function setColor(val) { color.value = val }
  return { count, setColor }
}
// child.vue
setup() {
  const count = inject('count')
  const color = inject('color')
  return { count, color }
}

Composition API is presented as the core of Vue 3, with examples showing how to replace the Options API using setup, reactive refs, computed properties, watchers, and lifecycle hooks. A reusable clipboard utility is built with useTimeoutFn, useEventListener, and useClipboard hooks.

export function useClipboard(options = {}) {
  const { navigator = window.navigator, read = false, copiedDuring = 1500 } = options
  const isSupported = Boolean(navigator && 'clipboard' in navigator)
  const text = ref('')
  const copied = ref(false)
  const timeout = useTimeoutFn(() => (copied.value = false), copiedDuring)
  async function copy(value = unref(source)) {
    if (isSupported && value != null) {
      await navigator.clipboard.writeText(value)
      text.value = value
      copied.value = true
      timeout.start()
    }
  }
  return { isSupported, text, copied, copy }
}

Global component registration is simplified by using Vue plugins. The plugin exports an install method that registers components via app.use(), avoiding repetitive app.component calls.

// plugins/index.js
export default {
  install: (app, options) => {
    // register components here
  }
}
// main.js
import Plugin from './plugins/index.js'
const app = createApp(Root)
app.use(Plugin)
app.mount('#app')

The <script setup> syntax sugar is introduced, reducing boilerplate and improving type inference. An example shows how to define a reactive message and a render function directly in the setup block.

<script setup>
import { ref, h } from 'vue'
const msg = ref('Hello World!')
const dynode = () => h('div', msg.value)
</script>
<template>
  <dynode />
  <input v-model="msg" />
</template>

Finally, the updated v-model syntax in Vue 3 is covered, showing how to bind custom props (e.g., title) and emit update:title events for two‑way binding.

// parent.vue
<child v-model:title="pageTitle" />
// child.vue
props: ['title'],
emits: ['update:title'],
setup(props, { emit }) {
  function setInput(e) { emit('update:title', e.target.value) }
  return { setInput }
}

These patterns collectively enable developers to write cleaner, more reusable Vue 3 code and accelerate development productivity.