vue原生input输入框原理剖析

2022-08-22 19:32:09 众衡网络科技

首先我们来看一段代码：

<input value="value">

这里是一个原生的input输入框，每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。

如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值。

只要用户输入了数据，那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据，所以我们获取到的都是最新的)。

现在我们来看上面的标签，我们为input标签添加了一个value属性，并且赋值'value'。其实在标签上设置value属性它的作用有两个：

在第一次创建input标签的时候，将对应的初始值展示到输入框中（在无该属性使输入框不展示任何数据）
使用value属性的初始值来初始化input.target.value（无该属性时input.target.value为空串）

上面的那段代码的意思是通过添加value="value"属性，初始化input.target.value的值并且将初始值展示到对应的输入框中

这里需要注明一点，在后续用户输入的操作中，输入框中的数据只是方便让用户看到自己输入了什么仅此而已。有人可以会有疑问，难道不是input.target.value里是什么所以输入框内就显示什么吗？其实不是的。

输入框显示什么和 input.target.value并没有直接联系，输入框内的显示只是方便用户自己看到自己输入了什么。

小结：

input中的value有两种：value="xxx" 和 input.target.value 我们需要知道两个分别有什么作用。在整个输入显示流程中，他们分别扮演什么角色。

现在我们来看在vue中的输入框，首先我们来看一段代码：

<input
   v-bind:value
   @input="value = $event.target.value"
/>
data(){
    return {
          value:'123'
    }
}

我们一般使用v-bind:value来给Input标签绑定一个vue中的的，这里我们绑定的是this.value。在这里v-bind:value === :value="value"。这样实现的原理比较简单。

首先我们定义了this.value因为将this.value绑定到了:value上，所以初始时会在输入框展示我们指定的值，即'123'。当我们输入数据之后，此时$envet.target.value(这里的$event.target.value就是input.target.value)就会存储我们最新的输入的值，然后将最新的值赋值给this.value。

因为this.value变化了，此时vue对页面进行更新，此时更新后的input的:value是最新值。

但是这里有一个问题，那就是<input>并不会被销毁重建，也就是说this.value = $event.target.value只是改变了this.value 若别的地方引用了this.value，那么就会同步改变。那么this.value的更新对:value="value"的影响是什么呢？其实没有什么影响。

因为我们前面说了，:value的作用有两个：一是初始化input.value的值，二是将初始值渲染到对应的输入框中。在一开始将this.value作为初始值给Input.value和展示在框里，他的任务已经完成了，后续的更改对:value没有一点关系。

其实:value="value"的唯一作用就是将this.value作为初始值绑定和展示到input上。

v-model

现在对于原始元素进行算双向数据绑定已经完成。那么如何实现父组件和子组件之间的双向数据绑定嗯？此时我们需要在子组件中使用v-model。关于 v-model 的使用这里不再赘述。这里只讨论如何在自定义组件实现 v-model。根据vue 的官网的描述，我们大概知道，v-model 的本质就是语法糖，即：

<input type="text" v-model="name">
相当于：
<input type="text" :value="name" @input="name = $event.target.value">

vue监听输入框输入行为然后改变对应的值。如果对子组件进行双向数据绑定该如何实现呢？这里的双向数据绑定指的是父组件将值传递给子组件使用，并且子组件可以改变父组件的值其实上述的双向绑定可以通过v-bind:propName.sync = 'xxx'来实现。除了以上的方式，并且Vue还给我们提供了另一种方式：

<!-- 父组件.vue -->
<child-component :propName="data" @change="change" />
export default {
    data(){
     data:'123'
  },
  methods:{
     change(value){
        this.data = value
     }
  }
}

//在组件中如何想要改变父组件的值，那么直接出发对应的事件即可：
this.$emit('change', newValue )

在vue中，它将上述的方法进行了简化，我们可以使用v-model来对子组件进行双向数据绑定。例如：

<child-component v-model="pageTitle" />
<!-- 是以下的简写: -->
<child-component :value="pageTitle" @input="pageTitle = $event" />

在默认情况下v-model的触发事件名称为input。子组件想要使用的话，需要定义一个名为value的prop才能使用。而在子组件中更改该值，只需要定义一个函数，有必要的时候执行 this.$emit('input', newValue) 即可。

这里的newValue就是$event。这样就可以改变对应的值。当然除了默认的value和input的命名，vue还给我们提过了更加灵活的方式。

<!-- 父组件 -->
<child-component v-model="pageTitle" />
//子组件
export default {
  model: {
    prop: 'title', //这里相当于别名，这里可以起其他名称
    event: 'change' //这里相当于事件的别名，这里可以起其他名称
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

当我们想在子组件中改变传入的值，那么直接可以this.$emit('change', newValue)

所以，在这个例子中 v-model 是以下的简写：

<child-component :title="pageTitle" @change="pageTitle = $event" />

其实本质上，项目中的twowayFactor这个混入配置类，他本质上就是做了上面的操作。

  @Prop()
  @Model('valueChanged')
      bindValue!: T;

这样做的目的是将v-model传入的prop改为bindValue。然后将默认事件的名称从input改为了valueChange。接着设置get/set

        get currentValue() {
            return this.bindValue;
        }
        set currentValue(value) {
            this.$emit('valueChanged', value);
        }

这样做的目的是数据本地化。在组件内部定义一个currentValue 然后为该值设置get，当访问currentValue等价于访问v-model的prop。然后设置set。当改变currentValue的值时，此时就会触发对应的事件。当触发之后父组件中的值就会变化。这就实现了双向数据绑定。

我们可以看到，其实this.currentValue的作用就是v-model操作的语法糖。它并没有什么特别之处，只是将v-model传入的数据的访问和更改简单化了，都集中与一个值this.currentValue。