Vue响应式原理Observer、Dep、Watcher的示例分析-创新互联
小编给大家分享一下Vue响应式原理Observer、Dep、Watcher的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、定南网站维护、网站推广。Object.defineProperty
相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象,会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子?
function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { console.log('我被读了,我要不要做点什么好?'); return val; }, set: newVal => { if (val === newVal) { return; } val = newVal; console.log("数据被改变了,我要把新的值渲染到页面上去!"); } }) } let data = { text: 'hello world', }; // 对data上的text属性进行绑定 defineReactive(data, 'text', data.text); console.log(data.text); // 控制台输出 <我被读了,我要不要做点什么好?> data.text = 'hello Vue'; // 控制台输出
Observer 「响应式」
Vue中用Observer类来管理上述响应式化Object.defineProperty的过程。我们可以用如下代码来描述,将this.data也就是我们在Vue代码中定义的data属性全部进行「响应式」绑定。
class Observer { constructor() { // 响应式绑定数据通过方法 observe(this.data); } } export function observe (data) { const keys = Object.keys(data); for (let i = 0; i < keys.length; i++) { // 将data中我们定义的每个属性进行响应式绑定 defineReactive(obj, keys[i]); } }
Dep 「依赖管理」
什么是依赖?
相信没有看过源码或者刚接触Dep这个词的同学都会比较懵。那Dep究竟是用来做什么的呢? 我们通过defineReactive方法将data中的数据进行响应式后,虽然可以监听到数据的变化了,那我们怎么处理通知视图就更新呢?
Dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例,我们发现,虽然data中有text和message属性,但是只有message被渲染到页面上,至于text无论怎么变化都影响不到视图的展示,因此我们仅仅对message进行收集即可,可以避免一些无用的工作。
那这个时候message的Dep就收集到了一个依赖,这个依赖就是用来管理data中message变化的。
{{message}}
data: { text: 'hello world', message: 'hello vue', }
当使用watch属性时,也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化,message变化时我们就要通知到watch这个钩子,让它去执行回调函数。
这个时候message的Dep就收集到了两个依赖,第二个依赖就是用来管理watch中message变化的。
watch: { message: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, }
当开发者自定义computed计算属性时,如下messageT属性,是依赖message的变化的。因此message变化时我们也要通知到computed,让它去执行回调函数。 这个时候message的Dep就收集到了三个依赖,这个依赖就是用来管理computed中message变化的。
computed: { messageT() { return this.message + '!'; } }
图示如下:一个属性可能有多个依赖,每个响应式数据都有一个Dep来管理它的依赖。
如何收集依赖
我们如何知道data中的某个属性被使用了,答案就是Object.defineProperty,因为读取某个属性就会触发get方法。可以将代码进行如下改造:
function defineReactive (obj, key, val) { let Dep; // 依赖 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { console.log('我被读了,我要不要做点什么好?'); // 被读取了,将这个依赖收集起来 Dep.depend(); // 本次新增 return val; }, set: newVal => { if (val === newVal) { return; } val = newVal; // 被改变了,通知依赖去更新 Dep.notify(); // 本次新增 console.log("数据被改变了,我要把新的值渲染到页面上去!"); } }) }
什么是依赖
那所谓的依赖究竟是什么呢?上面的图中已经暴露了答案,就是Watcher。
Watcher 「中介」
Watcher就是类似中介的角色,比如message就有三个中介,当message变化,就通知这三个中介,他们就去执行各自需要做的变化。
Watcher能够控制自己属于哪个,是data中的属性的还是watch,或者是computed,Watcher自己有统一的更新入口,只要你通知它,就会执行对应的更新方法。
因此我们可以推测出,Watcher必须要有的2个方法。一个就是通知变化,另一个就是被收集起来到Dep中去。
class Watcher { addDep() { // 我这个Watcher要被塞到Dep里去了~~ }, update() { // Dep通知我更新呢~~ }, }
以上是“Vue响应式原理Observer、Dep、Watcher的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:Vue响应式原理Observer、Dep、Watcher的示例分析-创新互联
链接地址:http://scyanting.com/article/ddidsi.html