VueUse如何封装v-model

介绍

v-model 可以在组件上使用以实现双向绑定, v-model 本质上是语法糖,经过模版编译器后会对 v-model 转换为:

上面是表单元素 v-model 的转换,而自定义组件会转换为:

那么在自定义组件 <CustomInput> 中实现 v-model 需要:

  • 获取 prop 中的 modelValue
  • 值改变需要触发 update:modelValue 自定义事件

为了方便开发,VueUse 提供了 useVModel 来实现自定义组件的 v-model

useVModel

v-model 的封装实现

使用

配置项

源码

watchcomputed 方式实现 v-model

源码中 passivetrue 采用了 watch 的方式实现 v-model,false 采用 computed,两者有什么区别呢?

watch 实现方式:

这种方式是在组件内部声明了一个 currentValue 变量,通过监听 props.modelValue 赋值给 currentValue 变量,currentValue 值改变触发 update:modelValue 自定义事件。这种方式的优点组件内部有个自己的状态,不会受父组件的传值影响。但相对 computed 的方式复杂了一点。

props.modelValue 值改变时会触发监听执行 currentValue.value 值改变又会触发 currentValue 的监听函数,但不需要触发update:modelValue ,因此需要添加 if (val === props.modelValue) return

这里我们可以将 watch 替换成 watchEffect,让代码更简洁:

这里需要注意的是 currentValue 的监听不能换成 watchEffect,因为换了之后就是 props.modelValuecurrentValue 其中一个值改变就会触发执行。

代码可以进一步优化:不用 v-model 绑定 currentValue

:value@input 可以更加灵活的在触发 update:modelValue 之前做一些逻辑处理。也避免了 currentValue的监听多次触发的情况。

computed 的实现方式:

这种方式相对简单,但有个问题,如果引用该组件时没有绑定 v-model 时,组件中 input 的 v-model 也就会失效。在依赖v-model 绑定的变量做一些处理时会受影响。

第二个问题是如果 v-model 绑定的是一个对象,当对象中的属性值改变时不会触发 computed 的 set 方法:

上面例子对象的属性值也会随着输入的内容而改变,不过这个改变的原因的不是因为执行了 set 方法,而是因为对象是引用类型。我们在实际开发中会尽量避免这种情况,因为这样会导致组件间的数据流变复杂,很难跟踪位数据,因此开发中尽量保持单向数据传递。有两种方式解决:

一是为 modelValue 对象的每个属性都声明一个 computed,这种就比较繁琐。

还有一种方式是 get 方法返回一个 Proxy 对象

这种方式每次执行 get 方法会重新实例化一个 Proxy 对象,因此就不会有上面对象引用而修改了父级组件传来的对象。并且 Proxy 对象属性值改变时会触发 set 方法而执行 emits("update:modelValue"),从而实现双向绑定。但个人认为这不是一个好的方案:

第一:这里并没有兼容 modelValue 是值类型的时候,也就说在 computed get 方法中要加个判断处理值类型和对象两个分支逻辑。

第二:computed get 方法每次都会新建一个 Proxy 对象,当然这个对性能的影响很小。

第三:Proxy 并不是一点缺点都没有的,在数组的处理上还是有很多需要注意的地方。

总结

v-model 的实现可以采用 watchcomputed 两种方式,computed 的方式更简单,在特定场景下会有问题,大部分场景不会有问题,因此 VueUse 默认采用 computed 的方式。

相关推荐
baiduopenmap4 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish12 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull16 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i24 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_27 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun33 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜36 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html