vue3使用vue2写法
Vue3和Vue2在语法上差异较大，但Vue3也提供了一种兼容Vue2写法的方式，即透过Vue2的选项式API实现。
首先，在Vue3项目中安装@vue/composition-api:
npm install @vue/composition-api
vue中reactive
然后在main.js中进行设置：
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
最后，在组件中引入@vue/composition-api的相关钩子即可使用Vue2的选项式API，例如：
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script>
import { reactive, computed } from '@vue/composition-api'
export default {
  data() {
    const state = reactive({
      count: 0
    })
    const increment = () => {
      unt++
    }
    const doubledCount = computed(() => {
      unt * 2
    })
    return {
      ...state,
      increment,
      doubledCount
    }
  }
}
</script>
上述代码与Vue2的写法基本一致，只不过在data()返回值中使用了reactive方法来代替原来的data属性，并且使用了@vue/composition-api提供的computed和reactive钩子。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。