00:00
再说说什么呢?情况三,哎走情况三咱说啥呢?各位你说刚才我监视的这个数据吧,都是用什么定义的ref所定义的这种基本类型呢?是不是各位,那你说万一我要有一对象呢?啊对象咱咋说就不用ref了,哎用谁呢?就用这个reactive好就用它了,来定义一个什么呢?还是定义一个人的信息啊各位,比如说是person哦,然后呢,传入一个对象,人呢肯定有名字对吧,名字还是呢,是张三啊,然人呢,还得有这个年龄是吧,年龄呢,比如说一上来让他是18岁啊一个数字,那把这person我就得交出去走交出去之后呢,就得展示,那同样的在这我来一个HR对吧?各位那展示一下吧,叫做人的姓名,就简单说吧,姓名啊,直接写叫做person.name那同样的再来一个呗,叫做年龄,好年龄呢是age,然后我得让数据发生变化,所以说呀,诶,我准备两个按钮。
01:00
一个叫做修改姓名,哎,一个呢是增长年龄啊,都给它加上这个点击事件修改姓名,怎么修改呢?同学我也想写的简单一点啊,就是在原来名字的基础上加等一个什么呢?加等一个这个符号吧,加等这个东西啊,一个小波浪线啊,年龄想增长呢,那就简单了,因为它是一个数值嘛,所以说我就加加就可以了,OK,先看一下效果啊各位回来刷新张三是吧,修改姓名走走走走啊增长年龄走走走是不好了,回来接下来各位我想监视一下person这个对象的变化,那我得怎么写呢?来走把这东西啊给它复制过来,叫做监视,不是ref了,叫做reactive所定义的一个响应式数据。来走着还是正常的写watch还是调用,里面说一下你想监视的是person,同样这会儿呢,得指定一个回调,同样会收到new y6和OLDY6。
02:00
学注意观察啊,这坑啊要出来了,来,Consolo,我在这就得这么说了,叫做person变化了,我先不输出这个new和这个old,我先看一下我修改人的名字,我修改人的年龄,这个watch能不能见识到啊,回到这儿刷新啊,看好了各位,姓名变了诶,输出了,年龄增长了诶输出了,强有力的证明了各位,我在这儿只要写一个person,那么person里边的这些属性的变化是不是都能监视到啊?好,那接下来呢,同学,坑出现了,来,走着,我给你输出这个new value和偶的value,完了你瞧瞧啊,各位刷新一波,这事儿咱得聊明白,不能让他跑过去啊,这个问题我接下来修改姓名,走。啊说老师这不挺好的吗?这样我调一下,让他俩上下排列,诶这样的话啊,大家能看的更好一点,来各位刷新一波啊,重新点修改姓名,请问我改没改姓名改了,因为这儿呢,真的变了,同学你仔细观察这里没有问题。这是谁?New value,你告诉我这是谁old的value,注意观察new value里的啊,那肯定是带这波浪线的对不对?新的嘛,我加上这波浪线了吗?你看这儿呢。
03:12
哎,同学怎么样,是不是还是新的呀,而且我告诉你不仅仅是这内幕刷新一波,瞧着年龄增长,我承认最新的年龄是19岁,但是之前的old value哥们儿是不是得是18岁啊,十十九之前不是18吗?所以说同学你看这是有问题的,哎,所以说同学这块呢,有一个小坑,来我们说一下啊,叫做如果你用reactive所定义的一个响应式数据,你交给了watch进行监视,那么注意有一个问题就是此处注意,此处无法正确的获得什么呢?OY6。但是用谁定义的数据就不存在这个问题呢?Ref,哎,朱老师这什么情况,反正目前他就有这个问题,至于说以后他能不能调整,我们拭目以待,对不?目前是这样的,哎,说老师这怎么解决呢?同学,无法解决,就是你只要把一个reactive所定义的这么一个数据直接交给watch同学,你这诶回来,你这是不是拿reactive定义的person呢?你二话不说,你是不是就丢过来了,那各位我告诉你这个old value咋的,那就是无法正确获取的,说老师要不这样吧,啊,我教你。
04:24
哎,老师,你看我多聪明是不?你看你不是说的吗?用reactive定义的这个响应式数据无法正确获得O的外流ref不行吗?哎,老师,你看我这用ref这不就解决了吗?同学,你要是之前我讲那一小节,你仔细听了,你不会认为这种方式能解决问题,你知道为啥吗?因为ref里面他写了一个东西,如果发现你传递的是啥玩意儿,哎,是一个对象他咋的,他还会帮你去调那个reactive,然后再一次的走的是reactive里的逻辑,那其实说白了,各位表面,哎呀,我没有写REACTIVE7不知,哼,你传的是一个对象里面走的还是谁逻辑?Reactive说,老师我不信,不信咱就试试啊各位刚才这写的啥reactive我改成啥了?Ref说,老师这回不就得了吗?嗯,那你自己看效果去啊,各位回来现在更有意思啊,更有意思修改姓名。
05:16
增长年龄呀,哇,同学见识不到了,为啥呀?嗯,看你能不能想到为啥呢?同学一再一再一再强调这个ref所定义的东西,你想真正访问到它里面的数据,我不管你是读出来啊,然后显示还是读出来,你要修改还是说你要监视,你是不是都得带着点value啊,也就意味着什么呀,哥们儿,你是不能监视person,你得监视它真正的那个值,是不是得点value,是不是,哎反应反应来回到这儿刷新这回哎说行了,哎这回是不行了,但是同学我问你问题解决了吗?问题依旧,也就是说同学根啊是在reactive在哪呢?往上在这人这儿呢,是不,各位哎,OK,说老师,那你刚才刚才你这个什么年龄,加加你咋没点value?同学忘了吗?模板当中我用点value吗?不用,模板里面你就畅快的写吧,人家给你加那点value了是不各位哎,所以说在这儿呢,他就是有这么一个坑的,然后这儿呢,咱也多说一句啊各位就一。
06:17
一般来说啊,在开发里面就是这个old value,我们也不是那么的需要,我们一般关注的就是目前它变成什么样子了啊,我知道可能有些同学说,哎,老师我的功能我就需要,Old的value我就需要,那怎么办?同学,如果你真需要old value,我给你个建议啊,就比如说这个年龄,老师我真需要它这个old value,哎呀,我的天,同学age拿出去这写18得了呗,各位别往这里边塞是不就行了,这样的话,同学是写起来笨重一点,但是至少能解决问题,你说呢,各位,哎,扯回来,所以说有的时候吧,咱出去如果面试说跟人聊5U3,聊什么呢?就你得聊点不一样的东西啊,聊点容易踩坑的东西,就证明咱研究过,你说是吧,各位你照着那官方文档咔咔咔,跟背书一样,同学,那可以这样讲,没接触过比U3的,进面试那个房间之前20分钟他也能过一遍是不?各位,诶,把这个呢删掉,OK,发现了这么一个小问题是不?嗯,那这里各位不仅仅有这一个问题,还有另外一个问题,什么问题呢?来瞧着啊,各位。
07:17
我呢这样做,我让他这个person对象啊,里边这个嵌套的层次比较深,哎就比如说我还给这个张三呢配置一个job工作的信息,哎,完了张三呢,这个有很多份工作啊,咱先说这个G1,哎就是JOB1 J1就是他的第一个工作,第一个工作呢,肯定也得有薪水是吧?Sal salary,然后让这进薪水呢,是20 OK,行吧,哎,就是起薪就是20 K同学,你看job是个对象,这一又是个对象,然后里面有salary才有20是不?嗯,来把这个人的薪水啊展示到页面上走,叫做薪资,嗯,那这里怎么写呢?person.job完了点J1啊,然后点什么呢?Salary OK,没写错吧,嗯,Salary,好啊,那在这呢,还得来一个按钮,哎,叫做增长薪资是吧?哎,增长薪资,哎,说的好听一点,涨薪是吧,哎涨薪,然后在这呢,同学就直接找到这个salary,然后让他加加,嗯,说不就可以了,如果生活中也能这么做。
08:17
啊就好了,是不是我一点按钮我的薪水就增加了是吧?来回到这儿刷新一波,目前呢,薪资是20是吧?哎,来同学,其实你看现在目前这啊,它有一个提示就证明它有点问题是吧?来回来看一下是哪的问题呢?找到这个watch同学你是不是多了一个点value,哎,只要它这有警告,肯定你有写的不对的地方,来吧,把点value删掉,为啥呢?因为我已经用reactive了,对吧,不是ref,你加什么点VALUE6呢?哎,回来刷新一波,这回就对了吧?嗯,同学,看效果啊,能不能掌心呢?是可以的,哎同学你注意看啊,我掌心一下。你发现他能发现person变化了,但是同学们可要知道,这种东西要是在V2里,那得开启深度监视是不是才可以,但是目前你发现在VIEW3里面,我不管你嵌套的层次有多深,只要你这东西啊是reactive的,哎,只要是拿它定义的,各位不管嵌套的层次有多深,我都能找到,哎,也就是说有一种感觉,他好像默认就开启了深度监视是不?各位哎,那在这儿呢,欠加一个东西啊,这个薪资,薪资别直接写那数字啊,它不好听啊,在这儿呢,对吧,加一个K对吧,回来看一下,诶20K 21K,这回就好了,来回来各位走着啊,嵌套的层次很深,我没有写那个deep true是不默认就开启深度监视了,哎,然后呢,可能你就发现,哎有一些人呢,总结文章说啊说那个比如三零啊,那个watch啊,就是默认开启深度监视,哎,你也可以给它关掉是吗?来我关一下deep false同学,按照常理。
09:49
再说我是不是在关呢?嗯,那你看看吧,如果真的能关掉,我问各位,当我去修改嵌套很深的这个数据的时候,他不应该发现person变了,是不是因为我关闭了这个深度监视嘛,刷新一波啊,瞧着。
10:04
嗯,啥也别说了,各位能关掉吗?关不掉哎,所以说在这同学我们还得总结一个注意点,那既然是多哥,我就得给它写成多行注释了,走这里边有很多细节上的问题啊,同学大家也关注一下啊,就是有可能啊,以后比如说三点二点几可能会解决这些问题啊来走第一个注意注意,然后再来一个注意,这是第二个啊,一个是无法正确的获取这个old value,还有一个就是各位我这么说啊,叫做强制开启了深度监视,啥叫强制开启了潜台词就是deep配置咋的无效,你写也白写,哎,这就是情况三,你看发现了两个小问题吧,好,把这个助掉,那接下来呢,哎,我们再说说情况四啊,有些同学可能说,哎,老师啊,那这样的话,我的深度监视我关不了,这不有效率上的问题吗?所以说我要给你讲情况四吗?是不,各位来主调走着,接下来情况四,情况四是什么呢?就是说我。
11:04
讲监视啊,某一个属性来把这一堆呢给它复制,监视react所定义的一个响应式数据中的某个属性,那刚才这个呢,啊,想要数据的什么呢?全部属性,哎,那这个呢,就是某个属性,来吧各位,现在你看着人呢,有很多的信息,我只想关注他的年龄改变,哎,只想关注他老不老,至于说名字和工作我不关心,那得怎么写,哎,同学说老师简单啊,复制往这一写就得了呗。嗯,说老师这呢,我改一下,我监视的是person.age这不就可以了吗?明确的告诉他吗,监视的不是别的,就是age啊,然后在这写一个叫做person的age变化了,这不就得了吗?嗯,那还有这啊各位,这个deep force在这呢,我给你写一个注释吧,啊,我把这解开啊,在这写一个注释,防止误导大家啊,我说此处的deep配置无效,哎,然后我再把。
12:04
这一堆啊,给你住掉OK,嗯,好,那这块加不加呀,加着也没用了,对吧,各位哎给它删掉走着person.age啊慢慢来,那正常来讲得是这个年龄变化完了才走,这个是不是,嗯,来看一下效果刷新啊,先不用看效果,它有一个提示啊,他告诉你啥,说你这个东西啊不能监视,我只能监视一个。Ref的值,或者我能监视一个reactive生成的这么一个响应式的对象,或者是一个数组,哎,那也就意味着好像不允许我这么写是不?各位哎,分析分析,那你看我刚才写为啥不出问题,我问你来,各位这监视的是啥啊?Ref所定义的值,那这是啥?N1数组那这是啥?嗯,Reactive所这个生成的值,那这是啥呢?这是react所生成的那个对象里的某一个属性,人不让你这么玩啊,说老师是不是警告归警告,但是还能用啊,那你看看吧。
13:01
不能用,哎,那这怎么办呀?回来各位怎么监视某一个呢?行了,不卖这关子了,直接告诉大家,你得这么写啊,得把这东西啊写成一函数,函数得有返回值,返回谁呢?你想监视谁,你就返回值啊是吧?你是不是想监视那个内幕,那就返回这个内幕。说老师这么麻烦吗?啊是他就这么麻烦,得写成一个函数,然后人去帮你调,调的时候呢,人发现啊,原来是person.name呀,这回就可以了啊,那当然这块不是name,是age,是不回来刷新一波看看效果啊走。走走是不各位,而且你看这old value哎哎哎,是不好用啊,OK,好品味品味啊,那你说我监视的不是A,是name呢,那就写嘛name来看效果啊刷新。啊,内幕说啊,这个走走走对吧,各位,哎,OK,这就是情况四啊,还有最后一个情况,那就是情况五走情况五是什么呢?把这一堆啊给它复制过来,叫做监视react所定义的一个响应式数据中的不是某个,是某些,你看这是监视全部,这是监视某一个,这是监视某些啊同学,其实如果情况二你听明白了,四你听明白了,你知道情况五应该怎么写,就是把这watch拿过来,是不是想监视多个东西?OK,来,各位写一数组,哎,然后说第一个是name,那同理,再说第二个是啥呀,是age,我的天呐,是不是觉得挺麻烦的啊,确实这块有点麻烦,Person name,然后再来一个或或谁或这个age变化了是不?那这会同样是数组数组对吧?各位来回到这边刷新啊,然后点击修改姓名,你看。
14:52
新的是这个旧的这个十八十八对吧,然后呢,增长年龄走,你你看现在19原来18对不?各位哎,你得这么去写才可以,这就是情况五,那在这呢,同学还有一个,哎需要注意的一个特殊情况,哎特殊情况是什么呢?瞧着啊各位我呀把这个复制过来。
15:13
我只想监视person里的job,哎,你可要想好啊,Job job和那个name age可不一样,这玩意儿都是基本数据了,但是job吧,同学,它是不是是一个对象啊?好,走着。我监视job的变化,哎,来看一下效果啊,回到这边刷新,我想更换那个工作相关的,那就掌心呗,是吧,来走,哎同学,这是不是在变?嗯,但这呢,没有监测到啊,那我们检查一下,为什么没监测到呢?percent.job吧job吧,发生变化了,那检查一下,哎呀,没写错呀,同学,你看我没犯啥错,是不是照吧?对呀,那我这是照吧变化了,哎,这啥情况呢?同学,我说一下,这就有点坑了,你监视的是不是job呀?嗯,但你刚才改的谁,你改的谁,你改的是不是job里的这一里的salary啊?
16:10
那也就是说你改的数据的层次比较深呢,那也就意味着你这儿得是不哎刷新走,你气死人不?嘿嘿,我说到这儿啊,各位肯定就蒙圈了,哎,说老师完了,彻底废了,我感觉我就记住了。情况一啊,你这些玩意儿我记不住啊,什么东西啊,一会儿old value流好用,一会儿不好用,什么时候一会儿deep奏效,一会儿这deep配置又不奏效,同学来吧,我们总结一波啊,来从上边开始看,这是一个标准的监视对吧?各位啊,这俩没啥说的,监视的都是基本类型immediate的配置可不可用,可用deep需要配置吗?你别说deep奏不奏效,我问你需不需要配置,不需要同学监视个零,监视个字符串,用什么深度监视啊,所以这直接过了来说。情况三,个位一切的问题都是从这开始出现的,就是说如果你监视的啊,来把它解开,让大家看到这个语法的高亮,如果你视的是这么一个值,同学你注意我。
17:10
绿色箭头所指的值是直接拿这个reactive怼出来的东西,也就是说你往上看各位reactive调用,然后给你的是不是这么一个person呢?如果你直接监视这个person,各位你那deep false和true已经无所谓了,已经不奏效了,强制开启了什么东西?哎,深度监视这不这的吗?然后还有一个小坑,就是O的value流咋的,你是没有办法正确获取的,OK,诶同学,你从根儿上去总结问题,就是说监视我得看你监视的是谁,我才能往下烙,你说对吧,各位你监视的这个行,我给你往下烙,那会出现什么问题,就是说old value无法获取,还有就是呢,强制开启深度监视是吧?好,那把它这块除掉,那再往下看情况四啊同学,简单,其实呢,就是说你别直接写对象点属性,你写一函数,函数调用返回这个对象点属性是不各位情况四其实也没啥说的来,最主要的是情况五,情况五是怎么个意思呢?来各位就是多个东西还得往数组里面包。
18:10
然后还得写成函数的这个形式,但是在这同学也不涉及到说什么这个深度监视,因为name是一个字符串,H是一个数值,对不?各位来这儿你对比一下啊,对比一下谁呢?对比一下特殊情况还有谁呢?还有情况三,哎,同学来冷静的思考问题,特殊情况他监视的是谁?啊,监视的是一个react所定义的响应式数据当中的一个属性,谁呀?Job,那这个时候deep配置有没有作用啊,必须有,哎,所以说写好注释叫做此处由于监视的视是什是reactive所定义的啊,这个对象中的某个属性是不是?哎,所以deep然后叫做配置有效是吧?哎,说老师,那我能不能这么写呢?Person点,你不就是说这person里的一个属性就行吗?那我就person.name呗,同学,那你想想你自己在干嘛呀?你监视person里的name是个字符串,完了你说你开启深度监视不合适吧?哎,得是说你监视的这个reactive对象当中的某个属性的值,它依然是一个对象,哎,那在这儿呢,你就得玩一下这个deep true了是不?各位,哎,所以说你看看这里边还是有挺。
19:30
多细节上的小点的坑一共有三个,那么第一个就是哎,直接监视reactive所定义的数据,无法正确获取old的value啊,当然这会儿同学也无法正确获取old的VALUE6啊,但如果这么写同学他是特殊的,为啥说呢?因为person点内幕咋的,他本身就是一个字符串了,就有一种感觉,同学来,我问你这监视的是不是person.name是不是一个基本的数据类型,那在这儿回头你去改名字的时候,走你走你走,你能不能拿,能,但如果说你监视的是这玩意儿,同学这是啥呀?这是整个person对吧?那你说能拿到old value吗?拿不到,哎还有就是这儿各位你监视的是什么?监视的是job job是啥?是对象,那就意味着咋的他又拿不到这个旧的old value了,是吧?来看一下,你看我去改那个工作相关的信息啊掌心你打开这个走打开这是吧,21啊,你打开这个。
20:22
走,你看是不是21对吧,拿不到说老师那听你的意思就是对象类型的,它就不行呗,哎可以这么说,嗯,那一般来说要定义对象类型,我们是不是都用这reactive啊,你就算写了ref无济于事,里边还会找reactive的是不是?各位哎,有人说是bug,有人说不是人家故意这么设计的,这儿呢,咱就知道有这种情况就可以了,行不?各位哎,那把这特殊情况呢,咱把这个也给它住掉好了,各位,反正一共是这五个情况,加一个特殊,自己下去可以练练尝试一下,好吧,各位啊,回到笔记里面,我们总结一波啊呃,两个小坑啊,第一个坑呢,就是监视reactive定义的响应式数据是old value是无法正确获取的它呃是强制开启的,这个深度监视的deep配置是失效的,哎,你就是调整false也不好使啊,还有就是监视react所定义的响应式数据中的某个属性的时候地配置是有效的,那我所说这个某个属性,当然这个属性的值得是一个对象,你才有资格去。
21:23
Deep,对不?各位啊,Person是对象,第二内幕好家伙是个字符串,有意义吗?配deep是不是没有意义?哎,在这儿呢,把这几个情况呢也给大家写了一下,OK,这就是VIEW3里的watch,然后最后呢,说一下啊,各位如果要是真正去应用啊,就在这个生产中啊,真正去写功能同学,一般来说呢,我们就直接写这个就可以,是不,哎,但如果说你特别需要这个O的value流,咱也说了,你把它用ref给它拎出去就可以了,好,那这一小节呢,我们听。
我来说两句