【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

【Vue.js】 如何灵活地使用超甜语法糖：v-model

论证

灵活运用

代理数据

组件封装

简化Vuex

小结

【Vue.js】如何灵活地使用超甜语法糖：v-model