vue v-model原理

v-model本质上是一个语法糖，它负责监听用户的输入事件以更新数据

表单控件的v-model

从表单控制角度来讲，实际上是帮我们做了两件事：

1. 给组件默认增加一个属性，值为用户传入v-model的变量，并将它作为双向绑定的承载者，比如 :property="xxx"
2. 给组件增加一个监听事件，当监听的值发生改变时，会将监听的值赋予v-model的变量，比如 @listenerEvent="xxx = $event.target.value"

<!-- 这里，以input输入框作为示例 -->

<input v-model="xxx">
<!-- 翻译过来，其实就是下面这句了 -->
<input :value="xxx" @input="xxx = $event.target.value">

看到上面，是不是觉得简单？ 哼哼，再来看看官网的用法：https://cn.vuejs.org/v2/api/#v-model

发现v-model并不只是用在input框上了，还用在select等表单控件类型和自定义组件上，我们知道，select的值变化监听是在change事件上了，check-box是要看checked属性是否为true了，还有自定义组件...！

ok,继续看官网 https://cn.vuejs.org/v2/guide/forms.html ：
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

于是乎，我模拟了下input的实现，select的v-model实现的作用大概是这样的：

<select v-model="selected">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<!-- 大致等同于 -->
<select @change="selected = $event.target.options[$event.target.options.selectedIndex].value" :value="selected">
  <option value ="volvo" :selected="selected === 'volvo'">Volvo</option>
  <option value ="saab" :selected="selected === 'saab'">Saab</option>
  <option value="opel" :selected="selected === 'opel'">Opel</option>
  <option value="audi" :selected="selected === 'audi'">Audi</option>
</select>

其它组件类似，不再演示，感兴趣的可以自己实现一下

自定义组件的v-model

那么自定义祖件的原理呢，我们再看下官网的解析：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6

自定义组件，其实就是使用了input中的v-model原理来实现的：

  <div>
    <!-- 
      相当于
      :value="text"
      @input="text = $eevent.target.value"
      传递给当前组件一个叫value的属性
      给当前组件设置了一个自定义事件,input，通过组件内的$emit('input', xxx)来触发事件
     -->
    <my-input v-model="text"></my-input>
  </div>

下面，我们以一道面试题来试手

v-model面试题目

实现一个自定义组件，使用v-model="text"来实现：text中的值使用空格隔开，分开用来控制组件内两个输入框的显示，比如text值为"面试题 v-model"，组件内实现两个输入框，值分别为“面试题”和“v-model”，然后实现双向绑定

<!-- 实现组件调用 -->
<template>
  <div>
    <my-input v-model="text" @input="changeText"></my-input>
    {{text}}
  </div>
  
</template>

<script>
import MyInput from './MyInput.vue'
export default {
  name: 'HelloWorld',
  components:{
    MyInput
  },
  data() {
    return {
      text: '面试题目 v-model'
    }
  },
  mounted() {
    setTimeout(() => {
      this.text = '不写了 哼'
    }, 1000)
  },
  methods: {
    changeText(val) {
      this.text = val
    }
  }
}
</script>

<!-- 组件内部实现  -->
<template>
  <div>
    <input type="text" v-model="text1" @change="changeInput">
    <br>
    <input type="text" v-model="text2" @change="changeInput">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      text1: '',
      text2: ''
    }
  },
  methods:{
    formatValue() {
      let value = this.value.split(' ')
      this.text1 = value[0]
      this.text2 = value[1]
    },
    changeInput() {
      this.$emit('input', this.text1 + ' ' + this.text2)
    }
  },
  created() {
    this.formatValue()
  },
  
  watch: { 
    // 监听一个值，改变多个值
    value(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.formatValue()
    }
  }
}
</script>

image.png