v-model的实现原理

Posted 2023-04-19

参考技术A

vue中的v-model很好用，我们经常用它做双向绑定：

v-model其实是个语法糖，它实际上是做了两步动作：
1、绑定数据value
2、触发输入事件input
也就是说，v-model等同于：

明白了这一点非常有用，我们可以在自定义的input组件中使用它：

myinput.vue：

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是否跟输入框输入的内容实时变化。总结一下就是，要更深刻的理解某个原理，不能只是看官方文档，自己动手实现一次会理解的更深刻。