vue v-model 的实现原理

130 阅读 0 评论 86 点赞

我是靠谱客的博主开朗网络，这篇文章主要介绍vue v-model 的实现原理，现在分享给大家，希望可以做个参考。

前言

之前一直是面试前看看vue的响应式原理，一直以为响应式原理就是v-model的实现原理，直到一次阅读文档发现之前的理解都是错误的，这才开始重新学习一下这个知识点，并且自己手写实现了一个input的v-model，才理解到其中的实现原理，（也就是面试中尝尝遇到的手写一个v-model）,在这里记录下来，方便自己学习和使用。

废话少说，直接上知识。这里我会用自己写的demo详细介绍，一看就懂得那种哦。

v-model 呢其实是 <input type="text" :value="testMessage" @input="testMessage = $event.target.value">的语法糖，它实际上做了两件事情：

1,绑定数据(在 <input type=“text” :value=“testMessage” ）
2，触发input的输入事件(也就是监听) (<input type=“text” :value=“testMessage” @input=“testMessage = $event.target.value”>)
也就是说v-model就是：（下边是我写的一个小demo，有助于理解，主要是上手一遍，理解更深刻）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<div class="test-model-essure">
<p>这里是input输入框输入时响应的文本</p>
<p>{{ testMessage }}</p>
<input
type="text"
placeholder="这是input输入框"
:value="testMessage"
@input="emitInput"
/>
</div>
</template>
<script>
export default {
data() {
return {
testMessage: "",
};
},
methods: {
emitInput($event) {
this.testMessage = $event.target.value;
},
},
};
</script>
<style lang="scss" scoped>
.test-model-essure {
position: fixed;
bottom: 0px;
width: 100%;
p,
input {
width: 100%;
height: 30px;
border: 1px solid red;
display: flex;
align-items: center;
}
}
</style>