在 vue3 中，為了更好的實現多平臺應用，將渲染器的建立函式 createRenderer 方法單獨分離出來，不用像 weex 一樣，需要 fork 一下，然後去改原始碼。

下面以 canvas 為例：

1、首先我們引用 vue3

<script src="../dist/vue.global.js"></script>

2、然後將 createRenderer 方法解構出來

const { createRenderer } = Vue

3、用 createRenderer 方法編寫自己平臺的渲染方法

const renderer = createRenderer({
  
 
// 建立元素
  createElement(tag, isSVG, is) {
    return {tag}
  },
  // 插入元素
  insert(child, parent, anchor) {
    child.parent = parent
    if (!parent.childs) {
      parent.childs = []
    } else {
      parent.childs.push(child)
    }
    // 如果當前節點是畫布，執行繪畫邏輯
    if (parent.nodeType === 1) {
      draw(child)
    }
  },
  
 
// 元素屬性比較
  patchProp(el, key, prevValue, nextValue) {
    el[key] = nextValue
  }
  // 自己平臺其它更多的操作方法
  // ...
})

建立 canvas 的渲染方法

const draw = (el, noClear) => {
  if (!noClear) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }
  if (el.tag === 'bar-chart') {
    const { data } = el
    const barWidth 
 
= canvas.width / 10,
      gap = 20,
      paddingLeft = (data.length * barWidth + (data.length - 1) * gap) / 3,
      paddingBootom = 10;
    
      data.forEach(({ title, count, color }, index) => {
        const x = paddingLeft + index * (barWidth + gap)
        const y = canvas.height - paddingBootom - count
        ctx.fillStyle = color
        ctx.fillRect(x, y, barWidth, count)
      })
  }

  // 遞迴
  el.childs && el.childs.forEach(child => draw(child, true))
}

4、建立自己平臺 App 方法createCanvasApp

let canvas, ctx;

function createCanvasApp(App) {
  const app = renderer.createApp(App)
  app.config.isCustomElement = tag => tag === 'bar-chart'

  const mount = app.mount
  // 重寫mount方法，執行初始操作
  app.mount = function(selector) {
    canvas = document.createElement('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    document.querySelector(selector).appendChild(canvas)

    ctx = canvas.getContext('2d')

    mount(canvas)
  }
  // 返回app，以供鏈式呼叫及搖數優化
  return app
}

5、執行 createCanvasApp 方法

createCanvasApp({
  template: '#chart',
  data() {
    return {
      chartData: [
        { title: '青銅', count: 200, color: 'red' },
        { title: '白銀', count: 150, color: 'yellow' },
        { title: '黃金', count: 100, color: 'gray' },
        { title: '鑽石', count: 80, color: 'green' },
        { title: '王者', count: 50, color: 'gold' }
      ]
    }
  }
}).mount('#app')

模板及 dom 元素

<div id="app"></div>

<script type="text/x-template" id="chart">
  <bar-chart :data="chartData"></bar-chart>
</script>

這裡就簡單實現了跨平臺運用 vue3。