Vue2与Vue3组件语法区别

先前写过小程序，语法比较接近Vue2，最近开始学Vue3，在组件语法上有些区别

Vue2 的组件语法：

<template>
  HTML部分
</template>
<script>
export default {
    data() {
        return {
            is_loading: true
            //在此定义组件的变量
        }
    },
    methods: {
        getData: function () {}
        //在此定义组件的方法
    }
};
</script>

Vue3 组件语法：

<template>
  HTML部分
</template>
<script>
import { defineComponent, ref } from "vue"
export default defineComponent({
    setup() {
        return {
            is_loading: ref(true),
            getData: function () {}
            //在此定义组件的变量与方法，Vue3定义变量需要调用ref方法传入内容
        }
    }
});
</script>

测试发现Vue3可以使用Vue2的语法，如果使用了setup()定义变量与方法，但没有使用defineComponent()方法，在组件方法内输出this的结果会是undefined