一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

v-model双向绑定原理

vue.js提供的v-model指令在表单元素上创建双向数据绑定。v-model本质上是语法糖，它负责监听用户的输入事件以更新数据。

比如，在input表单元素上使用v-model默认会利用名为value的prop和名为input的事件。输入的时候会触发input事件，实时更新绑定值。

<template>
    <input v-model="val"/>
    <--等价于-->
    <input v-bind:value="val" v-on:input="val = $event.target.value"/>
</template>
<script>
    export default {
        setup(){
            const val = ref(0)
            return {
                val
            }
        }
    }
</script>

v-model双向绑定computed属性

上面的代码v-model绑定了一个data属性值。有时我们需要双向绑定computed属性值，比如从vuex读取状态和写入状态。computed默认属性默认只有一个getter，实现computed双向绑定，需要同时给computed属性提供getter和setter才能达到双向绑定的效果。代码如下所示：

<template>
    <input v-model="searchKeyword"/>
</template>
<script>
export default {
    setup(){
        const searchKeyword = computed({
              get() {
                    return store.getters["themeSelect/getKeyword"];
              },
              set(value: string) {
                    store.dispatch("themeSelect/setThemeFilter", {
                          keyword: value,
                          isSearched: !!value,
                    });
              },
        });
    }
}
</script>

总结

本文首先介绍了v-model双向绑定原理，然后介绍了双向绑定computed的使用时需要同时提供getter和setter属性。