vue3+ts+antd-vue 踩坑之vue2用的好好的，复制到vue3+ts怎么连页面都不展示了呢

首先说一下，vue3也说明了很多情况，他将好多重用和概念类似的接口方法都取消了，保留了那些好用的方法

比如：

vue2+js写法：

<template>
    <div id="father">
<!-- 定义一个select-option -->       
        <a-select v-model="selectType">
            <a-select-option v-for="item in data" :value="item.value" :key="item.value">{{item.title}}</a-select-option>
        </a-select>
    </div>
</template>

<script>

//import ... from '...'
//.
//.

export default {
    data(){
        return{//定义变量区域
            selectType:[]
        }
    },
    methods(){//方法定义区域},
    created:{},//同下定义生命周期函数和watch和computed函数区域
}
</script>

<style scoped lang="less">
//模块样式区域
</style>

我们很容易发现，:value 和 :key 居然用的是同一个值，但是两个方法名还不一样，这样我们会想到，会不会他的实际用法却不一样呢，其实看过官方文档之后（），这两个东西就是一个东西，就是有value方法的话，那么我的选项给后台传的值(selectType)也就是value绑定的属性，如果没有value方法，那么就会取key的值给后台传(selectType)，其实是一样的；

那么如果，我们把上面的template中的代码直接复制到vue3+ts+antd-vue中的话

就会报错：

<template>
    <div id="father">
<!-- 定义一个select-option -->       
        <a-select v-model:value="selectType">
            <a-select-option v-for="item in data" :value="item.value" :key="item.value">{{item.title}}</a-select-option>
        </a-select>
    </div>
</template>

<script>
import { ref , defindComponent } from 'vue'

export default defindComponent {
    setup: function () {
        const selectType = ref< string | undefind >('')

        return{
            selectType
        }
    }
}
</script>

<style scoped lang="less">
//模块样式区域
</style>

写成这样之后，页面就会一直处于加载状态并且会报错：

提示的是vue-runtime文件报错：cannot read property 'value' of undefined

很明显这就是说value没有被定义在property中，但是报错文件却是runtime，vue的运行时的文件，这时，我人都傻了，因为value这个东西用的地方很多，默认认为是系统或者别的地方出错了

其实就是vue3+antd-vue（新版）将a-select中的‘:value’取消掉了，找不到value这个api，vue会一直处在runtime运行时状态，就会出现一直加载，或者不显示页面的问题

解决当然很简单，直接去掉value就可以了：

<template>
    <div id="father">
<!-- 定义一个select-option -->       
        <a-select v-model:value="selectType">
            <a-select-option v-for="item in data" :key="item.value">{{item.title}}</a-select-option>
        </a-select>
    </div>
</template>