00:00
Hello,各位亲爱的小伙伴,欢迎大家今天继续啊,跟老师一起来学习密友源码探秘系列课程,我们这次呢要讲的是数据响应式原理啊,这也是大家期待已久的一个课程,然后呢,大家也知道是在面试的时候啊,非常爱考察的这么一个知识点啊,那我们的课程内容和目的呢,就是彻底弄懂VIEW2的数据更新原理,为什么不是VIEW3呢?因为VIEW3呀,我们会可能会去单独的啊去用视频来去讲解,所以小伙伴不要着急,我们现在呢是要用VIEW2啊,V2这个现在面试的时候也是非常爱考的,就是彻底弄懂V2的数据更新原理,然后手写相关的实现代码,让相关知识呢不再处于忽悠阶段啊,那么这个忽悠阶段这四个字非常的有意思,这是老师之前在代课的时候啊,然后就听这个。
01:00
那同学面试回来,然后就互相聊天啊,然后这个A同学就说,诶你面的怎么样啊,然后B同学就说,哎呀,我回答这个题,题题答的都是忽悠阶段啊,并没有真正的了解,然后老师一说这个忽悠阶段这个词呢,用的是真真的是很到位是吧,咱们很多小伙伴呢,都是有一些知识呢,都不求甚解啊,就是在面试官面前啊,能够啊说一些keyword,就是说一些关键词啊,然后就嗯,如果能蒙混过去就蒙混过去啊,大概就想的是这样子的一个啊一个一个我就忽悠嘛,对吧,但咱们这个课程呢,能够让大家啊就摆脱这个忽悠阶段,那像这个图对吧,图当中这个图呢,就是VI友的一个官方网站的一个图,那么这个图当中呢,啊,到底。就是啊,它里头表达的内容内涵是什么呀?诶,那我们呢,都会通过手写相关的代码来进行一些实现啊,所以呢,这个课程呢,是非常的好的啊。
02:03
那么首先呢,我们先从MVBM模式说开去,MVVM模式呢,大家其实很啊,就是因为日常都在拿VI开发嘛,所以应该很了解了,就说白了就是数据变了,视图也会变啊,那么首先呢,你要先去写模板,模板的话,然后咱们就改变这个数据,this4.h加加之后呢,由于数据变化了,视图就会变化啊,那么它这块呢,就叫做MVVM模式,Model表示数据模型,View呢表示视图,View model就是它俩之间的桥梁,就是一个视图模型啊,就把它俩连接起来了,那么。这个时候呢,你就会发现它就要比咱们原来啊编程的时候那种命令式,哎,就是要来的简单多了,原来我们要改变变量的值,而且呢,还要让界面就是什么inner啊,HTML呢也要发生变化,但是现在呢,你会发现不用对吧,哎,它就直接改变数据就能引发视图的变化啊,那么这里呢,就不得不提一个知识,就叫做侵入式和非侵入式。
03:08
咱们的这个view啊,它数据变化呢,叫做非侵入式,你看我们让这个A属性的这个,呃,属性值变化,我们直接让this.a加加。这个时候你有没有发现我们并没有去啊调用任何其他的API。我们在这里是不是就是感觉在给this这个对象的A属性在进行加一操作,自增操作,我们并没有去调用view给我们提供的什么API,但是react和小程序不是这样的。在react当中呢,我们要想改变数据的值呢,我们必须要去调用set state属性,哎,方法,而小程序当中呢,必须要去调用set data方法。那这样的话呢,你就会发现它就等侵入式,就是我写程序的时候呢,我需要刻意的去调用人家给我提供的API,我才能去改变数据的值。
04:04
那么对于这种侵入式的话呢,你是非常好理解它的一个数据响应式的原理啊,什么叫数据响应式原理呢?就是为什么数据变化视图就变化啊,咱们刚才可能在这张PPT上一直没有说,就是实际上咱们这节课一直要研究的就是数据响应式原理啊,那响应式呢,实际上就叫做啊,为什么数据变了视图就变,就这个MVVM模式到底是怎么实现的啊,就说白了。好,那咱们继续来到这儿,那这个时候你就会发现侵入式的这种语法啊,那它实现响应式呢,咱们是能想清楚的。因为他就把视图的更新封装到了set state当中。对吧,也就是说set state这个函数当中呢,不仅可以改变数据,而且可以去改变视图啊,就起码呢,我这个函数一调,哎,我就可以让这个函数当中呢,是不是就可以去啊,书写一些语句,然后去改变视图啊,但是这种非侵入式呢,它就比较神奇了,就是我没有调用任何的函数。
05:07
我就改变A属性了,这是JS天生赋予的能力,那为什么改变A属性之后呢,这个视图就能自动变化呢?诶,那这个呢,实际上就是利有的一个神奇之处,很多同学知道是因为这个oble DeFine property啊,那么他呢,就被老师戏称为上帝的钥匙啊,咱们的尤禹西就是小右同学啊,找到了上帝的钥匙。哎,这是老师发明的一个比喻,为什么叫上帝的钥匙,就是说它很神奇啊,它很神奇,那这个东西是干嘛的呢?什么叫object DeFine property呢?它呢,可以做数据劫持和数据代理啊,那么它是JS引擎赋予的一个功能,不需要去引用任何的包,也不需要装任何的插件,天生就能用,从IE8开始兼容它呢,就可以检测对象属性变化,也就是说利用JS引擎赋予的功能呢,我们就能轻松的知道某个对象的属性是不是发生了变化,所以呢,诶,View呢,就是以这个啊欧布价的范property为主要的一个核心来实现了这个数据响应式。
06:17
但是这里一定要注意的是,仅有上帝的钥匙是不够的啊,还需要设计一套精密的系统,就是我们之前给大家看的这种图片啊,它只有这个object property是不行的,还需要有各种精密的这样的一套系统,那么这套系统为什么要存在,然后这套系统呢,它设计的为什么很精妙,值得咱们学习者去学,实际上呢,这些真正的奥义啊,就它的这样的一个,呃,就是它的一个内涵,都是咱们这一整节课要学习的知识。好了,那这就是咱们课程简介的全部内容啊,包括这个上帝的钥匙,我们下个视频我们就要开始正式的开始讲解了啊好,咱们从下个视频开始,咱们讲解干货。
我来说两句