首页>>技术前沿>>B/S,C/S软件系统开发这几天公司使用到vue，所以对vue的数据响应原理非常好奇，不说废话，直接上我的理解。
Vue.js 的核心包括一套“响应式系统”
“响应式”，是指当数据改变后，Vue会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
举个简单的例子，对于模板来说.代码执行后，页面上对应位置会显示对应的数据。如果想改变显示的名字，这样页面上就会显示修改后的名字了，并不需要去手动修改 DOM 更新数据。
ue 的响应式，核心机制是 观察者模式。数据是被观察的一方，发生改变时，通知所有的观察者，这样观察者可以做出响应，比如，重新渲染然后更新视图。数据可以有多个观察者，怎么记录这种依赖关系呢？
Vue 通过在 data 和 watcher 间创建一个 dep 对象，来记录这种依赖关系。dep 的结构很简单，除了唯一标识属性 id，另一个属性就是用于记录所有观察者的 subs：
id - number
subs - [Watcher]
再来看 watcher。
Vue 中 watcher 的观察对象，确切来说是一个求值表达式，或者函数。这个表达式或者函数，在一个 Vue 实例的上下文中求值或执行。这个过程中，使用到数据，也就是 watcher 所依赖的数据。用于记录依赖关系的属性是 deps，对应的是由 dep 对象组成的数组，对应所有依赖的数据。而表达式或函数，最终会作为求值函数记录到 getter 属性，每次求值得到的结果记录在 value 属性：
vm - VueComponent
deps - [Dep]
getter - function
value - *
另外，还有一个重要的属性 cb，记录回调函数，当 getter 返回的值与当前 value 不同时被调用：cb - function上面代码首先创建了一个新的 Vue 实例对象 vm，包含两个数据字段：name、age。对于这两个字段，Vue 会分别创建对应的 dep 对象，用于记录依赖该数据的 watcher。
然后定义了一个求值函数 userInfo，注意，这个函数会在对应的 Vue 示例上下文中执行，也就是说，执行时的 this 对应的就是 vm。回调函数 onUserInfoChange 只是打印出新的 watcher 得到的新的值，由 userInfo 执行后生成。
当然，这只是我的理解。在梳理和写下这些内容的过程中，我收获很多，也希望内容能够对你有所帮助。水平有限，错漏难免，欢迎指出。最后，感谢阅读！
【全文完】
版权声明:
1、弈聪软件网站内容中凡注明“来源：XXX（非陕西弈聪网站）”的作品，转载自其它媒体，转载目的在于传递更多信息，其中涉及的网站建设，网站优化，APP开发，微信小程序开发，大数据平台开发，区块链技术开发等软件开发技术细节并不代表本站赞同支持其观点，并不对其真实性负责。对于署名“陕西弈聪”的作品系本站版权所有，任何人转载请署名来源，否则陕西弈聪将追究其相关法律责任。
2、本站内容中未声明为“原创”的内容可能源自其它网站，但并不代表本站支持其观点，对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益，请联系我方进行删除。
企业动态
