Vue2模板

<template>
  <div>
    <h2> {{title}}</h2>
  </div>
</template>
<script>
export default {
    components:{}, //组件
    props:{
      title:String
    }, 
    data(){
      return{
        title:'Vue2'
      }
    },
    created() {},
    mounted(){},
    computed:{
      fullName(){
        return this.firstName+''+this.lastName;
      }
    },
    watch: {
      dataValue(newVal,oldVal) {}
    },
    methods:{
      getList(){
        let _this=this;
      },
    },
}
</script>

Vue3初期模板

<template>
  <div>
    <h2> {{title}}</h2>
  </div>
</template>
<script>
import {ref,reactive,onMounted,onUnmounted,defineComponent} from 'vue'
export default {
    components:{}, //组件
    props:{title:String}, 
    setup(){
      // 数据
      const state=reactive({
        userName:'',
        phone:conmputed(()=>{})
      });
      const numbertotal=()=>{
        // 计算数字总和
      };
      return {
        state,
        numbertotal,
      }
    }
}
</script>

Vue3 setup模板

<template>
  <div>
    <h2> {{title}}</h2>
    <img src="@/assets/logo.png" alt="">
  </div>
</template>
<script setup>
import {ref,reactive,onMounted,onUnmounted,defineComponent} from 'vue'
const count =ref(0);
const fooddata = reactive({name:"mcx",xh:"hohih"});

onMounted=(()=>{
  console.log(`this is ${count.value}`);
})

const numberAdd=()=>{
   // 计算数字总和
  count.value++;
  console.log(count.value,'count.value');
};

</script>