vue2-----＞vue3

最新推荐文章于 2024-08-30 20:29:15 发布

口啊乐

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量40

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45292837/article/details/129589753

版权

vue2传统写法

<script>
    export default {
        name: 'xx',// 组件名
        components: {},// 组件
 
        props: {},// 父组件传递来的值
 
        data() { // 声明变量的位置
            return {};
        },
 
        watch:{},// 监听器
 
        computed:{}, // 计算属性
 
        mounted() {}, // 生命周期钩子函数
 
        methods: {}// 方法
    };
</script>

vue3新写法

<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator';// ts装饰器
    import tabs from '@/components/Tabs.vue';
 
    @Component({
        components: {tabs},//组件引用
    })
    export default class Money extends Vue {// ts类组件声明
        // vue-property-decorator 装饰器写法
        @Prop({ default: 'default value' }) readonly propB!: string // Prop
 
        // vue-property-decorator 装饰器写法
        @Watch('child')// 监听器
        onChildChanged(val: string, oldVal: string) {} // 监听器相应方法
 
        get recordList() {} // 得到计算属性
 
        set recordList(value: string) {} // 声明计算属性
            
        mounted(): void {}// 钩子函数
            
        xxxx(value: string) {}// 方法，声明传入值必须为字符串
    }
</script>

<script>
import {XXX} from 'xxx';
export default {
  setup() {
    const state = reactive({
    })
    const xx = () =>{
    }
    return {
        state,
        xx,
    }
  }
}
</script>