vant版本,vant vue3.0,vant-uploader,vant怎么安装,vant-cli,vant dialog
Vant4 是一款基于 Vue.js 的 UI 组件库，其从 v3 升级到 v4 主要有以下变化：

1. 采用 TypeScript：Vant4 使用 TypeScript 重写了所有组件，提高了代码的健壮性和可维护性。

2. 支持 Vue 3：Vant4 支持 Vue 3，并针对 Vue 3 做了优化，例如使用了 Vue 3 的响应式系统。

3. 修改组件 API：在 Vant4 中，一些组件的 API 发生了变化，例如 Picker 组件中 props 的命名方式从 3.x 的 camelCase 改为 kebab-case。

4. 移除 i18n 插件：在 Vant4 中，移除了原先的 i18n 插件，改为通过传递翻译函数实现多语言支持。

5. 其他改进：Vant4 还进行了其他方面的改进，例如优化了样式、增加了新组件等。

下面是一个例子，在 Vant3 和 Vant4 中使用 Picker 组件的 API 对比：

Vant3：

html
<van-picker :value="value" :columns="columns" @change="onChange" />


js
export default {
data() {
return {
value: [],
columns: [
{ values: ['杭州', '宁波', '温州'] },
{ values: ['西湖区', '余杭区', '滨江区', '萧山区'] },
{ values: ['第一街道', '第二街道', '第三街道'] },
],
};
},

methods: {
onChange(picker, value) {
console.log(value);
},
},
};


Vant4：

html
<van-picker v-model="value" :columns="columns" @change="onChange" />


js
export default {
data() {
return {
value: [],
columns: [
{ text: '杭州', value: 'hangzhou' },
{ text: '宁波', value: 'ningbo' },
{ text: '温州', value: 'wenzhou' },
],
};
},

methods: {
onChange(value) {
console.log(value);
},
},
};


可以看到，Vant4 中 Picker 组件的 props 和事件名称发生了变化，并且也支持对象数组形式的数据。