2022/03/06 【v-model 在 Vue2 和 Vue3 中的区别】

原文地址
v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。

Vue2 中的 v-model

如果对 Vue2 中的语法很熟悉，这部分可以不看。
首先来回顾一下 Vue2 中的 v-model，它主要用于表单元素和自定义组件上。v-model本质上是一个语法糖，会对用户的输入做一些特殊处理以达到更新数据，而所谓的处理其实就是给使用的元素默认绑定属性和事件。
当 v-model 使用在表单元素上时，会根据元素的不同而采用不同的处理：

• 当文本 和 上使用时，会默认给元素绑定名为 value 的 prop 和名为 input 的事件；</li><li>当<input type="checkbox">复选框 和 <input type="radio">单选框 上使用时，会默认绑定名为 checked 的 prop 和名为 change 的事件；</li><li>当 <select>选择框 上使用时，则绑定名为 value 的 prop 和名为 change 的事件。</li></ul> <p>这些是 Vue 默认帮我们处理的，可以直接使用。但是你也会发现一些第三方组件也可以使用 v-model ，比如 Element 中的 Input 组件。这是因为这些组件自己实现了 v-model，原理其实就是上面说到的绑定属性和事件。<br />我们可以尝试实现一下 v-model，来开发一个简单的输入组件，就叫 MyInput 吧：</p> <pre><code class="lang-vue"><!-- MyInput 组件代码 --> <template> <div> <input type="text" :value="value" @input="$emit('input',$event.target.value)"> </div> </template> <script> export default { props: { value: String, // 默认接收一个名为 value 的 prop } } </script> </code></pre> <p>上面代码就实现了组件的 v-model 功能，当在这个组件上使用 v-model 时：</p> <pre><code class="lang-vue"><my-input v-model="msg"></my-input> </code></pre> <p>Vue 还提供了 model 选项，用于将属性或事件名称改为其他名称，比如上面的 MyInput 组件，我们改一下：</p> <pre><code class="lang-vue"><template> <div> <input type="text" :value="title" @input="$emit('change', $event.target.value)" /> </div> </template> <script> export default { model: { prop: "title", // 将默认的 prop 名 value 改为 title event: "change", // 将默认的事件名 input 改为 change }, props: { title: String, // 注意 template 代码中也要修改为 title }, }; </script> </code></pre> <p>此时使用组件：</p> <pre><code class="lang-vue"><my-input v-model="msg"></my-input> // 等同于 <my-input :title="msg" @change="msg = $event"></my-input> </code></pre> <p><a name="u8MwH"></a></p> <h3 id="38g0tp"><a name="38g0tp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用 .sync 修饰符</h3><p>Vue 提供一个 .sync 的修饰符，效果跟 v-model 一样，也是便于子组件数据更改后自动更新父组件相关数据。实现 .sync 的方式与实现 v-model 异曲同工，区别就是抛出的事件名需要是 update:myPropName 的结构。<br />还是拿上面的 MyInput 说明，我们还是传入一个 title 的 prop，同时组件内部抛出 update:title 事件，代码如下：</p> <pre><code class="lang-vue">// MyInput 组件中，修改抛出的事件名为 update:title <input type="text" :value="title" @input="$emit('update:title', $event.target.value)" /> </code></pre> <p>此时如果使用这个组件，正常应该是这样：</p> <pre><code class="lang-vue"><my-input :title="msg" @update:title="msg = $event"></my-input> </code></pre> <p>但此时可以使用 .sync 修饰符来简化：</p> <pre><code class="lang-vue"><my-input :title.sync="msg"></my-input> </code></pre> <p>可以看到 .sync 和 v-model 所能达到的效果是一样的，用什么就看你什么场景，一般表单组件上都是用 v-model。 <a name="Likuf"></a></p> <h2 id="7ql5w6"><a name="7ql5w6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Vue3 中的 v-model</h2><p>上面说了那么多，为的就是接下来区别出 Vue3 中 v-model 带来的变化，主要变化有以下几处： <a name="j9F9Y"></a></p> <h3 id="303ho8"><a name="303ho8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>修改默认 prop 名和事件名</h3><p>当用在自定义组件上时，v-model 默认绑定的 prop 名从 value 变为 modelValue，而事件名也从默认的input 改为 update:modelValue 。在 Vue3 中编写上面那个 MyInput 组件时，就需要这样：</p> <pre><code class="lang-vue"><!-- MyInput 组件代码 Vue3 版 --> <template> <div> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" // 事件名改为 update:modelValue /> </div> </template> <script> export default { props: { modelValue: String, // 默认 prop 从 value 改为 modelValue }, }; </script> </code></pre> <p>使用组件时：</p> <pre><code class="lang-vue"><my-input v-model="msg"></my-input> // 等同于 <my-input :modelValue="msg" @update:modelValue="msg = $event"></my-input> </code></pre> <p><a name="ngDdy"></a></p> <h3 id="dbmw8y"><a name="dbmw8y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>废除 model 选项和 .sync 修饰符</h3><p>Vue3 中移除了 model 选项，这样就不可以在组件内修改默认 prop 名了。现在有一种更简单的方式，就是直接在 v-model 后面传递要修改的 prop 名：</p> <pre><code class="lang-vue">// 要修改默认 prop 名，只需在 v-model 后面接上 :propName，例如修改为 title <my-input v-model:title="msg"></my-input> // 等同于 <my-input :title="msg" @update:title="msg = $event"></my-input> </code></pre> <p>注意组件内部也要修改 props：</p> <pre><code class="lang-vue"><template> <div> <input type="text" :value="title" @input="$emit('update:title', $event.target.value)" /> </div> </template> <script> export default { // 此时这里不需要 model 选项来修改了 props: { title: String, // 修改为 title，注意 template 中也要修改 }, }; </script> </code></pre> <p>同时，.sync 修饰符也被移除了，如果你尝试使用它，会报这样的错误：</p> <pre><code class="lang-vue">'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead </code></pre> <p>错误提示中说明了，可以使用 v-model:propName 的方式来替代 .sync，因为本质上效果是一样的。 <a name="WXdp4"></a></p> <h3 id="a3g55i"><a name="a3g55i" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用多个 v-model</h3><p>Vue3 中支持使用多个 v-model，属于新增功能，我很喜欢这个功能，使得组件数据更新更灵活。例如有这样一个表单子组件，用户输入的多个数据都需要更新到父组件中显示，可以这样写：</p> <pre><code class="lang-vue"><!-- 表单子组件 Form --> <template> <div class="form"> <label for="name">姓名</label> <input id="name" type="text" :value="name" @input="$emit('update:name',$event.target.value)"> <label for="address">地址</label> <input id="address" type="text" :value="address" @input="$emit('update:address',$event.target.value)"> </div> </template> <script> export default { props:{ name: String, address: String } } </script> </code></pre> <p>父组件使用这个组件时：</p> <pre><code class="lang-vue"><child-component v-model:name="name" v-model:address="address"></child-component> // 将用户输入数据更新到父组件中显示 <p>{{name}}</p> <p>{{address}}</p> </code></pre> <p><a name="I92ko"></a></p> <h3 id="b7hfet"><a name="b7hfet" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自定义 v-model 修饰符</h3><p>在 Vue2 中的 v-model 上，我们用过 .trim、.lazy 和 .number这三个内置修饰符，而 Vue3 则在这个基础上增加了自定义修饰符，即开发者可以自定义修饰符，以按需处理绑定值。<br />当我们在 v-model 后面加上自定义修饰符后，会通过名为 modelModifiers 的 prop 传递给子组件，子组件拿到这个修饰符名后，根据条件修改绑定值。我们来看一个例子，自定义一个修饰符 capitalize，用于将输入字符串的首字母大写。<br />假设自定义组件还是叫 MyInput，使用 v-model 时加上自定义修饰符 capitalize：</p> <pre><code class="lang-vue"><my-input v-model.capitalize="msg"></my-input> </code></pre> <p>由于不是内置修饰符，所以需要我们自己在组件内部处理修饰符逻辑，编写组件：</p> <pre><code class="lang-vue"><!-- MyInput 组件 --> <template> <div> <input type="text" :value="modelValue" @input="emitValue" /> </div> </template> <script> export default { props: { modelValue: String, modelModifiers: { // 自定义修饰符会默认传入这个 prop 中 type: Object, default: () => ({}), }, }, mounted() { // 当组件 v-model 后面加上了自定义修饰符，组件内部会在 modelModifiers 上获取到修饰符状态 console.log(this.modelModifiers); // {capitalize: true} }, methods: { emitValue(e) { let value = e.target.value; // 如果使用了自定义修饰符，即状态为 true，就处理值 if (this.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1); } // emit value this.$emit("update:modelValue", value); }, }, }; </script> </code></pre> <p>这样就完成了一个将输入字符串首字母大写的v-model修饰符。<br />如果是 v-model 带上了参数，同时使用了自定义修饰符，比如这样：</p> <pre><code class="lang-vue"><my-input v-model:title.capitalize="msg"></my-input> </code></pre> <p>那么传入组件内部的 prop 就不再是 modelModifiers 了，而是 titleModifiers。它的格式是 arg + ‘Modifiers’。此时这个组件应该这样写：</p> <pre><code class="lang-vue"><!-- MyInput 组件 --> <template> <div> <input type="text" :value="title" @input="emitValue" /> </div> </template> <script> export default { props: { title: String, // modelValue -> title titleModifiers: { // modelModifiers -> titleModifiers type: Object, default: () => ({}), }, }, mounted() { console.log(this.titleModifiers); // {capitalize: true} }, methods: { emitValue(e) { let value = e.target.value; // 如果使用了自定义修饰符，就处理值 if (this.titleModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1); } // emit value this.$emit("update:title", value); }, }, }; </script> </code></pre> <p><a name="JNTvh"></a></p> <h2 id="ec3lxj"><a name="ec3lxj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>结语</h2><p>以上就是 v-model 在 Vue2 和 Vue3 中的区别表现，我个人觉得新版中使用逻辑更清晰了。只是有些部分不再兼容了，如果是直接将 Vue2 版本代码移植到 Vue3 项目中，需要注意 v-model 的实现差异，还有注意要将 .sync 修饰符替换成新写法。</p>