v-model的修饰符，lazy和number，vue1.x中的debounce已被移除

为什么突然想起来写这个问题呢，因为这两天接了一个优化任务，以前的老代码了，看到了debounce参数，在vue2.x中这个参数被移除了。简单的说一下v-model从1.x升级到2以后的变化，免得大家搞错了写法而一头雾水。
vue1.x版本中，v-model有number，lazy，debounce三个参数，升级到2.x版本后，number和lazy以修饰符的形式使用，这样看起来更加的清晰明了。debounce被设计用来控制 Ajax 请求及其它高耗任务的频率，但随着应用的增长，有一定的局限性。例如在设计一个搜索提示时就有局限性,本身需要控制的只是搜索的延迟，但debounce控制的却是数据从视图层到数据层的延迟。废话不多说，看下面例子。

---

lazy和number从参数变成修饰符，写法变化如下：

以前的
<input v-model="name" lazy>
<input v-model="age" type="number" number>

现在的
<input v-model.lazy="name">
<input v-model.number="age" type="number">

下面介绍一下这些修饰符。
1）v-model.lazy ，将 视图层数据 与 数据层数据 的 同步 转变为在change事件中发生。

<template>
    <div class="demoLazy">
        <input type="text" v-model.lazy="msg">
        <br>
        <span>{{msg}}</span>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"我是番茄"
        }
    }
}
</script>

效果：
加了lazy修饰符，在输入框失焦或者按了enter，数据才改变

不加lazy修饰符，输入数据即改变

2）v-model.number 将输入的字符串转换成number

<template>
    <div class="demoLazy">
        <input type="text" v-model.number="num1">
        <span>+</span>
        <input type="text" v-model.number="num2">
        <span>={{sum}}</span>
    </div>
</template>

<script>
export default {
    data(){
        return{
            num1:0,
            num2:0
        }
    },
    computed:{
        sum(){
            return this.num1 + this.num2
        }
    }
}
</script>

有number修饰符时，虽然我把input给了type为text，数据层的值依然被转换为了number。如图所示：

无number修饰符时，两个数字为字符串，将会是字符串拼接，如图所示：

两个修饰符就写了这么长，这篇文章就先结个尾，debounce移除了，在vue2.x中我们想用延迟操作怎么做比较合适呢？娃哈哈，我还是再写一篇吧。