vue-demi

简介: vue-demi

事物都是互相妥协的。就是冰山也会时而消融,时而重新凝聚。——爱默生

分享一个vue

https://github.com/vueuse/vue-demi

用来解决编写的代码在vue2vue3之间的兼容问题

安装:

npm i vue-demi

然后修改package.json,将vue@vue/composition-api添加到peerDependencies

{
  "dependencies": {
    "vue-demi": "latest"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-rc.1",
    "vue": "^2.0.0 || >=3.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  },
  "devDependencies": {
    "vue": "^3.0.0" // or "^2.6.0" base on your preferred working environment
  },
}

使用时,就从vue-demi

import { ref, reactive, defineComponent } from 'vue-demi'

例如这个例子:

https://github.com/vueuse/vue-demi/blob/main/examples/%40vue-demi/use-mouse/src/index.ts

import { ref, onMounted, onUnmounted } from 'vue-demi'
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = (e: MouseEvent) => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return {
    x,
    y
  }
}
相关文章
|
6月前
|
缓存 JavaScript 前端开发
Vue3带来了什么
Vue3带来了什么
67 0
|
3月前
|
JavaScript
Vue——initRender【八】
Vue——initRender【八】
37 1
|
3月前
|
JavaScript
Vue——initState【十】
Vue——initState【十】
18 1
|
5月前
|
JavaScript 前端开发 API
什么是vue
什么是vue
59 4
|
6月前
|
JavaScript 前端开发 算法
< 在Vue中,为什么 v-if 和 v-for 不建议一起使用 ? >
在Vue指令中,最经常被用于做逻辑操作的指令,莫过于 `v-if` 和 `v-for`。但是它们之间的能否一起使用呢? 这个问题有时候会被面试官问起,用于测试应试者对这两个指令的了解。 接下来,对 “ `为什么 v-if 和 v-for 不建议一起使用 ?` ” 问题进行讲解!
< 在Vue中,为什么 v-if 和 v-for 不建议一起使用 ? >
|
6月前
|
前端开发 JavaScript API
Vue3 五天速成(下)
Vue3 五天速成(下)
61 1
|
6月前
|
JavaScript 前端开发 编译器
Vue2跟Vue3的对比
Vue2跟Vue3的对比
88 0
|
6月前
|
JavaScript 前端开发 API
简单介绍一下vue
简单介绍一下vue
51 3
|
6月前
|
JavaScript
selectpicker 与vue整合
selectpicker 与vue整合
|
JavaScript 编译器 API
vue2 & vue3
### Vue 2和Vue 3之间的区别