引言

你真的了解v-model吗，它的api其实挺多的，如果你没有仔细看完官网，恐怕只知道v-model是用来收集表单数据的。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂，看完我这篇文章，你会熟悉更多关于v-model的使用。关于他的原理也是面试中常常会问到的问题，因此我也对其做了讲解。

用法

1.用来收集表单数据。用于复选框时需注意：用于复选框时存在特殊情况，当我们双绑的属性初始赋值为数组时，是收集value值，但如果初始值是" "，收集的就是checked值了。

2.v-model的修饰符，使用方式例：v-model.lazy。

lazy：当表单失去焦点时才收集数据，使得性能更好。

trim：去除内容的空格。

number：把内容转化为有效的数字。

3.在非表单的自定义组件上使用

<!--组件App-->
<A v-model='x' />
<p>{{x}}</p>
<script>
data(){return{x:0}}
</script>

<!-- 子组件a -->
<button @click="$emit('input',value+1)"> x++ </button>   <!--这里的input是规定写法-->

<!--这里偷个懒-->
<script>                        
props:['value'],             // value是规定写法，接收的是 v-model绑定的值         
created(){
console.log(this.value)        // 0
}
</script>

我们也可以使用选项model来自定义v-model绑定值的属性名和自定义事件名

<!--使用model选项后的子组件a-->
<button @click="$emit('change',t+1)">x++</button>
<script>
props:['t'],
model:{prop:'t',event:'change'},
}
</script>

vue3中v-model用法的改变

1.接收的属性名由value改为modelValue，更新prop的自定义事件由input变为update:modelValue

<!--组件App-->
<A v-model='x' />
<p>x:{{x}}</p>
<script>
const x=ref(0)
</script>

<!--子组件a-->
<button @click="$emit('update:modelValue',modelValue+1)"> model++ </button>
<script>
props:['modelValue'],
emits:['update:modelValue']
created(){
console.log(this.modelValue)        // 0
}
</script>

2.model选项被摈弃，请用 v-modle绑定属性来代替选项model，因此在vue3中一个组件可以有多个v-model绑定，在vue2中组件只能绑定一个v-model

<!--组件App-->
<A v-model:a='x' />
<script>
const x=ref(0)
</script>

<!--子组件a-->
<button @click="$emit('update:a',a+1)">model++</button>
<script>
props:['a'],
emits:['update:a']
created(){
}
</script>

3.新增自定义修饰符

<!--组件App-->
<A v-model.u='x' />
<!-- <A v-model:t.u='x' />  -->
<p>x:{{x}}</p>
<script>
const x=ref(0)
</script>

<!--子组件a-->
<button @click="$emit('update:modelValue',modelValue+1)">model++</button>
<!-- <button @click="$emit('update:t',t+1)">model++</button> -->
<script>
props:['modelValue','modelModifiers'],
emits:['update:modelValue'],
// props:['t','tModifiers'],
// emits:['update:t']
created(){
console.log(this.modelValue)        // 0
console.log(this.modelModifiers)    //  {u:true}
// console.log(this.tModifiers)    //  {u:true}
}
</script>

v-model原理

vue中模型的3个概念：m代表数据层，vm代表vue实例，v代表视图层。
设计原理是参考mvvm模型：模型的设计就是视图层和数据层的相互影响。
数据层如何影响视图层：数据层发生变化后会，数据层会通知vm更新，vm更新后，vm会通知视图更新。
视图层如何影响数据层：用户操作视图层后，vm会根据用户的操作更新数据层。
视图层如何影响数据层原理：vm会监听视图层中dom中值的变化，发现值变化后再去更新数据层。
数据层如何影响视图层原理：是通过数据劫持或者数据代理来实现的。如果想要详细了解vue的响应式数据原理，可以的参考我发的一篇文章 ——> vue响应式数据原理详解

结尾

总之，v-model相对于其他指令的用法还算挺多的。最后，感谢大家的观看，希望这篇文章能给你们带来一些帮助，如果有小伙伴有一些疑问或者建议，欢迎提出和分享。