浅谈vue实现双向事件绑定v-model的原理
与js或者jquery直接改变操作dom不同，vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值
官方文档这么解释：
v-model只不过是一个语法糖而已,真正的实现靠的还是
- v-bind:绑定响应式数据
- 触发 input 事件 并传递数据 (核心和重点)
如下代码
<input v-model="txt">
本质上是
<input :value="txt" @input="txt = $event.target.value">
解释：
初始化vue实例时候，会递归遍历data的每一个属性，并且通过defineProperty来监听每一个属性的get，set方法，从而一旦某个属性重新赋值，则能监听到变化来操作相应的页面控制
看下方代码：
Object.defineProperty(data,"name",{
get(){
return data["name"];
},
set(newVal){
let val=data["name"];
if (val===newVal){
return;
}
data["name"]=newVal;
// 监听到了属性值的变化,假如node是其对应的input节点
node.value=newVal;
}
})
总结
一方面modal层通过Object.defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值
那么Object.defineProperty是用来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set，v-model其实是对其get和set进行重写操作，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数
补充
v-model修饰符：.lazy、.trim和.number
lazy ：在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<input v-model.lazy="msg">
trim ：去除字符串首尾的空格
<input v-model.trim="msg">
number ：将数据转化为值类型
<input v-model.number="msg">
到此这篇关于浅谈vue实现双向事件绑定v-model的原理的文章就介绍到这了,更多相关vue 双向事件绑定v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了编写更好的v-for循环的6种技巧，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了vue实现列表无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了Vue ELement Table技巧表格业务需求实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
ue3上线已经很久了,许多小伙伴应该都已经使用过vue3了,下面这篇文章主要给大家介绍了关于Vue3.2单文件组件setup的语法糖与新特性总结的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要给大家分享一个开发中常见的需求，接下来将为大家详细介绍弹幕的实现以及设计思路一步一步描述出来，希望大家能够喜欢2023-06-06
这篇文章主要给大家介绍了关于VUE跳转外部链接与网页的方法,记录一下在vue项目中如何实现跳转到一个新页面,需要的朋友可以参考下2023-06-06
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
这篇文章主要给大家介绍了利用vue2如何实现div contenteditable="true"，就是类似于v-model的效果，文中给出了两种解决的思路，对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。2017-02-02
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧2019-04-04
下面小编就为大家带来一篇vue组件初学_弹射小球(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)
使用vue也好有一段时间了,也算对其双向绑定原理也有了解个大概,这篇文章主要给大家介绍了关于vue MVVM双向绑定(数据劫持+发布者-订阅者模式)的相关资料,需要的朋友可以参考下2022-03-03
最新评论