vue v-model 的实现原理

前言

之前一直是面试前看看vue的响应式原理，一直以为响应式原理就是v-model的实现原理，直到一次阅读文档发现之前的理解都是错误的，这才开始重新学习一下这个知识点，并且自己手写实现了一个input的v-model，才理解到其中的实现原理，（也就是面试中尝尝遇到的手写一个v-model）,在这里记录下来，方便自己学习和使用。

废话少说，直接上知识。这里我会用自己写的demo详细介绍，一看就懂得那种哦。

v-model 呢其实是 <input type="text" :value="testMessage" @input="testMessage = $event.target.value">的语法糖，它实际上做了两件事情：

• 1,绑定数据(在 <input type=“text” :value=“testMessage” ）
• 2，触发input的输入事件(也就是监听) (<input type=“text” :value=“testMessage” @input=“testMessage = $event.target.value”>)
  也就是说v-model就是：（下边是我写的一个小demo，有助于理解，主要是上手一遍，理解更深刻）

<template>
<div class="test-model-essure">
<p>这里是input输入框输入时响应的文本</p>
<p>{{ testMessage }}</p>
<input
type="text"
placeholder="这是input输入框"
:value="testMessage"
@input="emitInput"
/>
</div>
</template>
<script>
export default {
data() {
return {
testMessage: "",
};
},
methods: {
emitInput($event) {
this.testMessage = $event.target.value;
},
},
};
</script>
<style lang="scss" scoped>
.test-model-essure {
position: fixed;
bottom: 0px;
width: 100%;
p,
input {
width: 100%;
height: 30px;
border: 1px solid red;
display: flex;
align-items: center;
}
}
</style>

结束语

如果想理解的更深，可以把demo跑起来，自己动手操作一遍，看看是不是p标签中的testMessage是否跟输入框输入的内容实时变化。总结一下就是，要更深刻的理解某个原理，不能只是看官方文档，自己动手实现一次会理解的更深刻。

最后

以上就是开朗网络为你收集整理的vue v-model 的实现原理的全部内容，希望文章能够帮你解决vue v-model 的实现原理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。