## 阅读本文📖 你将: - 弄明白： `v-model` 是什么的语法糖？ `vue2` 对原生组件究竟做了什么特殊处理？ - 弄明白： `v-model` 到底是**单向数据流**还是**数据双向绑定**？ - 弄明白： `v-model` 在语法糖之外的『副作用』？ - 学会如何让你的组件也支持 `v-model` 语法。 ## 一、`v-model` 的本质是语法糖。 > 『`v-model` 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』 -- 官方文档什么是语法糖？ > 语法糖，简单来说就是『便捷写法』。在大部分情况下， `v-model="foo"` 等价于 `:value="foo" ` 加上 ` @input="foo = $event"`； ```html

``` 没错，在**大部分情况下**如此。但也有例外： 1. `vue2` 给组件提供了 `model` 属性，可以让用户自定义**传值的prop名**和**更新值的事件名**。这个暂且略过，第四节会细说。 2. 对于原生 `html` 原生元素，`vue` 干了大量『脏活儿』，目的是为了能让我们忽视 `html` 在api上的差异性。以下元素的左右两种写法是等价的： - `textarea` 元素： ![textarea](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f51a6c8b3c94a928a81b453789921f2~tplv-k3u1fbpfcp-zoom-1.image) - `select` 下拉框： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a7e13f5ebee470998e443ed99a5a03f~tplv-k3u1fbpfcp-zoom-1.image) - `input type='radio'` 单选框： ![radio](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13e59496402e49e5b09dec4a5b5dae87~tplv-k3u1fbpfcp-zoom-1.image) - `input type='checkbox'` 多选框： ![checkbox](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bf128dd051e46fc884899566646fe6b~tplv-k3u1fbpfcp-zoom-1.image) 在编程思想上，这种帮助使用者『隐藏细节』的方式叫**封装**。 ## 二、v-model 仅仅是语法糖吗？(冷知识) > `v-model` 不仅仅是语法糖，它还有副作用。副作用如下：**如果 `v-model` 绑定的是响应式对象上某个不存在的属性，那么 `vue` 会悄悄地增加这个属性，并让它响应式。** 举个例子，看下面的代码： ```javascript // template中： // script中： export default { data() { return { user: { name: '公众号: 前端要摸鱼', } } } } ``` 响应式数据中没有定义 `user.tel` 属性，但是 `template` 里却用 `v-model` 绑定了 `user.tel`，猜一猜当你输入时会发生什么？看效果： ![副作用](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd32fbc4b8274d4782b1abf8b31022a6~tplv-k3u1fbpfcp-zoom-1.image) 揭晓答案吧： `user` 上会新增 `tel` 属性，并且 `tel` 这个属性还是**响应式**的。这就是『副作用』带来的效果，你学会了吗？ ## 三、 `v-model` 是双向绑定还是单向数据流？ ### 2.1 `v-model` 是双向绑定吗？ > 是，官方说是。『你可以用 v-model 指令在表单 ``、`

` 及 `<select>` 元素上创建双向数据绑定。』 —— vue2官方文档

### 2.2 那 `v-model` 是单向数据流吗？
> 是的，它甚至是单向数据流的典型范式。

虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。  
  - 什么是单项数据流？  
  子组件不能改变父组件传递给它的 `prop` 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。  
  - `v-model` 的做法是怎样的？  
  `v-model` 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。  
  
众所周知 `.sync` 修饰符是单向数据流的另一个典型范式。
![单向数据流8字真诀](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb7cb9ef059347f6b8ed76c97830230e~tplv-k3u1fbpfcp-zoom-1.image)

『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。
## 四、如何让你开发的组件支持 `v-model`
> 虽然不想说，但这确实是高频面试题。🤣

在定义 `vue` 组件时，你可以提供一个 `model` 属性，用来定义该组件以何种方式支持 `v-model`。

`model` 属性本身是有默认值的，如下：
```javascript
// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}
```
也就是说，如果你不定义 `model` 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，`v-model="foo"` 就完全等价于 `:value="foo"` 加上 `@input="foo = $event"`。

如果把 `model` 属性进行一些改装，如下：
```javascript
// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}
```
那么，`v-model="foo"` 就等价于 `:ame="foo"` 加上 `@zard="foo = $event"`。

没错，就是这么容易，让我们看个例子。

先定义一个自定义组件：
```javascript
<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  model: { // 自定义v-model的格式
    prop: 'ame', // 代表 v-model 绑定的prop名
    event: 'zard' // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit('zard', newYear)
    }
  }
}
</script>
```
然后我们在父组件中使用该组件：
```javascript
// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}
```
看看效果：
![我们是TI冠军](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bed10463fbab45f6b3baad5467e9170b~tplv-k3u1fbpfcp-zoom-1.image)

让你的组件支持 `v-model` 就这么容易。

## 五、demo和源码
获取源码请访问github [zhangshichun的github](https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model)

## 六、结束

我是`春哥`。  
我热爱 `vue.js` , `ElementUI` , `Element Plus` 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。

你可以在**掘金**关注我，也可以在**公众号**里找到我：`前端要摸鱼`。  
希望大家玩得开心。
</article></body></html>