vue2 转 vue3 代码详细介绍，如data数据转成ref、reactive

项目要升级到vue3版本，需要把转为，接下来会遇到很多问题，所以会不断的学习和记录所遇到的问题，后面就会经常更新vue3的知识，兄弟们可以关注一下，一起交流学习，一起成长。

template标签里的内容不用修改

更改script标签

为了方便写代码，在这里我们使用<script setup> <script>标签

定义变量的不同

vue2 中的 data() 内是用来定义变量的，如

<script>
export default {
data () {
return {
      form: {
        name: "",
        sex: "",
        age: ""
      },
       type: "1"
}
}
</script>

而在 vue3 里我们使用ref()定义简单数据类型，reactive()定义复杂数据类型

上述的变量即可定义为：

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const form=reactive({
   name: "",
   sex: "",
   age: ""
})
const type=ref("1")

在这里我建议不要用reactive声名数据类型，因为它不支持直接赋值，只能为里面的子对象赋值，可以根据自己需要选择，所以上述代码可以写成

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const form=ref({
   name: "",
   sex: "",
   age: ""
})
const type=ref("1")

在<script>标签里，若是vue2，可以直接使用调用这个变量，但是在vue3中不可以使用this，在调用变量时，直接用即可调用，如：

const exmaple=()=>{
  type.value=""
}

注：若在<template>内，不需要加.value，与vue2一样直接调用即可

定义方法（函数）的不同

在vue2中使用的是methods，在其中定义方法，如：

<script>
export default {
data () {
return {
      form: {
         name: "",
	     sex: "",
	     age: ""
      },
       type: "1"
}
}
methods: {
	isShow () {
      this.type=== "" ? (this.type= "1") : (this.type= "");
    }
}
</script>

在vue3中，直接定义即可

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const form=ref({
  name: "",
  sex: "",
  age: ""
})
const type=ref("1")

const isShow = () => {
  type.value === "" ? (type.value = "1") : (type.value = "");
}

vue3如何使用this

在vue2中我们总是使用this来调用相关属性，但是在vue3中没有this，所以我们使用getCurrentInstance()来获取上下文属性

const { proxy } = getCurrentInstance(); //获取上下文实例，proxy=vue2的this

当我们需要调用相关操作时，可以使用proxy直接调用，如：

proxy.$axios.post("/login",loginForm).then()

秒客网