首页>>技术前沿>>B/S,C/S软件系统开发
Vue怎么知道该做什么
作者:西安软件公司 | 原创 来源:西安软件公司 | 时间:2018年9月15日| 点击:0次 | 【评论】

这几天公司使用到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 执行后生成。

当然,这只是我的理解。在梳理和写下这些内容的过程中,我收获很多,也希望内容能够对你有所帮助。水平有限,错漏难免,欢迎指出。最后,感谢阅读!

 

此内容DOC下载 此内容PDF下载

【全文完】
关键词标签: vue 
0 ([$-顶稿人数-$])
0 ([$-踩稿人数-$])

版权声明:

1、弈聪软件网站内容中凡注明“来源:XXX(非西安弈聪网站)”的作品,转载自其它媒体,转载目的在于传递更多信息,其中涉及的网站建设,网站优化,APP开发,微信小程序开发,大数据平台开发,区块链技术开发等软件开发技术细节并不代表本站赞同支持其观点,并不对其真实性负责。对于署名“西安弈聪”的作品系本站版权所有,任何人转载请署名来源,否则西安弈聪将追究其相关法律责任。

2、本站内容中未声明为“原创”的内容可能源自其它网站,但并不代表本站支持其观点,对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益,请联系我方进行删除。