自定义v-model 2.x vs 3.0

关于v-model指令的一个小记，
由于新出的vue3 对它做了一个很好的改进，所以值得记录一下

先看下v-model实现方式

当在原生组件中使用：

   <input v-model="val" />
    //相当于做了以下
   <input :value="val" @input="val=$event.target.value">

当在自定义组件上使用时：

	<my-component v-model="val"></my-component>
	 //相当于做了以下
	<my-component :value="val" @input="val=arguments[0]"></my-component>

但是，在自定义组件上使用是存在 一个问题就是它会默认使用组件内props里面的value属性值，以及使用input的这个事件，如下：

<input type="text" :value="value" @input="updataInput">

//...
export default {
    props:{
        value:String  //默认就会使用这个值
    },
    methods:{
        updataInput(){
            this.$emit("input",e.target.value);  //默认使用input这个事件名
        }
    }
}

如果要是遇到了“非同寻常”的表单元素 ，如checkbox，可能将value这个属性用作于其他的作用，而我们需要绑定的是checked这个属性值，而要调用的方法是onChange这个事件，vue2是这样来解决的：

添加一个model字段
两个字段：

<input type="checkbox" :checked="checked" @change="updataInput">
//...
export default {
    props:{
        checked:Boolean
    },
    model:{
        prop:"checked",  //你想绑定的事件
        event:"change"  //你想触发的事件名称
    },
    methods:{
        updataInput(){
            this.$emit("change",e.target.checked);
        }
    }
}

但是2 的处理方法问题还是来了：

1. 操作比较繁琐，需要创建新属性
2. 一个组件只能绑定一个，不能支持多个

所以3.0 对它的一个改造来了：
丢弃了容易混淆的value属性名和input事件名
使用了很好辨别的属性名【modelValue】
以及很详细的事件名称【onUpdate:modelValue】

<my-component v-model="foo" />
  h(Comp,{
            modelValue:foo,
            "onUpdate:modelValue":value => (foo = value)
        })

来试着写一下

  <input type="text" @blur="inputFun1" @input="inputFun2">
//...
setup(props,context){
        const inputRef=ref(props.modelValue || '')
		const inputFun2=()=>{
		    //...
		}
        const inputFun2 = (e) =>{
            const targetValue = e.target.value;
            inputRef.val=targetValue
            context.emit('updata:modelValue',targetValue);
        }
    },
//...

调用使用

<my-component  v-model="comVal"/>

//...
const comVal=ref('hello')

多个值的的使用：
…未完待续