vue原生input輸入框原理剖析

正文

首先我們來看一段程式碼：

<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。

以上就是vue原生input輸入框原理剖析的詳細內容，更多關於vue原生input輸入框的資料請關注it145.com其它相關文章！