00:00
好嘞,各位,那从这一小节开始呢,我们就进入第三章,给大家说说一些其他的组合API,在第二章里面我们讲到的这些啊,都是比较常用的,那第三章里的这些呢,不太常用,但是大家呢也应该了解一下来讲第一个啊,叫做shallow reactive与shallow ref reactive和ref我们学过了,哎,是专门定义响应式数据的,那么前边加个shallow这什么意思呢?首先查一下这词啊,各位打开有道搜索一下,这词儿直译过来呢,有肤浅的啊,浅薄的意思啊,那在我们这儿呢,我们理解为这个啊,就是浅层次的,哎,那这个shall ref有什么作用呢?来各位咱直接代码上见啊,找到刚才写的东西,然后找到这个DEMO啊,然后我把这些注释啊都删掉,因为刚才讲的to RI和ris呢,已经放在这里了,是不是各位,哎,那这块呢,删掉这个呢也删掉啊,那这些东西呢也删掉,哎就到这你都知道我这么写。
01:00
是什么含义了,对吧,各位啊,先把这两个人呢,给他引入,第一个人呢,叫做shallow active啊在这呢,再来一个叫做shallow ref,我刚才定义person啊,这个数据的时候是用什么定义的,Reactive这词什么意思,叫响应式的,好,那先看一下效果啊,刷新。我修改名是不是能改,我增长年龄,原数据和这是不是都能改?哎,我涨薪也是可以的,也就是说名、年龄、薪资都能随便改,那接下来呢,同学对比一下,我不用reactive去定义这个数据了,我用shallow reactive,意思就是浅层次的响应式,哎,其实说白了意思就是name你改响应式,Age你改响应式,但是job里边的这个G1SALARY你改,它不是响应式的。啊,就是层次很浅,咱之前不说过吗?这个reactive会便利所有层次的数据给你调成响应式的,那你用了这个shallow,就是只处理第一层,第二层它都不处理,来瞧效果啊,刷新一波,修改名可以改,因为名是第一层的,年龄也可以改,但是同学job里的这一里的salary很明显它不是第一层的了,是吧,你点哎,没有效果了,所以说同学说完了,这就是shall react和reactive的区别啊,一句话,Shall reactive只考虑对象类型的,第一层的响应式里边的不考虑,OK啊说老师那什么时候用呢?一会儿我们再说啊,先观察它来再说这个shall ref啊,那我把这个呢,各位还调回来啊,那薪资我还想让它变啊,还写过来,那这样吧,我把这个呢,给它放在这儿,诶复制过来放在这儿,完这行呢,我注掉啊完再来一行把这行解。
02:57
OK啊,这块呢用正常的这个reactive,那在这儿呢,给大家写一个注释啊,叫做只考虑第一层数据的响应,是我在这儿呢,就是写一个大概的注释啊,咱们真正的总结在那个笔记里的,来咱说这个ref吧,来各位把谁给它加回来呢?把这个人给他加回来啊,我let一个X,哎,Re EF啊是一个基本类型的数据,一上来那是零,OK,把X咋的交出去,那模板里是不是就能用啊啊那我在这呢写一个HR做个分割线,在这呢写一个H4走,叫做当前的X,是当前的X值是在这写X,下边呢来一按钮叫做点我X加一,在这来一个点击时间click,哎,直接写X加加就可以了啊同学来看一下啊,用ref定义的正常的一个基本。
03:57
本数据类型的响应是X,然后交出去了,模板里面用了,然后在这加加了是不是各位,嗯,看一下效果啊,刷新一波走着,哎,没什么问题,好回来各位,接下来我不用ref了,我用shallow ref,哎,它是干什么的呢?我先不告诉你,你猜一猜啊走换了啊shallow ref,说老师这能有什么样的影响呢?说老师你要说对象类型吧,这玩意儿有层次。
04:25
哎,说低层的我考虑,然后以后的我不考虑了,其他层说老师这零它没层次,那你这个浅层次的ref我得怎么理解呢?来看效果吧,刷新一波走呀呀呀呀,是不是还好用啊,说老师拿你这我知道shadow ref和ref没区别,诶不是的,各位有区别,它俩的区别体现在你传入的是不是对象类型,你传入基本类型,咱真得说ref和shadow ref没有区别,但接下来同学如果你传的是一个对象,哎对象里面有1YY的值是零,同学,这可不是基本类型了,对不对?X呢,我刚才就交出去了,那页面想展示那个零,那这回我就得这么写了x.Y诶,那在这也得说当前x.Y的值,那这会也得是x.Y咋的加加,诶来回到这儿看效果啊,各位糟呀。
05:25
不行,是不,哎不能加了,那如果我用ref呢?走大家都知道re,如果你给它传入一个对象类型的,它底层也求助了reactive物变成一个prox的代理对象,是不是?哎,也是想用式的来刷新一波,走是不是能变?哎,那你告诉我吧,Ref和shallow ref有什么区别呢?啊,区别就在于shall ref不去处理对象类型的响应式,Ref是属于很努力的工作,哎呀,你给我基本类型啊,行,我给它写成get c让它是响应式的,诶那你给我的是一个对象类型啊,啊,那我得求助一下我大哥谁呢?这个reactive让他帮帮我,但是同学shallow ref属于不求人。
06:13
哎,你给我基本数据类型,我能做响应式,但如果你给我的是这个,我不考虑给它做成响应式的,我也不在我的内部去求着他帮我做响应式了,不是了,所以说你看这就不变啊,说老师那倒也是,那它是怎么实现就没变的呢?哎,各位输出一下这个X,我们就什么都明白了,来在这conso log这个X,我看页面上还有没有别的log啊,应该没有别的log了吧,嗯,就这一个来各位啊,输出X前面我给你加一个这个吧,加一个星号,嗯,同学先正常些啊re EF来回到这刷新一波来各位点能能不能行,哎,能行,是不是想应式的,哎,是好,现在你输出的是什么呀?Ref对象啊,我是用ref创建的,是不是打开同学找看这Y6是什么啊,走,看到这个我们就什么都不用聊了,一看到这个东西,我们马上知道了,这东西一定是响应式的,你说对不对,诶,他不就把你那个VALUE6,就把你这个东西。
07:14
就这个东西,哎,Object类型的对象是不是变成了一个proxide的实例对象啊,哎,OK,这不就响应式了吗?嗯,也就是说我用re EF,我传递的如果是对象,它还是求助了reactive变成了proxy实例对象,从而办到了响应式,那如果说诶,我写的是shall re FA撤回来复制放在这儿,你再瞧这你就明白它是咋回事了。回到这边刷新表面上看吧,也是一个re对象,你打开,你点Y6你就明白,哎,同学咋了咋了,没求人。你给他的是object,哎,这哥们真实在拿过来就用了,所以说你打开里边确实有值这Y0啊,跑到页面上没毛病,但是你就是改不了,对不?因为不是响应式的,哎,其实数据改了,但是VIEW3没有监测到是不?各位哎,那你看在最后对比一下这写ref,来最后再看一眼走刷新一波啊,你打开,那这是proxy,你再打开,同学你这是有这Y0的,你这玩意一包裹不要紧,那不就响应式了吗?OK,讲完了,Shallow reactive shallow ref说老师呢,应用场景呢,来总结一波吧,各位读一下啊,Shall react只处理对象最外层属性的响应式,哎,是一个前响应式,那么shall ref就是只能处理基本数据类型的响应式,不进行对象的响应式处理啊,那不处理,那它怎么玩呢?就是直接把你的对象放里面去,就是一个object类型的是吧?哎,那什么时候使用呢?来读一下,如果有一个对象数据结构比较深,但是变化的只是。
08:50
对外层的那些属性,你就适合用什么呢?Shallow reactive,哎,就是可以做一些性能上的优化是不?你比如说我有一个person对象啊,这个对象的层次特别的深是吧?但是我心里呢,还明白它只是改第一层的那些东西,哎,那你就可以用shallow ref去定义它,对吧?再看第二个说如果有一个对象数据后续功能不会修改该对象里的属性,啥意思?就是我有一个对象,我交给了谁呢?我交给了ref去处理,但是呢,我自己还心知肚明,就是以后啊那些功能它不会修改,就比如说来ref,我给你传了一个OBJ是吧?来一个对象进去把我自己呢心知肚明,就是后边的那些功能啊,不会修改OBJ里边的某一个属性,那请你不要用ref了,用谁比较好呢?Shall ref,然后再读后半句啊,说不会修改该对象中的属性耳。
09:50
生成什么新的对象来替换,老师,这啥意思呢?没懂来回来各位,咱就拿这X说,我现在很明确,以后不会修改X里的Y,那你就用谁shall ref对吗?我自己明确呀,我不修改这个Y啊,啊,那在这同学你说你不修改,你得说到做到,你真不能改,说老师,那我点这个,我想加一,那以后可能就不是加一,叫做点我替换X,那在这怎么写呀,X等于替换一个对象吗?里面也有Y,但这Y呀,是888这个数字,那这回你瞧各位啊,我用shallow ref定义的,我不考虑你里边Y的响应式,我以后呢会整个把这X替换掉,那你看一下效果呗,1.a是不888,嗯,哎,说老师,那这怎么有响应式的呢?哥们,我现在的响应式是X的响应式。
10:50
里边的Y不参与响应式对不对?哎,或者我把这按钮给你留着,哎,叫做点我x.Y加加啊,那在这怎么写点Y加加是不?各位来回到这边你加吧,没有效果,但是你替换X是可以的,对不?各位,哎,一定要本着一个原则啊,同学,我不管你用的是什么ref啊,还是这个shallow ref,还是reactive,还是shall reactive,同学,我不管你用的是啥,就你得到的这个东西第一层肯定是响应式的是不是?哎,X肯定也是响应式的,只不过说里边往不往深挖这个问题对不?各位,哎,好了,这就是我们讲的shallow reactive和shallow ref,不见得非得用啊,就是一个了解好这小节呢,我们听。
我来说两句