vue v-model 语法糖

今天我们来讲解一下 v-model 语法糖的知识。

1，v-model 本质

v-model，只是一个指令，本质上是一个语法糖。如下代码

<input v-model="test">
<input :value="test" @input="test = $event.target.value">

本质上是，其中@input是对<input>输入事件的一个监听，:value="test"是将监听事件中的数据放入到input；
在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，通过绑定value值，当input改变子组件值，让子组件通过事件传递给父组件，进行修改，以达到v-model的绑定原理

2，v-model 常见用法

1，v-model 优势

使用 v-model 来进行双向数据绑定值，

2，v-model 修饰符

1，.lazy(取代 input 监听 change 事件)、

<div class="model__content--input">
      <div>我的 v-model 绑定 input 框</div>
      <input type="text" v-model="inputValue">
      <div>展示 input中值：{{inputValue}}</div>
</div>
<div class="model__content--input">
      <div>我的 v-model.lazy 绑定 input 框</div>
      <input type="text" v-model.lazy="inputValueLazy">
      <div>展示 input中值：{{inputValueLazy}}</div>
</div>

注：只绑定v-model时，input中输入什么，下方就展示什么，频繁触动change事件，但是加上修饰符.lazy时，只有按回车时候，才会触发change事件
同时，绑定的input值，输出的 typeOf 类型是 String

git.gif

2，.number(输入字符串转为有效的数字)、

<div class="model__content--input">
     <div>我的 v-model 绑定 input 框</div>
     <input type="text" v-model="inputValue" @change="input(inputValue)">
     <div>展示 input中值：{{inputValue}}</div>
</div>
<div class="model__content--input">
      <div>我的 v-model.number 绑定 input 框</div>
      <input type="number" v-model.number="valueNumber" @change="input(valueNumber)">
      <div>展示 input中值：{{valueNumber}}</div>
</div>

注: v-model绑定的input值，输出的 typeof 类型是 String，它不限制输入的值
但是下方用 number 修饰，只能输入数值，并且输出的 typeof 类型是 Number

git.gif

3，.trim(输入首尾空格过滤)。

<div class="model__content--input">
      <div>我的 v-model 绑定 input 框</div>
      <input type="text" v-model="inputValue" @change="input(inputValue)">
      <div>展示 input中值：{{inputValue}}</div>
</div>
<div class="model__content--input">
      <div>我的 v-model.trim 绑定 input 框</div>
      <input type="text" v-model.trim="valueTrim" @change="input(valueTrim)">
      <div>展示 input中值：{{valueTrim}}</div>
</div>

注: v-model绑定的input值，它打印出来的值包括收尾的空格
但是下方用 trim 修饰，输入值，它打印出来的值会过滤掉收尾的空格

git.gif

3，v-model 通常绑定的元素

1，radio 单选框绑定

<div class="model__content--input">
   <div>v-model绑定radio，单选时，只能绑定一个值sex</div>
   <label for="female">
        <input id="female" value="男" v-model="sex" type="radio" />男
   </label>
   <label for="male" style="margin-left:10px;">
        <input id="male" value="女" v-model="sex" type="radio" />女
   </label>
   <div>radio 值：{{sex}}</div>
</div>

input[type='radio']{
    margin-right:10px
}

注：一般我们使用单选框时，建议使用 label 与 input，这样不管点击radio还是后面的文字，都可以选中。
当单选时候，v-model绑定的应该是同一个值

git.gif

2，checkbox

<div class="model__content--input">
    <div>v-model绑定checkbox，多选时，绑定的是一个数组</div>
    <input  value="苹果" v-model="fruit" type="checkbox" />苹果
    <input  value="橘子" v-model="fruit" type="checkbox" />橘子
    <input  value="西瓜" v-model="fruit" type="checkbox" />西瓜
    <input  value="柚子" v-model="fruit" type="checkbox" />柚子
    <input  value="荔枝" v-model="fruit" type="checkbox" />荔枝
    <input value="Mango" v-model="fruit" type="checkbox" />芒果
    <div>你喜欢吃的水果有：{{fruit}}</div>
</div>

注：这里多选绑定的值是一个数组

git.gif

3，select

<div class="model__content--input">
    <div>v-model绑定select，只能绑定一个值</div>
      <select name="你喜欢的水果有" id="" v-model="value">
        <option value="西瓜">西瓜</option>
        <option value="柚子">柚子</option>
        <option value="荔枝">荔枝</option>
        <option value="芒果">芒果</option>
     </select>
   <div>喜欢的水果：{{value}}</div>
</div>

注：这里绑定的值，是一个value值

git.gif

3，v-model 原理

双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件

image.png

其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图

image.png

订阅者模式：每一个{{name}} v-model=‘name’都会添加一个订阅者，从而监听不同部分的变化，每一部分变化时都会循环触发相应的订阅者，更新到页面中。