00:00
好嘞,各位,那在这一小节呢,我们给大家说一下这个to肉与maer肉这个单词啊,Raw它的读法呢,叫做肉,那它是什么意思呢?来我们查一下啊,直接翻译过来呢,有未加工的生的原始,我们取这一层含义去理解啊,叫原始,哎,那to肉的意思就是把什么什么东西变成原始,那这个mark肉的意思就是把什么什么东西标记为原始,Mark不是有标记的意思吗?那这两个API有啥作用呢?来回到代码里面,同学,我们把刚才的东西啊精简一下,我不想用这个read only了啊,所有的数据都是可以随便改的,那这两个删掉啊,那这些呢,也给它删掉。好我们思考一个问题,各位你为什么要用ref和reactive,为什么呀?也就是说同学人这个对象,你咋不直接这么写呢,对吧?这不挺好的吗?人一个对象吗?
01:00
哎,同学我们都知道啊,这么写初始化展示是没问题的,可以读出来,但是以后你修改这里面数据的时候,页面里面用到数据的地方是不会更新的,因为它不是响应式的,哎,所以说同学我们用reactive,我们用ref的目的是怎么着把普通的数据,哎,你的零啊,你的什么这个对象之类的呀,变成什么数据呢?叫响应式的数据,哎,也就是说之前啊,我们一直学红色这条线,哎,编号为一,但有些时候啊,同学们,我们是需要把一个响应式的数据重新变回普通数据的,也就是说是第二条线,哎,我知道各位啊,第一条线太重要了,我们不能没有它,但有些时候同学第二条线你也需要,你得能去也能回呀,对不对啊,你不能说去的时候好好的,然后结果回不来了,是不是各位哎。
02:00
说说第二条线啊,第二条线呢,你就得借助刚才的那个东西叫做too,哎,就是变为原始的,来在这呢,我加个功能啊,各位协议按钮button叫做输出最原始的person啊,啥叫最原始的呀?同学,这个啊,我给你圈一下这绿色框里的这个就是最原始的person,你说对不好,给一个回调click直接写啊,叫做收原始的,刚说完那词raw person对吧,Show肉person,那在这呢,准备好一个方法方走,同学你说我直接输出person是原始的吗?肯定不是啊,来把这东西交出去保存来到这边刷新看一下输出最原始的person,走,这可不是最原始的。同学明晃晃带着这个东西呢,你说是不是?诶说老师,那我输出的是什么呢?完整的跟你说一遍,你。
03:00
所输出的这个东西,哎,就这个person,其实它是根据你这个粉色的真正的最原始的这个person对象加工而成的响应始对象,你说对吧,各位我不要这个啊,我要最原始那person,还有就是这儿各位你打开很明显它不是最原始的那个person对不对?诶那用谁呢?To肉来在这写一个中转变量啊p to肉我把谁丢进去呢?我把一个响应式的数据person丢进去,哎,随后呢,同学我不输出person了,我输出的是它所返回的那个P,哎,那这回看一下各位刷新一波走,你这才是干干净净的最原始的person对象是不?各位,哎,其实这个图照就有一种感觉,它是还原的感觉,那这呢是制作。哎,你用我去制作,制作完的东西,如果你想还还原回去,OK,我给你一个途径就是这个对吧?哎,用的不多,嗯,那在这儿呢,再较个真儿啊各位你说我这么写页面变不变啊,哎,我每次啊都是拿到这个东西之后,诶,然后我加加我操作的一直是这个P,你说页面会变吗?100%不会,因为这个P同学不是一个响应式的,是一个最原始的普普通通的object类型的这么一个对象,你想让页面发生变化,各位你操作的是不是得是person啊,得是借助这个响应式对象点内幕人家才能发现,是不?各位,哎,那所以说你看一下效果啊,刷新走走走走走走,年龄一直在增长,但是页面是不是不变呢?OK,这就是突然,嗯说老师,那你说这个东西能不能用在ref身上呢?是否给我的感觉是,诶,这里边啊得放一个响应式的数据,那响应式的数据除了用react。
04:53
不去定义ref,好像也是定义响应式数据的啊来,那咱试试呗,走着,那接下来呢,给你这么写啊,Cost谁呢?Sum等于什么呢?To,然然后把谁传进去呢?Sum,看看行不行啊各位验证嘛,来回到这边啊,还是这按钮啊,它这按钮确实叫输出最原始的person,但是里边我不改了吗?是不是各位来刷新一波啊,走,你同学咋了?Andde find,那也就证明它这个图肉只能是处理谁IVE所缔造的响应式对象对不对?Re,这个不行,哎,行不通,来把这删掉,把这个呢解开,把这个呢删掉,OK,这就是突绕,那还有另外一个各位,哎,也挺有意思的,叫做马克RO,哎就是把什么什么东西标记为一个原始的啊来同学加个功能啊,在这儿再写一个按钮,叫做给人啊。
05:53
这个添加一台车,一台车,然后在这呢,再给一个点击事件click艾car,哎是给人添加一个车啊,就意味着这里边还得有一个卡属性一会儿是吧,哎,走刚开始没有啊,我得点按钮才有,哎所以说在这儿呢,再准备一个方式,走着名字呢叫做这个同学,那你说一般来说啊,我给这个人添加一台车,这个车呢有几个途径获取,第一个途径你自己写一台车,第二个发送网络请求,服务器给你返回一台车,第三个其他组件或者vivox当中别人保存的数据,然后你拿出来的是不是各位,那在这儿呢,我就直接写一个light car走name,哎叫做奔驰在这再来比如说price price价格来一个40W啊,OK,大写的啊,写完了,那接下来呢啊,我是不是得往这个person身上来一个car啊,然后这块是不是。
06:53
Car啊,嗯,OK,那这个either car是不是还得交出去啊,OK啊,同学,我问一下,你说我这么写是不是只是给person身上添加了一个car,但是我页面上是不是没有展示啊,所以说最好咋的你页面上,哎,你展示一下嘛,走那这块呢,写一个H3,那既然是汽车的信息啊,就不能是多少K了,是不在这儿呢,我就不是那么详细的写了,把那里边的属性什么name age啊啊,Name price啊,给它拆开啊,我不得了,我这就直接写啊各位,我就这么写叫做座驾信息是吧?哎,然后这怎么写呢?Carr呗,是吧,就模仿上边吗?这不是name age,哎,这就是car吗?好,你觉得这样写对不对呢?啊同学不用考虑这儿啊,这里的逻辑没啥问题,先不用考虑这儿,你看看这。
07:44
Some persons啊,在这儿往上看,看看我刚才写的这你觉得对不对?很明显不对,为啥来先看看页面报什么警告啊,他说我不能够读取car在模板当中,为什么呢?因为它没有定义在实力身上,啥意思呢?那就证明各位name edge salary都是正常的,但是就是这car啊,我读取不出来,为什么?哎,说老师你没有点这按钮啊,确实是我没有点这按钮,但是一上来你不应该让他报错呀。
08:17
哎,说老师是呢,这怎么个情况?同学你想想啊,你47行是不是把person那个对象给它拆解开,然后把里边的属性一个一个的交给模板的,那大家都知道,你说整个setup在运行的时候,唰这会儿运行完了,然后这两个函数呢,HH定义完了,然后就来到这儿了,同学我问你,此时此刻你掉这个to RI的时候,Person身上有car吗?没有,但有什么name age job,对不?各位没有那个car,那就意味着咋的,人为上边用的时候,那肯定这那就得报错嘛啊那这个问题怎么解决呢?啊,第一种解决办法呀,那就是这样呗,给他准备一个空卡呗,是不一个空的车来在这儿刷新诶就不报错了,这是一种解决办法,还有另外一种解决办法,各位就是在这儿呢,你不用去准备,因为我们开发的时候确实有这需求嘛,当时我觉得这些数据够了,那谁成想后边还得再加东西啊是不各位啊来,那第二种办法怎么解决呢?同学也挺有意思的啊,就是把这整个交出去一下。
09:24
你体会体会,同学你这么教就是属于啊,你在执行第48行代码的时候,当年那个person什么样,比如说当年这person里边有八个属性好,那我就把这八个都给你拆出来,丢给模板,那如果说以后你这个person里面又来了一个,变成九个了呢,你觉得48行会重新执行吗?不会不会的,各位,48行想重新执行,那就得要求setup得调用第二次,但很可惜setup在整个工作过程当中,值是调用第次是不,哎,那所以说同学你就不能拆开传了,说老师我这么传,哎这么传就可以,你是属于把整个person这个响应式对象你都交出去,这个响应式对象身上的属性发生任何一种变化,诶都能被view所监测到,对不?各位,那所以说在这呢,你就可以写了,滑到最上方,同学别直接看我去person那取不就得了吗?来到这儿刷新一波。
10:19
啊说老师那一上来也取不到啊,没关系啊,取不到是unde find的呀,也不至于说没有car啊,对不,我是有person的,但是里边没有car,没有car就unde find under就不展示是不?各位哎,那你要想写的好一点,在这儿veer show啥意思?如果我有这个车啊,我再给你展示这台车是不是?各位,好了,刷新一波,嗯,添加一台车呗,走你各位你看name price是不都来了呀?嗯,添加一台车肯定是响应式的,同学不是响应式,那我问你他咋出现的呀,是不?各位哎,回来那也就意味着同学你说是不是我在这个里面给这个person响应式对象身上追加的任何东西,它也是响应式的,我们之前还说过这事儿,是不?各位你person.a等于一什么的,就只要你往他身上追加东西,同学,咱不是说了吗?Prox不是通过这个东西实现的响应式吗?或者是数据劫持吗?对吧?这个东西牛不就牛在。
11:19
哎,可以捕获你对person这个响应式对象任何一个属性的任何一种操作吗?对不,各位,哎,回来啊走那说老师那这person啊,这个car也是响应式的,对,就以后老师如果有人改这个名字,改这个价格,页面也变啊对,来测试一下,走在这儿写两个按钮,这个叫做换车名,那那这个呢是换价格,来走着艾福click,嗯,这里面怎么写呢?直接就拿数据操作了啊各位person.card.name怎么改名啊,加等于咱们还是加这个感叹号啊,那在这儿呢,同理这一堆东西。
12:02
复制放在这儿不是name了,Price哎,价格,那价格呢,在这呢,同学我这么调一下吧,我想那价格呢,让它嘣嘣一门涨啊,那我在这就写一个加加啊,那在这呢,我就得调整一下啊各位这个里面就得让它是40了,对吧,就直接写40,那肯定不能是40块呀,是吧,肯定是40万呢,来回到这儿刷新一波啊各位往这边调一调,添加一台车,走,你加没加,加了换名走走,哎呀,说老师没换上,那检查一下吧,回到这儿找到咱们这儿啊换车卡点name加等你看这不写错了吗?是吧?来保存刷新一波,添加一台车。换名走走走,明儿能不能换能,我就问你这个name是不是响应式的,是来换价格,能不能换能,那也就意味着我后添加的这个东西自动就变成了什么呢?响应式的,但有些时候我不想让它是响应式的。
13:00
我不想让说内幕变,页面也跟着变,为啥呢?没这需求,说老师那你这么说不行,怎么就没这需求了?来同学想一下,如果这个汽车这个对象啊,是一个异常复杂啊,这个深度特别深的一个对象,对象里面有对象,还有对象套了二三十层啊,把所有汽车里面能展示的信息啊都展示出来了,完了呢,提供给你数据这个人啊,人家告诉你了,说小张啊,这数据你拿过去展示就得了,以后这数据啊也不修改是不,你就拿过去展示就得了,等以后如果换数据的话呀,我重新传给你,你自己不需要在你的组件里面去改这个车的价格什么的,你就听从我的指挥就得了,我给你什么价格你就展示什么价格就得了,那你觉得各位这个东西需要做响应式吗?是不就不需要,哎说老师那没事儿,我不改不就得了吗?你不改是你不改的,但是人家很累说了吗?这个对象非常的复杂啊,这个层次的嵌套啊,很深很深,那你说同学,人家辛辛苦苦的给你便利每一个,然后去弄,那你不觉得就有点效率上的问题吗?那这个时候啊,你就可以借助刚才我们说的这个马克RO去操作了,来瞧诈各位在这呢,马克RO,然后呢,Carr,哎,你这么一写不要紧,各位,这个car啊,它本身就是一个普普通通的对象,经过了这个Mar克肉的标记之后,那就意味着这个carr永远不会成为响应式的数据了,我不管你后续怎么操作了,只要经过了mark克肉,诶这么一操作好了,他给你返回的这个东西啊,你不是放在这个percent car身上了吗?你以后再改,它也不是响应式的,它就是当最原始的数据在用,哎,就是当。
14:48
这个在用。有些同学吧,写着写着就飘了,哎,说老师不对呀,不对不对不对,刚才我不就这么写的吗?这不原始数据吗?完了原始数据我不往他身上放吗?同学你忘了吗?人家里边用了pro在代理,能够捕获你对对象的任何一个操作,任何一个操作都是响应式的,那所以说你直接这么写肯定不行,诶你经过ma肉这么一操作就可以了,嗯,来测试一下啊各位来回到这边刷新添加一台车,初次展示肯定是没问题的,但是接下来换名换价格是不换不了了。
15:20
啊同学,这儿咱得说明白,这数据啊,他变了,你刚才啊,就咱上一小节学,那read only各位是属于数据,你都没有资格去改,但是这回是属于数据改了,确实改了,但是这个car里边的name和price you不再做响应式了。啊说老师你这怎么给我去做这个验证呢?非常简单,各位来来来来,是不是在这儿有一个更改价格啊,咱别直接在这写啊,不是换价格吗?Change price可以吧,来,回到这儿写一个呗,Function change price里边怎么写?
16:01
嗯,那很简单,person.car.price加加是不是就得了,加完了之后,哎,我还给你看看呢,来到这儿走把这东西是不是还得交出去是不?各位啊,我拿到那个车嘛,拿到价格我加加嘛,然后我给你看嘛,来刷新一波啊各位走着,嗯,诶有问题是吧?哎,检查一下不能读取price在安范的身上,那证明这有问题呗,啊那我们看一下啊啊同学,问题在哪啊?诶,我还没有添加这台车是不?哎,太着急了,来回来各位没添加车呢,那你这换价格,没车咋换价格啊对吧?刷新一下来走添加一台车,这回有车了吧。价格是不是在变,数据在变,但是这个数据已经不是响应式的了,对不?各位这块肯定不变了,如果你做的好一点啊,各位你可以这样去校验一下啊,就是如果没有车的话,这俩按钮不要出现,你说是不?各位啊,要不你上来这一点它肯定是飘红的是不?嗯,好了,来咱们总结一波,各位to作用是将一个由reactive生成的响应式对象转为普通对象,诶同学ref不行哦,哎,得是reactive生成的响应式对象转为普通对象,那么使用场景就是用于读取响应式对象对应的普通对象。
17:20
啊,理解理解啊,响应式对象person啊,然后对应的person,哎,普通对象对这个普通对象的所有操作都不会引起页面的更新,我们刚才验证完了哪啊,就是在这个里面,诶在这儿对吧?嗯,它都不会去把那个页面上那个东西让它变了,来再读这个马克肉,它的作用呢,就是标记一个对象,使其永远不会再成为响应式对象啊就我给你马克肉了,那这东西来吧,同学,你这里面所有的属性就都甭想再做响应式了啊说老师,那这个东西的应用场景在哪儿呢?来读吧各位,应用场景是有些值不应该被设置为响应式的,说老师,什么叫有些值不应该被设为响应式的呢?往后读啊,例如复杂的第三方类库啥意思?各位来就比如说现在啊,有这么一个需求,Person身上啊,确实有name age job这么多东西,那现在呢,咱就假设啊,要把一个。
18:20
东西放在person身上谁呢?哎,就发请求那玩意儿说老师往他身上放干嘛呢?就有这需求嘛,就想放嘛,你放的可能不是可能是什么,呃,对日期啊,或者时间的处理的一些东西啊,对吧,生成随机数的一些库啊,我就想放在这儿,那同学如果你不用这个ma肉,那可毁了,就这个第三方的东西里面有多少个属性啊,嵌套多少个层级,那么VU三都会去深入这个层级去找到每一个属性给你做那响应式,那可是怎么着?哎,有点效率上问题的,你说对吧,各位,哎,这就咱说的什么呢?这个第三方内库,还有就第二个场景,当渲染具有不可变数据源的大列表时,啥意思?就说白了,像我刚才说的这个car是一个极其复杂而又庞大的这么一个对象,而且最主要的是咋的不变是不?这玩意儿它就是不变的,你拿过来展示就得了,那么跳过响应式可以提高性能是不?所以说各位啊。
19:20
这个马克肉的这个应用场景啊要比这个图乳肉啊要高很多,是不是想想我得到了一堆乱七八糟别人给我的东西,人说了这玩意儿也不变展示就得了,那我就mark克roll一下,然后呢,再放到数据里不就可以了吗?哎,那这小节呢,我们听。
我来说两句