Vue2改Vue3简单操作

1. template标签里的内容不用修改

2. 更改script标签

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

3. 定义变量的不同

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

<script>
export default {
data () {
return {
      loginForm: {
        username: "",
        password: "",
        code: "",
        rpassword: ""
      },
       passwordType: "password"
}
}
</script>

而在vue3里我们使用ref()定义简单数据类型，reactive()定义复杂数据类型
上述的变量即可定义为：

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const loginForm=reactive({
  username: "",
  password: "",
  code: "",
  rpassword: ""
})
const passwordType=ref("password")

在这里选择使用ref定义变量，则上述代码可以写成

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const loginForm=ref({
  username: "",
  password: "",
  code: "",
  rpassword: ""
})
const passwordType=ref("password")

在<script>标签里，若是vue2，可以直接使用this.passwordType调用这个变量，但是在vue3中不可以使用this，在调用变量时，如果使用的是ref定义的变量，则直接用passwordType.value即可调用，如：

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

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

4. 定义方法（函数）的不同

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

<script>
export default {
data () {
return {
      loginForm: {
        username: "",
        password: "",
        code: "",
        rpassword: ""
      },
       passwordType: "password"
}
}
methods: {
showPassword () {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    }
}
</script>

在vue3中，直接定义即可

<script setup>
import {getCurrentInstance, ref, reactive} from 'vue'
const loginForm=ref({
  username: "",
  password: "",
  code: "",
  rpassword: ""
})
const passwordType=ref("password")

const showPassword = () => {
  passwordType.value === ""
      ? (passwordType.value = "password")
      : (passwordType.value = "");
}

5. vue3该如何使用this

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

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

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

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