00:00
好嘞,各位,那在这一小节呢,给大家讲一下这个reactive函数这个词reactive直接翻译过来呢,有反应响应的意思,那我们就取它的这个响应这一层含义,然后理解为什么呢,叫做响应式,来读一下它的作用啊,叫定义一个对象类型的响应式数据。我们刚才讲这ref吧,人家的作用是定义一个响应式的数据,很明显啊,在这儿呢,加了一个限定的词儿,意思就是reactive这个函数只能定义对象类型的响应式数据,不能够定义基本类型的响应式数据,那ref就是属于来者不据,你给我基本类型的可以,对象类型的呢也可以。那说到这儿大家可能有一个感觉啊,说老师啊,放心吧,以后呢,我就多用这个家伙,为啥呀,他方便呀,我给他什么他都能处理,基本类型可以,对象类型可以是吧,喜欢他,那这个有点low不咋地是吧,我只能给他对象类型,基本类型还处理不了,放心吧,肯定多多用ref a同学先别着急下这个定论,可能一会儿啊,你就不这么认为了,来,我们去验证一下各位把后半句话读一下基本类型,不要用这个reactive,要用谁呢ref函数来回到我们的代码里,接下来呢,我不听话,我就偏要用这个reactive去定义一个基本。
01:20
类型的响应式数据,看看能不能行,那么第一步呢,当然就是哎引入它reactive view3的特点呢,就是用点啥,哎你都得去引入一下啊,那在这呢,我随便写一个数字吧,比如说呢,叫做number,完了它的值呢,我不能直接写666啊,你这么写的后果它不是响应式的,我想把它做成响应式的,那就reactive,走666,同学ref这个咱就不是了,我那年龄不跟他一模一样吗?是吧,各位来撤回来,走reactive,哎说老师你接着写啊,把这个number在下方呢,得交出去,完了模板里得用,同学我都不用写那些,我就22行写完了VIEW3就已经受不了了。来回到页面看效果,各位说的多明白呀,读一读,说一个值不能够被做成一个响应式的,谁呀,这个666,哎,那也就证明了一件事啊,同学,别给reactive传入基本类型的数据,他真的处理不了,别难为他了啊,你应该给他一个对象类型是不?各位,那在这呢,我就没有必要我重新写一个对象。
02:20
啥呢?你看这同学,我之前不是写过一个对象吗?哎,就是工作这个对象,那么接下来你瞧好了,我把工作这个对象用react,哎,给它定义成一个响应式的对象,哎,这回呢,我们来看一下,哎说老师不就换个词吗?刚才用re EF是吧,现在呢,用reactive是那么回事,我就换个词,但是同学就是换了这么一个词儿,你读取和修改数据的时候就非常简单了,在这啊,你不用点VALUE6,哎,就直接输出这个job就可以了,不信你瞧啊各位,我目前点击这个修改人的信息啊,我没改啥也没改,就是输出这个工作来看一下效果啊,刷新321走。
03:00
怎么样,各位直接输出了那个工作那个对象呗,但这儿呢,我也强调一下啊各位确实啊,咱们输出的这个工作对象啊,不是最开始我写代码的时候,我写的那个普普通通非常传统的那个object对象,确实不是因为我们看见了它输出的是一个pro,哎,这么一个实例对象,说老师为什么要这样做呢?啊,那你看我亲自写的这个object普普通通的对象,怎么就经过他的双手就给我变成了这个东西呢?一个pro side的实力对象呢?啊pop为啥他要这样做呢?说一下各位,之所以人家存在红色这条线,是他为了把你的数据变成响应式的,你直接写个object,它不是响应式的,人家得变成pro实例对象,诶,你发现你去修改这里面任何一个属性VI3都能监测到,然后都能呢,帮你去更新页面,那这个时候啊,可能有一些同学说老师我教教有雨锡吧,不用用这个什么object对象转为。
04:00
Pro来,我教你啊,我教教游禹锡,教教这个view的作者,你这样写啊,利用object.DeFine property,利用那个get,哎,还有那个你也能实现这个响应式,同学确实可以,这不用咱教VIEW2里边人家就是这么做的,是不?各位,但是咱说了嘛,在VIEW3里边人家换路子了,就这些东西咋的人家不用了,也就是说VIEW3在处理对象类型响应式的时候,人家用的是啥?用的是ES6新提出来的这个东西prox,哎,在下一小节我们就去详细的探讨它的原理,那么在这一小节呢,咱们就是会用就行,哎,同学你就做到心中有数,你只要看到这玩意儿了,哎,你看到了这么一个东西存在,那就意味着这个里边无论是这个属性还是这个属性,你改任何一个VI3都能监测到,哎,它都是响应式的,就得了,一会儿再研究原理呗,哎,好了,回来各位,那你看不用点value了,是不是挺简单的,来对比一下之前我是不是得写ref呀,哎。
05:00
然后呢,你写了ref,那你在这就得点Y6说老师我就不点,那你就不点,那你自己就看走,哼,拿到的是一个什么?咱之前说过这东西叫做REF引用对象是不是?各位,你想拿到真正的值吗?老师,我想那就点Y6去,那你看Y流里边是什么呀?那放的不就是刚才咱说那个普通的object对象转为的那个pro对象是不?各位,咱之前也跟大家渗透了这个ref里面,同学之所以它能处理对象类型的响应式,是因为ref偷偷的,他也求助了谁就咱刚才写的人reactive是不?各位你在这你看吧,同学,只有reactive才能把数据或者说精准点说,才能把一个对象类型的数据给你变成pro这种实例对象是不?各位,哎,好了,回来啊,那你在这真想取,那你就得点Y6,为啥点Y6同学最后啊,最后墨迹一遍,我点Y6是为了取到ref里面真正传入的值。
06:00
啊,当你再想往里边取的时候,你发现这个对象,那么你们心里明白各位,这个ref其实也求助了谁,求助了那个reactive函数,然后就把你这个东西变成了一个proxide,哎,那个实例对象是不是各位啊,OK,来,回来还是用reactive,那在这呢,就别点Y6了呗,删掉哎,那同学你说我想改数据,那得怎么改啊?来吧各位,解开这,解开这,你告诉我怎么写,所有的点value是不是都删掉啊?哎,直接这么改是不就可以了?来,我们测试一下,刷新一波走你。种类薪水是不都变了,说老师前两个那我不住掉了吗?解开不就也能变了吗?来回到这儿刷新一波走,你这不都变吗?嗯,那接下来呢,我们再测试一下啊,看看这个reactive它到底牛不牛,怎么测试它牛不牛呢?各位来在里边啊,我写1A的值是一对象,我再写1BB的值也是一对象,B里边有1CC的值是666,那么接下来我想测试的是我把这个东西套的层次很深,然后我去改这个C,哎,那我就看看reactive给我返回的那个改什么所谓的pro对象能不能监测到C的变化呢?来测试一下,首先呢,我把这C啊在页面上用一下啊,那在这呢,再写一个,嗯,来一个叫做测试的数据,谁呢?C怎么取啊?各位告诉我job点是不是得拿到这个A呀,然后呢,点b.C是不是拿到这个值啊好,那我改的时候各位多改点东西呗,啊再来一行吧,删掉这是点。
07:35
a.b.c给它改成多少呢?随便改一个叫做999 OK写完了回到这儿呢,刷新一波,看一下效果啊走,你能不能变能,也就是说同学reactive处理对象类型响应式的时候是一个深层次的是吧,各位,哎,好了,我们再验证另外一个问题,就是这个reactive啊,能不能处理数组类型的数据呢?是不来测试一下,比如说呢,让这人啊,还有一个爱好,好呗,然后这值呢,是一个数组,哎,我先直接写啊,叫做抽烟,再来一个喝酒三大爱好是不是?各位,哎,那这个呢,抽烟喝酒烫头,OK,写完了吧,那你这么写啊,同学肯定是不行的,哎,咱测试一下啊来,我把这些东西全都给你注掉,我改的时候啊,我就想改一下这个好杯里的第一个爱好,那我就把这个来给他写一下啊,第零个,然后让他是什么呢?别抽烟了,伤身体啊,学习吧是吧,学点习多好来那这好北我是不是得给他返回出去啊,那在页面。
08:35
上我是不是也用一下了,往上滑找到这儿啊,放这儿吧各位,我把这测试的放在最后,诶,这叫做爱好好,那这儿呢就直接写,不是job点啊,直接就是ho呗,给它放在这儿,OK,那回头呢,看一下效果啊,刷新一波,抽烟喝酒烫头是不?哎,那回头你看我代码我这儿写没写修改的是不是也写了,那你看看能不能改掉呗,321走你啊直接跟大家描述数据已经改了,但是有三,那没有发现是不好了,回来不墨迹了,各位把这个数组变成一个响应式的,那得怎么写呢?来一个reactive,哎,然后开始把这东西丢进去就可以了啊读呢同学你就直接通过索引读就可以了,那改呢,直接通过索引改。同学慢慢的分析一个事情,我们在VIEW2里能这么写吗?
09:24
不行,同学你还记得吗?VIEW2里面我在给你讲那个什么马冬梅改成什么,什么马老师,那个大家还记得吗?就是我直接通过索引啊,是改不了的,哎,但是在比三里同学,由于人家已经不用那个DeFine property了,人家用的是非常高端的这个东西,哎,那就意味着你直接改也行,哎,通过索引值改也是可以的,来我们看一下效果啊,各位刷新一波,抽烟瞄紧这啊走,你学习是不是变了?哎,那也就是说这个reactive咋的,他也能处理这个数组类型的数据啊,说老师不行,我还是觉得不好,因为reactive啊,太局限了,只能处理对象或者数组,我还是喜欢ref行,不见棺材不落泪,来各位,我把这些都给你解开,这行呢,输出注掉,这行呢,也给它注掉,这行删了去吧,这行也删了去吧,各位你看看啊,通过ref定义的响应式数据,你得这么修改。
10:19
哎,通过react定义的呢,诶你这么修改,你说谁香呢,老师,我还觉得上面的香,同学你看看绿色框里的代码。点value.value你觉得同学这个东西好吗?那也就是说我不管你通过ref定义了多少的数据,这点value啊,你就写去吧,一直出现在你的代码里,特别的恶心啊。而且还有这么一个问题,大家你还记得不?就说如果这我写成ref,你说就这些东西我都得咋改?哎哟,我天恶心死各位,照不点歪点,照不点歪点,照不点歪点是不?各位,那你现在还觉得ref好吗?哎,所以说撤回来各位啊,还是谁更像一点呢?Reactive,我知道现在有一些同学可能就拦我了,老师你就在那说胡话来,我就问你老师name和age,你给我用reactive写一下,我看看说的倒轻松,站着说话不腰疼,你写一下reactive,处理不了基本类型是吧?同学说老师我在这,我不想写reactive啊,那刚才你验证完了吗?张三18基本的都处理不了,那怎么办呢?我们呢,有一个套路,套路怎么写呢?看着各位就这些东西啊,你瞧着你瞧着,我都不要了。
11:25
老师,那然后呢,然后我这么写,Let,一个person哎,直接定义一个人的对象完,这里边有什么呢?Name,哎,然后值呢,直接写张三,哎,然后接着再写,还有什么呢?A值啊值呢18哎,还有什么呢?就是这个工作拿不来对象,那里面呢,包含着这一堆东西,是不是各位放在这儿缩进呢?调一下OK,工作写完了,那折叠起来,我们再往下写,还有谁呢?Hobby这个爱好值呢,数组。好,各位,你看干干净净的数据我就正常写对不对,那随后啊,我就做一件事儿,我就把这person交给谁reactive,哎,给他把这person交给他,那么reactive加工完了之后,是不是得有一结果,那你是不是得收到啊,那当然你可以管它也叫person,但是这样的话,同学命名就冲突了,这有一个,这有一个是不是你这可以叫做P是不?各位,哎,那你交出去的时候来先不考虑修改,你交出去的时候不用交这么多的东西了,是吧?名字,年龄,工作,直接交一个东西出去什么呢?就是这个P是不是就可以了,那为啥写的这么复杂呢?各位,先定义一个普通的对象,再交给react,然后变成一个响应式的对象,没那必要吧,直接来吧,别客气,这对象直接交给谁reactive,这不就搞定了吗?这名换一下person是不是得了?各位,那在这儿呢?嘿,直接person完事了呗,那模板里呢,你就得弱弱的改一下,各位,这确实是,这得是person点。
12:59
Name person.H那这儿呢,person.job.type这也是person点,这呢也是person点,咱先这写着,后边有解决办法,我知道你现在有点嫌这个person点烦,那我不嫌烦呀,是吧?哎,一会儿再说,走着person.OK这不就完了吗?先看一下初始化数据,刷新一波,各位是不是都正常显示啊?嗯,好了,回来,那我改呢,各位改就太简单了,不用再在这点value溜点value了,是不特别烦,而且这东西咋的它不语义化,你不觉得这个name就本应该是名字吗?不用再点value了是不?那接下来你就可以这么写了,想改的时候你就person点就得了,那这儿呢,person.person.person.person.person点这个点value不要了,我知道啊,现在在这肯定有同学说,哎呀,老师你看看你这动的啊,刚才呀,说这个点value太烦了啊,说写了好多遍,好家伙,你在这写了一堆person person person同学,回头我们会有处理办法的是不?哎,先这么写着呗,哎,来,回到这儿刷新一波,至少我给你讲这么写它语。
13:59
语义化是不来点击一下走,你OK,哎,可别小看说不写这点Y6能让你的代码呢读起来更顺畅对不?各位,哎,OK,这就是谁的使用呢?React的使用,那我就把这一堆杂的各位我就都删了去了,哎,因为这个里面包含着我去处理那个基本数据的是不是这re EF呢?哎,我也给它删掉了,都拿什么写呀,Reactive,但这东西啊,它也不是绝对的个位,就如果说你想用ref,那当然也可以啊,你只要把握好这个东西就行,哎,你得能把握住啊是吧?点Y6OK,那我们管这个叫做什么呢?数据,哎这个呢叫做方法,里边呢去改东西好了,来我们总结一波吧,各位啊,叫做这呢语法cost,这呢,同学说到了两个词。
14:45
一个叫源对象,一个叫代理对象,从我们的代码上体现呀,这个就是源对象,源对象是啥意思啊,就是源头,就是你自己心里面所想的你需要的那个对象,但是这个对象呢,不能直接交给view,直接交给view不是响应式的,那你就得借助这个reactive把你的这个绿色的原对象加工生成一个粉色的person,叫代理对象,哎,理解理解,一个叫原对象,一个叫代理对象,为什么这么做呢?啊,目的只有一个,让数据变成响应式的,那么reactive的返回值呢,就是一个代理对象,简称proxy对象,其实这的同学标准点来说应该叫这个proxy,然后叫做的实例对象是不是,然后来一个逗号,简称process对象,这回就完整了。好,我们再往下读啊,这个reactive内部定义的这个响应式呢,是深层次的,来我调一下这啊深层次的就是不管你藏的有多深,我都能给你挖出来,变成一个响应式的,来读最后一句。
15:46
话,内部是基于ES6的pro实现的,是通过代理对象,哎,就是这个家伙,然后对原对象,也就是这个家伙进行内部的数据操作,并且这种操作是可以被view所捕获到的,人家会发现你改的东西,这不就我们说的数据劫持吗?哎,想了解它的原理吗?啊,那在下小节我们去研究下,小节呢,我们会把VIEW2和VIEW3里的这个响应式原理呢进行一个对比,好了各位,那这小节呢,我们听。
我来说两句