Vue3 支持三種組件寫法：
1. defineComponent+組合式API 2.<script setup>語法糖 3.選項(xiàng)式寫法與vue2寫法一樣
前面兩種是完全吻合typescript寫法，推薦使用第二種方法，簡潔清晰；第三種是javascript的寫法，vue3已經(jīng)全面支持typescript了,不建議使用了

一、defineComponent+組合式API

<template>
  <div>
    <h1 :style="{color:color}">{{title}}:{{count}}</h1>
    <a-button @click="btnClick" type="primary">點(diǎn)擊</a-button>
  </div>
</template>

<script>

import {computed, defineComponent, ref, toRefs} from "vue";

export default defineComponent({
  name:"DefineComponent",
  components:{},
  props:{
    title:{
      type:String,
      required:true
    },
    init: {
      type: Number,
      default: 10
    }
  },
  emits: [],
  setup(props, context) {
    const count = ref(props.init)
    const btnClick = function (){
      count.value++;
    }
    const color = computed(()=> (count.value > 12) ? "red": "black")
    return {
      count,
      btnClick,
      color,
    }
  }
})

</script>

引用組件：

 <define-component title="defineComponent click count" :init="10"></define-component>

執(zhí)行 setup 時(shí)，你只能訪問以下 property： props attrs slots emit
將無法訪問一下組件選項(xiàng) data computed methods refs (模板 ref)

Vue3.x新增了以下核心特性：

1.組合式API+setup入口

組合式API主要是為提取可重用的代碼段，提高應(yīng)用的可維護(hù)性和靈活性,而setup 函數(shù)是組合式API的入口

• setup 調(diào)用發(fā)生在組件創(chuàng)建之前，props解析完成之后，無法直接使用this
• setup 選項(xiàng)是一個(gè)接收 props 和 context 的函數(shù)，setup 返回的所有內(nèi)容都暴露給組件的其余部分 (計(jì)算屬性、方法、生命周期鉤子等等) 以及組件的模板
• setup 注冊生命周期鉤子，組合式 API 上的生命周期鉤子與選項(xiàng)式 API 的名稱相同，但前綴為 on：即 mounted 變成 onMounted

2.ref、reactive、toRef、toRefs、unref 區(qū)別

• ref 和 reactive 都是用來定義響應(yīng)式數(shù)據(jù)的，ref更推薦定義基本數(shù)據(jù)類型，reactive更推薦定義復(fù)雜類型

• ref 定義的數(shù)據(jù)，訪問是需要多一個(gè).value

const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
count.value++
state.foo++
console.log(count.value) // 1
console.log(state.foo) // 2

• toRefs 與 unref 都是將響應(yīng)式對象轉(zhuǎn)成普通對象(解構(gòu))，toRefs針對的是復(fù)雜對象，unref針對基礎(chǔ)數(shù)據(jù)類型
• toRefs 解構(gòu)完成對象的屬性還具有響應(yīng)式，對象的屬性是ref，而unref 解構(gòu)后就不具有響應(yīng)性

const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
console.log(unref(count)); // 輸出0
const state1 = toRefs(state);
const showFoo = state1.foo; // showFoo是ref對象
showFoo.value++
console.log(state1); //輸出state對象

• toRef 為源響應(yīng)式對象上的某個(gè) property 新創(chuàng)建一個(gè) ref

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3

詳細(xì)查看官網(wǎng)：https://v3.cn.vuejs.org/api/refs-api.html

二、<script setup>語法糖

<template>
  <div>
    <h1 :style="{color:color}">{{title}}:{{count}}</h1>
    <a-button @click="btnClick" type="primary">點(diǎn)擊</a-button>
  </div>
</template>
<script lang="ts">
  export default {
    name:"SetupViewTest"
  }
</script>
<script setup lang="ts">
import {computed, ref, toRefs} from "vue";

  const props = defineProps({
    title:{
      type:String,
      required:true,
    },
    init:{
      type:Number,
      default:8,
    },
  });
  const emit = defineEmits([]);
  const count = ref(props.init);
  const btnClick = function (){
    count.value++;
  };
  const color = computed(()=> (count.value > 12) ? "red": "black");
</script>

引用組件：

 <setup-view-test title="setup click count" :init="8"></setup-view-test>

1.<script setup>語法糖其實(shí)是上面defineComponent方式的簡寫
2.無法對組件的name進(jìn)行定義，可以采用以下兩種方式定義name

• 1.增加<script>塊

<script lang="ts">
  export default {
    name:"SetupViewTest"
  }
</script>

• 2.安裝三方插件unplugin-vue-define-options

npm install unplugin-vue-define-options --save-dev

defineOptions({
    name: 'SetupViewTest',
});

三、選項(xiàng)式寫法 與vue2寫法一樣

<template>
  <div>
    <h1 :style="{color:color}">{{title}}:{{count}}</h1>
    <a-button @click="btnClick" type="primary">點(diǎn)擊</a-button>
  </div>
</template>

<script>
export default {
  name:'Vue2Demo',
  props:{
    title:{
      type:String,
      required:true,
    },
    init:{
      type:Number,
      default:8
    }
  },
  data() {
    return{
      count: this.init,
    }
  },
  methods:{
      btnClick:function (){
        this.count++;
      }
  },
  computed:{
    color:function (){
        return  (this.count > 10) ? "red": "black";
    }
  }
}
</script>

引用組件：

<vue2-demo title="click count" :init="6"></vue2-demo>