vue3 ref reactive toRefs onMounted

<template>
  <div class="add">
    <el-card class="add-container">
      <el-form ref="form1" :model="form" label-width="120px">
        <el-form-item required label="商品分类">
          <el-select v-model="form.category" required @change="categoryChange">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="商品名称">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script  lang="ts">
import { ref, defineComponent,reactive,toRefs, onMounted } from 'vue'
//ref定义基本数据类型 reactive 定义复杂的类型（【】,{}）
//在 vue2 中，我们通过 ref 为节点添加一个名称，然后用 this.$refs['节点名称'] 就可以获取到DOM节点 
// 在 vue3 中,   1.为节点添加一个 ref 名称
//              2.创建 ref 响应式常量并且与 DOM 节点名称一致 ，且值为 null
//              3.在 mounted 之后通过 常量的 value 即可获取到 DOM 节点
export default defineComponent({
  setup(){
    const state = reactive({
      form:{
        category:null,
        name:''
      },
      categoryList: [],

    })
    onMounted(()=>{
      // 模拟接口操作
      setTimeout(()=> {   
        state.categoryList = [
          {id:1,label:'果农',value:'gn'},
          {id:2,label:'服装',value:'fz'},
          {id:3,label:'鞋子',value:'xz'},
        ]
      },3000)
      
    })
    const categoryChange = (value)=>{
        console.log(value);//state.categoryList的value值
        
    }
    const onSubmit = ()=>{
      console.log(state.form);//{category: 'gn', name: '11'}
    }//提交
    return{
      ...toRefs(state),
      categoryChange,
      onSubmit
    }
  },
  
})

</script>

<style scoped>
  .add {
    display: flex;
  }
  .add-container {
    flex: 1;
    height: 100%;
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
  }
  .avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
  }
</style>