用Vue Demi同时支持Vue2和Vue3的方法

使用Vue Demi同时支持Vue 2和Vue 3要点如下：

1. 引入 Vue Demi
   在使用 Vue 2 的项目中引入 Vue Demi 库，并与 Vue 进行关联，以支持 Vue 3 的生命周期和组合式 API。

import Vue from 'vue'
import { createComponent, reactive, toRefs } from 'vue-demi'

const App = createComponent({
  setup() {
    const state = reactive({
      text: 'Hello World'
    })
    return { ...toRefs(state) }
  }
})

new Vue({
  el: '#app',
  render: h => h(App)
})

1. 使用标准 API
   在使用 Vue Demi 的组件中使用标准的 Vue API，无需考虑 Vue 2 或 Vue 3 的版本差异。

import { createComponent, reactive, toRefs } from 'vue-demi'

export default createComponent({
  setup() {
    const state = reactive({
      text: 'Hello World'
    })
    const changeText = () => {
      state.text = 'Hello Vue 3'
    }
    return { ...toRefs(state), changeText }
  },
  template: `
    <div>
      <h1>{{ text }}</h1>
      <button @click="changeText">Change Text</button>
    </div>
  `
})

示例一、使用 Vue Demi 实现双向数据绑定：

<template>
  <div>
    <h1>{{ text }}</h1>
    <input v-model="text" />
  </div>
</template>
<script>
import { createComponent, reactive, toRefs } from 'vue-demi'

export default createComponent({
  setup() {
    const state = reactive({
      text: 'Hello World'
    })
    return { ...toRefs(state) }
  }
})
</script>

示例二、使用 Vue Demi 实现计数器：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { createComponent, reactive, toRefs } from 'vue-demi'

export default createComponent({
  setup() {
    const state = reactive({
      count: 0
    })
    const increment = () => {
      state.count++
    }
    return { ...toRefs(state), increment }
  }
})
</script>

通过以上示例可以看到，Vue Demi 可以使我们在同一个组件中轻松地同时支持 Vue 2 和 Vue 3，从而提高开发效率。