vue的双向绑定原理：
vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
简单介绍一下Object.defineProperty()方法：
1、Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象）； prop （要定义或修改的属性）； descriptor （具体的改变方法） 2、简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。当给这个属性赋值时，就调用了它里面的set方法；
下面展示一个简单的例子
代码语言：javascript复制var obj = {
}
Object.defineProperty(obj,'prototypeName',{
get: function() {
console.log("调用了get")
},
set: function(newValue) {
console.log("调用了set,新值是" newValue)
}
})
obj.prototypeName // 调用了get
obj.prototypeName = 'hello' // 调用了set,新值是hello实现过程：
先附上一张网图
首先再vue初始化的时候，就对data数据进行了劫持监听，其中就是监听器 Observe，用来监听所有属性。 若有属性发生变化就需要告诉订阅者Watcher看是否需要更新。 因为订阅者Watcher有多个，所以需要一个消息订阅器 Dep 来专门收集这些订阅者，在监听器Observe和订阅者Watcher之间进行统一管理。 还需要有一个指令解析器 Compile ，对每个节点元素进行扫描解析，将相关的指令（如 v-model，v-on …）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应函数 当订阅者Watcher接收到相应属性的变化通知，就会执行对应的更新函数，从而去更新视图。
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者
- 实现一个订阅者Watcher，每个Watcher都绑定一个更新函数，Watcher可以收到属性的变化通知并执行相应的函数，从而更新视图
- 实现一个消息订阅器 Dep ,主要收集订阅者，当 Observe监听到发生变化，就通知Dep 再去通知Watcher去触发更新。
- 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，若节点存在指令，则Compile初始化这类节点的模板数据（使其显示在视图上），以及初始化相应的订阅者。
这里不做具体代码展示，具体方法实现可以参考 这里 vue源码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180622.html原文链接：https://javaforall.cn
