vue原理之双向绑定虚
vue 双向绑定的原理:数据劫持结合发布者-订阅者模式
举例说明:
在vue中创建数据对象
var vm = new Vue({
data: {
obj: {
test: 1
}
},
created: function () {
console.log(this.obj);
}
});
结果:
Object {
test: 1
_ob_: Observer
get test: function reactiveGetter()
set test: function reactiveSetter(newVal)
_proto_: Object
}
我们会发现其中多了些东西比如说get和set,那么他们是what?
vue通过object.defineProperty这个函数来进行数据劫持,这个函数可以控制一个对象的一些属性,读写啊之类的
例如
let Obj = {};
let pro = '';
Object.defineProperty(Obj, 'pro', {
set(value) {
pro = value
console.log('变量值设定为‘ + value)
},
get(value) {
return ’获取到的变量值为:‘ + pro
}
})
Obj.pro = 'vue'; // 变量值设定为vue
console.log(Obj.pro); //获取到的变量值为vue
在设置Obj.pro的值时会触发set函数,在读取Obj.pro的值时会触发get函数
双向绑定:视图变化时更新数据,可以使用事件监听,比如input事件啊,click事件啊等
数据变化时更新视图,使用Object.defineProperty中定义的set函数,数据变化时执行set函数,在数据双向绑定时先对数据进行劫持监听,所以有一个Observe监听器,监听 数据的所有属性,属性变化时告诉订阅者Watcher看是否需要更新,因为订阅者是多个,所以需要消息订阅器Dep来收集订阅者,然后在监听器Observer和订阅者Watcher之间进 行统一管理,接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函 数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地