当前位置: 首页 > Web前端 > vue.js

使用表单项和v-model的简单双向绑定

时间:2023-04-01 01:15:03 vue.js

Vue采用数据劫持和发布订阅相结合的方式实现双向绑定,数据劫持主要是通过Object。defineProperty来实现。举一个关于defineProperty的简单例子:varmodeng={}varage;Object.defineProperty(modeng,'age',{get:function(){console.log("Getage");returnage;},set:function(newVal){console.log("Setage");age=newVal;}});modeng.age=18;console.log(modeng.age);通过上面的操作,当我们访问age属性时会自动执行get函数,当设置age属性时,会自动执行set函数,为双向绑定提供了极大的方便。关于defineProperty的分析,众所周知,MVVM模式在于数据和视图的同步,即数据变化时,视图自动更新,视图变化时,数据也随之变化。那么我们需要做的就是如何检测数据变化然后通知我们更新视图,如何检测视图变化然后更新数据。检测视图:通过使用事件监控。检测数据,使用Object.defineProperty,当我们的属性发生变化时,会自动触发set函数,从而通知我们更新视图。/*学习完毕,待续https://zhuanlan.zhihu.com/p/...*/精通语言:java
PHP
Python
检查{{language.join(",")}}