在剛剛接觸vue3.0的時候我們的setup基本都是這樣寫的，也必須返回之後模板才能使用變數或者函式

//型別是ts型別
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  components:{},
  setup(){
    return{
      
    }
  }
})
</script>

後來出現了直接把setup寫在script標籤裡面,這樣寫的好處很多比如我們不用在返回各種資料模板就可以正常使用，但是有很多東西不能像上面那樣使用，詳見官網
官網連結：https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95

<script lang="ts" setup>
import { reactive, ref } from "vue";
const form = reactive({
  name: "",
  password: "",
});
const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input your name",
      trigger: "change",
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: "小寫字母和數字組成，長度在5-10之間",
    },
  ],
  password: [
    {
      required: true,
      message: "Please input your password",
      trigger: "change",
    },
  ],
});
const loginAction = () => {
  console.log("真正開始登入");
};
const value1 = ref("1234");
defineExpose({
  value1,
});

</script>
 

我再這裡出現了這樣一個問題，就是父元件再使用ref獲取子元件的例項物件的時候，一直獲取不到。原因就是因為使用了setup語法糖，子元件必須用defineExpose來暴露傳出來的資料，使用defineEmits來暴露方法。詳見官網https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-%E5%92%8C-defineemits