淺析 Vue 的雙向綁定

Vue 中的雙向綁定是指當咱們改變 data 中的一個變量時，頁面中該變量也會隨之跟新，咱們在頁面中改變一個變量時，data 中變量的值也隨之變化。

一般咱們使用 v-model 來實現雙向綁定，而且 v-model 只能在 input、selsect、textarea 元素和 component 中使用。

1. v-model 的原理

<input type="text" v-model="value"/>
//等價於
<input type="text" :value="value" @input="value = $event.target.value" />
複製代碼

上面兩種寫法實現的效果是一致的，即咱們在頁面上改變變量，data 中的數據也隨之改變。

首先咱們將數據中的 value 綁定到 input 標籤上，而後再經過 @input="value = $event.target.value" 對事件進行監聽，$event.target.value 是所觸發的事件的返回值。

v-model 本質上是語法糖，負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

2. 本身實現一個具備 v-model 功能的 input 組件

<template>
  <div class="red wrapper">
    <input :value="value" @input="onInput">
  </div>
</template>

<script>
  export default {
    name: 'MyInput',
    props:{
      value: {
        type: String
      }
    },
    methods:{
      onInput(e){
        const value = e.target.value;
        this.$emit("input", value)
      }
    }
  }
</script>

<style scoped>
  .red{
    background: red;
  }
  .wrapper{}
</style>
複製代碼

如上面代碼所示，咱們本身寫的 input 標籤與 v-model 原理中的第二個 input 基本相同，不一樣的是咱們監聽的事件變成了組件中的事件。

組件中的 value 經過 props 從外部引入，對 value 值的修改是經過 onInput 事件完成的。

在 onInput 事件內部，咱們只須要將 e.target.value 經過 $emit 函數暴露出去，就能讓使用組件的人修改 input 中的值。

咱們將上面的組件命名爲 MyInput，下面演示一下如何使用該組件。

<template>
  <div id="app">
    這裏是value: {{value}}
    <MyInput v-model="value"/>
    // 等價於
    // <myInput :value="value" @input="value=$event"/>
  </div>
</template>

<script>
import MyInput from './MyInput'
export default {
  components: { MyInput },
  name: 'App',
  data() {
    return {
      value: ''
    }
  }
}
</script>

<style>
  #app{
    padding: 20px;
  }
</style>
複製代碼

當咱們在輸入框中輸入數據時，輸入框上面的值也會隨之改變，說明數據和頁面之間是實時響應的，也就是說咱們實現了雙向綁定。

效果以下圖所示。

若是你想了解更多有關 v-model 的信息，能夠查看官方文檔 v-model