【Vue.js】 如何灵活地使用超甜语法糖：v-model
众所周知，Vue.js是单向数据流不建议子组件直接修改父组件的数据，官方理由是：子组件修改父组件的值会让你的数据流变得难以理解。
那么为什么总是有文章去介绍“Vue双向绑定”呢，原因是通过类比angular的ng-model，得出了“vue也有自己的model语法，所以vue也存在双向绑定”的结论。
事实上这个v-model本质还是语法糖，在 Vue 编译 template 时，碰到 v-model 就将它拆解成 属性值 :value与变更事件@input：
<input v-model="myName" />
<!-- 等价于 -->
<input :value="myName" @input="myName = $event.target.value" />
当然，不同的html输入框，更改数据的事件也不同，比如checkbox/select的事件为@change
论证
为了验证上面说法的正确性，我们写下这段代码：
<input v-model="myName" v-whatever="'with-model'" />
<!-- 等价于 -->
<input :value="myName" @input="myName = $event.target.value" v-whatever="'no-model'" />
vue的指令可以获取当前元素更新前/后的虚拟节点。我们通过whatever指令(whatever表示随便什么名字都行)，打印这两个输入框虚拟节点，看看这两个输入框配置了什么东西：
Vue.directive('whatever', function (el, data, afterNode ) {
console.log(data.value, afterNode)
})
no-model.PNG
with-model.PNG
重点是涂标记的地方，可以清楚地看到，v-model和传统写法，都有value的绑定值和input事件回调，基本验证了我们的想法
灵活运用
如果你对v-model还停留在输入框/单选/复选表单的阶段，不妨看一下下面的例子：
代理数据
Evan You 给了你 v-model ，你却还在使用 watch 处理副作用
假如有一个需求：服务器将一个数字以16进制存储，但是要求前端以10进制展示和输入，提交的时候将10进制转化为16进制发送回服务端，我们通过v-model做一层代理：
<template>
<div>
你输入的数字：<input type="number" v-model="decimal">
<h3>16进制为：{{hex}}</h3>
</div>
</template>
<script>
export default {
data () {
return {
hex: 'ff' // 10进制表示255
}
},
computed: {
decimal: {
get () {
return Number.parseInt(this.hex, 16)
},
set (value) {
const dec = Number(value) || 0;
this.hex = dec.toString(16)
}
}
}
}
</script>
通过这层代理，服务端无需关心10进制，用户也无需关心16进制，前端也不需要在别的地方写多余的转换方法，一举三得啊有木有！
组件封装
以最简单的计数器为例，结合2.2.0+版本的model选项，我们可以自定义组件的model属性值和变更事件名（之所以命名为count和set_count是为了说明字段名称可以起任意合法名字）
<template>
<div>
<h3>点击次数{{ count }}</h3>
<button @click="$emit('set_count', count + 1)">增加</button>
<button @click="$emit('set_count', count - 1)">减少</button>
<button @click="$emit('set_count', 0)">归零</button>
</div>
</template>
<script type="text/javascript">
export default {
model: {
prop: 'count',
event: 'set_count'
},
props: {
count: Number,
}
}
</script>
引用这个组件的时候，只需要这么写(假设将上面的组件import为myCounter)
<my-counter v-model="countValue" />
对比不使用v-model的写法，简洁多了：
<my-counter :count="countValue" @set_count"count=> countValue = count" />
简化Vuex
我们知道，同步修改Vuex中store的数据必须通过commit完成，如果想要使用v-model绑定vuex，可以结合computed（watch也可以，因为都是watcher）实现：
<template>
<input v-model="myName" />
</template>
<script>
export default {
computed: {
myName: {
get() {
return this.$store.state.name;
},
set(value) {
this.$store.commit('SET_NAME', name)
}
}
}
}
</script>
稍微封装一下(不考虑state的命名空间，如果需要命名空间，可以考虑把state换成getters)：
/**
* 传入一个对象，键名作为state名，值作为Mutation字符串
*/
function mapModels (models) {
const mapped= {}
Object.keys(models).forEach(prop=> {
const stateName = prop
const mutationName = models[prop]
mapped[stateName] = {
get () { return this.$store.state[stateName] },
set (value) { this.$store.commit(mutationName, value) }
}
})
return mapped;
}
用法：
<template>
<form>
姓名：<input v-model="myName" />
年龄：<input v-model="myAge" type="number" />
是否单身： <input v-model="singleDog" type="checkbox" />
</form>
</template>
<script>
import { mapModels } from '/path/to/method'
export default {
computed: {
...mapModels ({
myName: 'SET_NAME',
myAge: 'SET_AGE',
singleDog: 'TOGGLE_SINGLE',
})
}
}
</script>
是不是很简洁啊？
另外提一句：上面运用的代码都是我边写文章边顺手敲的，还没来得及测试（有空会验证的：-）
小结
-
v-model本质是value属性和变更事件事件的语法糖 - 不同的html输入框，
v-model的事件名略有不同如@input、@change等 - 配置
model选项可以让你的自定义组件使用v-model语法 - 结合
computed，可以实现v-model绑定vuex的store
