00:00
好嘞,各位,那这一小节呢,我们给大家说一下这个read only和shallow read only read only这词呢,大家应该知道,哎,它的意思呢,是只读的,就是你只可以读取,不可以修改,那么shallow这词儿我们在上一小节已经见过了,它的意思呢,是浅层次的,那么连起来读就是浅层次的只读这两个东西有什么作用呢?来咱代码上见啊,打开刚才写的东西精简一下啊,在这儿呢,不用这个s.Y这么麻烦了,就直接说啊,当前呢,这个求和为,然后呢,我直接读取这个sum,不需要两个按钮了啊,就一个就是点我加加,然后在这儿呢,逻辑很简单,Some加加写完了,然后这个person我不想直接展示到这个H4里啊,其实之前呢,我是为了演示问题,对吧?各位,诶,我把这person整个交给你来看,下边我把person整个交给你,我再把这个person拆解一下交给你,其实这个不用再交给大家了,是吧,把这个呢。
01:00
删掉了,然后划到上方,这儿呢,我也就不展示了,但是姓名年龄薪资照常展示,而且薪资照样让他藏的很深啊,一会儿我要说明一个问题,好同学啊,别乱,就这些结构吧,我不想来来回回,每个视频一上来都重新写这些东西,一个求和一个人的信息,能把很多的问题都演示明白,OK,来,咱接着往下说啊,这些东西啊,我也不知道用谁还是不用谁,先改里边的东西,这行删掉,然后留下一个人的响应式对象在这,对不对啊,那这些东西都给它删掉,换名了,不是F了,是谁呢?是sum,然后写一个RF,初始值呢,让它是零,然后把它呢放在上边,哎,放在这儿能好看一点啊,走,数据啥的都连在一起了,然后再往下,各位,我直接返回一个sum啊,还有就是人拆解之后的这些东西是不是就可以了,嗯,那我把这个删掉,这个呢也删掉,然后呢,这个to ref也删掉,OK,哎,就这么干干净净的一个案例回来刷新看一下效果啊,能加。
02:00
能改名,能增长年龄,能涨薪资,OK,行了,那回来我们提出一个需求啊,就目前来说,各位你说我的萨和我的person是不都属于响应式的数据,响应式的数据的特点就是你只要改了这里边的数据,那么页面里面用到数据的地方是不就自动更新,这不就叫做响应式吗?好,但有些时候各位我不希望你修改这个,我也不希望你修改这个啊,我想把他们两个有一种感觉堡起来,我不让任何人去修改它们,那这个时候就可以借助这个read only了,来同学给你操作一波啊,我在这儿就写一行代码,我就能把这person保护起来,哎,我这么写啊,Person等于read only,把person给它丢进去就被保护了啊说老师它有什么作用呢?来分析一波呗,Read only呢是一个函数,它会接收一个响应式的。
03:00
数据我给没给他一个响应式的数据,给了谁呀,Person,而且我这person呢,还很高端呢,是拿reactive定义的响应式数据,对不对?各位好,那么read only就拿着你的这个响应式的数据,诶,就给你加工了一番,重新给你返回了一个person,那么这个person里面所有的东西都不允许修改啊,那看一下效果啊,各位写完这个代码了,其实我这有一个覆盖的动作,是不?各位我拿到这个person,然后呢,用read only去加工,加工出来的新person覆盖掉了上面的这个是不是这意思?各位来回来刷新一波,你发现你改名,你增长年龄,你涨薪资,各位都不让你改了,而且控制台有警告,Name age salary这些东西都是read only的,对不?各位。啊,也就是说页面没变,同学,页面没变吧,有两种情况咱得这么说,第一种情况咋的数据改了,但是您的数据呢,它不是响应式的,也就是说你数据那边变出花来,V又监测不到,诶这是会导致什么呢?这个页面不更新,还有一种各位就是数据压根就没改,咱不说view监不监测的事儿,数据压根就不让改是不?这就属于第二种情况,诶你看你借助V的开发者工具啊,各位你刷新一波,我把这些东西啊都给你打开,你瞧着改改改,这里边数据没有一个敢变的,为什么呢?因为read only了,那么跟它对立的还有一个什么呢?叫做shallow read only,不能说对立啊,跟它类似的,来来,把这行代码复制一份,这个注掉叫shallow read only同学,你能猜到为啥叫shallow了?
04:45
啊,你能知道为啥这个job我同样要把它嵌套的很深的这些层次,是不就是为了掩饰这个shallow来直接告诉大家啊,这个shallow read only只考虑对象里的低层数据,只是说内幕edge不让你改,但是你job本里的G1和salary可不可以改,可以,那这个时候看一下效果,刷新名和年龄来回到这儿,名和年龄你甭想改了,但薪资呢,你看是可以改的,诶,这就是shallow read only,哎,所以说难吗?一点也不难,给我一个响应式的数据,然后呢,我让它变成只读的,OK啊说老师那这个read only和shall read only就只能接收person这种类型呗,就只能接收reactive生成的响应式对象呗,不是个呗,生成响应式数据是不是还有另外一个办法,是不是用ref呀?哎,它也可以对这个ref生成的数据呢进行限制,来我们测试一下,各位走着解开这换了sum,那这呢也。
05:45
换了some,先测试一下这个read only啊,走着各位,我这么写不要紧,你说谁改不了了,这个是吧?走,你看每次点都有警告,那这是用什么呢?Read only,说老师呢,他能不能用shallow read only呢,也可以,效果都是一样的,对吧,各位,但是在这儿呢,我觉得你没有必要用这个shallow read only,你说为什么呢?因为这个零同学他没有层次可言。
06:11
对不人这个对象可以说对象里面有对象,对象的一个属性还是对象,它可以嵌套,你说对不?哎,但是在这同学零哪有层次而言呢,所以说同学就纵使你用了shallow read only,它也不会说限制里边的那些层次,因为没层次是不各位啊,那把这个呢也给大家写上啊,复制一行,然后这块呢,叫做shallow only,这四个呢,都给它注掉好了,那这俩API呢,我讲完了,但是大家觉不觉得有点怪怪的。怎么就怪怪的了呢?来,同学你想想啊,我在第20行到28行,我之所以这么写代码,我就希望我的person是一个响应式的数据,对不对?同学你慢慢品啊,哎,我就希望我的person是一个响应式的数据,那就说白了,我希望我的person被改。
07:00
说老师,我希望我的person是响应式数据,但是我不希望我的person被改,你这不有病吗?想响应是想走下去,开头的第一枪就是改数据,你说对不?哎,这么写觉不觉得有点自相矛盾啊?哎,20到第28行,我定义了一个响应式的数据person,然后呢?哎呀,我又后悔了,我又调read only,让这个数据又不能改了。同学觉不觉得从某种角度来说,这个API好像有点马后炮的意思,是不是啊?之前说能改,后来又又不能改了,说老师,我感觉你这代码写的是API,讲完了,但是谁这么写谁有病,那你这响应是完全又后悔了。说老师,那要这样的话。算了吧,是不,我直接这么写得了呗,这1PERSON说,老师你改数据你随便改呗,它不是响应式的,页面也不变,那不同样的效果吗?但是你要仔细说吧,其实也有区别,区别在哪呢?同学你这么写是属于数据啊,回头可以随便被改,但是由于您不是响应式的数据,所以说我又监测不到,所以说最终的效果是页面确实也不变,但你这么写,同学就有没有有一种感觉啊,是在从根上解决问题,就说我连改压根都不让你改,是不,各位。
08:13
哎,就有点什么感觉,比如说生活中我不想跟你出去玩,我可以在最开始我就告诉你,我不想跟你出去玩啊,还有另外一种办法,就是我一直拖着你马上要出去了,我说哎,不行啊,临时有事啊,去不了是不各位啊说老师那感觉意义也不大,同学,我再说一个场景,我跟你讲啊,它的意义就大了,一句话啊,这个person的响应式数据可能不是你这个组件定义的。想想各位,别人在别人的组件里面定义了一个响应式的数据,把这数据交给你了,然后告诉你说小张啊,你用行,你可别改,你改了我这边受影响,那你最好就是收到人家的东西之后,咋的来个read only,然后呢,你用什么呢?你用这个东西。哎,你把人家的数据接过来,用read only加工一下,生成一个新的,你去用那新的就算有一天你不小心改了,同学没事儿,他在这儿控制台能给你拦住,并且还会告诉你警告数据还真真的没有改,人家那边也不受到影响,对不?各位OK,哎,这就是read only与shallow read only,来把这个复制一份走着,这是第几个了呢?第15个了,下划线src,那我就把这两个呢,给它复制过来,然后改个名,然后呢,再来一个下划线shallow read only啊与read only来看一下笔记里的这个总结啊各位,让一个响应式的数据变成只读的,并且是一个深只读啊,那这个shallary only呢,同样是把一个响应式的数据变为只读的,但是它是前只读,哎,什么时候用呢?不希望数据被修改时,而且这个数据有可能是别人传给你的,好了,那这一小节呢,我们听。
我来说两句