vue3开发移动端使vantUI时遇到的问题理解总结，v-model理解

纸上得来终觉浅，绝知此事要躬行。
许多看文档查资料学到的知识，看似学会了，但往往是在实际开发中遇到问题后才真正理解的。
例如：在vue3开发移动端时，使用了vant组件库的vue3版本，用到了环形进度条
这里的写法换成了vue3的写法 v-model:current-rate="currentRate"
以前用v-model习惯了但并未真正理解，导致直接使用出现了问题。
参考文章
官方介绍

• v-bind
  动态地绑定一个或多个 attribute或一个组件 prop ，作为一个 DOM property 绑定而不是作为 attribute 绑定。
  Attributes 是指对象的附加信息。property 是描述对象的特征。
  缩写：
  参照

<img v-bind:src="imageSrc">	<div :class="{ red: isRed }"></div>

• v-model
  指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
  没有缩写

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

这里要注意 v-model本质上是一个语法糖

<ChildComponent v-model = "title" />
<ChildComponent :value = "title"  @input = "title = $event" />

效果相同
v-model实际上是传递一个属性value，然后接收一个input事件

• 而在VUE3中，取消了传递值类型限制，增加泛用性，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue。

<ChildComponent v-model = "title">

也就是这种写法的简写：

<ChildComponent :modelValue = "title" @update:modelValue = "title = $event">

为了增加可读性，可改写为

<ChildComponent v-model:title="title"  />
// 或者
<ChildComponent :title="title" @update:title = "title = $event" />