十分钟快速上手vue3

<template>
    <div> {{ data }}</div>
    <div> {{ copyData }} </div>
    <div> {{ formData.code }}</div>
    <button @click="handleAdd">add</button>
    <button @click="handleRoute">route</button>
</template>

<script lang="ts">
    import { defineComponent, ref, Ref, watch, reactive, toRefs } from 'vue'
    import router from '@/router'
    import store from '@/store'
    export default defineComponent({
　　　　　props: {

　　　　　　　　　storeModelName: {
　　　　　　　　　　type: String,
　　　　　　　　　　default: ''
　　　　　　　　}

　　　　　　

        setup(props, content) {
            console.log(props, content)
            console.log(props.storeModelName) // 接收父组件传进来的值
            let data  = ref(1)
            let copyData = ref(1)
            let form = reactive({
                formData : {
                    code: 1,
                    name: ""
                }
            })
            watch(data, (V, O) => {
                console.log(V, O)
                copyData.value = V
            })
            let handleAdd = () => {
                data.value++;
　　　　　　　　　　// 向父组件传参
　　　　　　　　　　context.emit('eventIsNum', 888)
　　　　　　　}
            const handleRoute = () => {
                router.push('/home')
            }

　　　　　　　let sum = computed(()=>{ 
   　　　　　　　　return data.value + copydata.value 
  　　　　　　}) 

return { data, handleAdd, copyData, ...toRefs(form), handleRoute, } } }) </script> <style> </style>

基本上简单的功能就都能实现啦

包括了父子组件传参、watch 、 computed、ref、 toRefs、reactive