v-model原理分析一

VModel双向绑定分为两个部分的内容

• 初始化绑定：初始化时给表单绑定值，绑定事件，为双向更新做准备
• 双向更新：任意一边发生变化，同时能让另一边更新

1. v-model怎么给表单绑定数据

1. v-model绑定的数据赋值给表单元素的value属性
2. 解析不同的表单元素，配置相对应的事件名和回调，在插入DOM之前，通过addEventListener绑定事件
3. 外部变化，触发事件回调，event.target.value赋值给model绑定的数据
4. 内部变化，修改表单元素的value

下面来看看普通input标签生成的渲染函数

with(this) {
    return _c('div', [
        _c('input', {
            domProps: {
                value: name
            }
        })
    ])
}

其中name会直接从当前组件的实例上获取，然后domProps就会正式生成{value: 123}

在创建dom input之后，插入dom input之前，遍历该input的domProps, 逐个添加给dom input

2. 绑定什么事件

不同的表单元素使用v-model, 会绑定不同的事件

• change: select radio checkbox
• input: input, textarea

3. 怎么绑定事件

比如一个input元素，会生成如下的渲染函数

with(this) {
    return _c('div', [
        _c('input', {
            on: {
                input: function($event) {
                    name = $event.target.value
                }
            }
        })
    ])
}

Vue会把事件名和回调配套保存给表单元素的on事件存储器，最后在生成dom之后，插入页面之前，会使用addEventListener绑定事件

input.addEventListener('input', function($event) {
    name = $event.target.value;
});

如何进行双向更新

1. 内部变化

with(this) {
    return _c('div', [
        _c('input', {
            domProps: {
                value: name
            }
        })
    ])
}

还是来看上面生成的这个渲染函数，由于读取到了name, name因此也会收集到input的watcher, 当内部name发生变化时，会通知watcher更新，导致渲染函数重新执行，重新给input的value赋值。

2. 外部变化

当我们手动触发时，会执行内部设置的事件回调，当事件触发时，会把表单的值赋值给name, name是从组件实例上访问的，所以这次赋值会直接改变组件实例的name