先前写过小程序,语法比较接近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

标签: none

添加新评论