00:00
好嘞,各位,那这个监视属性watch呢,咱聊的就差不多了,哎,那我把这九呢折叠起来,然后啊,我打开八计算属性,接下来呢,我做这么一件事,我把咱们学计算属性时候写的这个姓名案例啊,我拿监视属性再写一遍。为什么要这样做呢?啊,那是因为在以后的编码当中啊,大家会发现好像同样的一个功能点,我拿计算属性写可以,拿监视属性写呢,好像也可以,哎,你可能就觉得呀,它俩哪个都行啊,其实它俩之间呢,还是有一点小区别的,我把同一个案例用这两种方式都写一下,然后能形成一个对比,也便于咱们去观察一些事情,好吧,那这样我把这个四呢给它复制一份八折叠起来,打开九粘过来啊,然后改一下这个名字,序号呢是第五个啊,后边这呢也改一下姓名案例,然后写上叫做watch实现啊,把这名字呢给它复制一下。
01:00
粘一下好,然后呢,我就开始改一下这个代码啊,有姓有名,全名,这怎么写呢?还不知道,哎,那我就把它删掉,写几个问号好,然后再往下姓和名你肯定得收集对吧?然后这个完整写法这块呢,我给它删掉啊,然后这个简写形式这块呢,也给它删掉,因为不用这个计算属性了嘛,用watch去写嘛,但是呢,是这么回事啊,各位你还是不要误会我的意思,我的意思不是说说老师啊,你那意思我知道,就是这儿啊,只要一写watch啊,那上面就不能写comp了,不是那意思,各位你比如说我的数据里面呢,有一个X是一啊,还有一个Y呢是二,那我想算出来一个A对吧,A呢,是来自于它俩求和得出来的,那我完全可以这么写呀,我写一个A,然后return z.X加上什么呢?z.Y是可以的,那我页面里边如果想用怎么办呢?写一个SPA标签差值语法读A是不是就可以?
02:00
题了,哎,这两个配置项它不冲突,不是说二选一说用这个了就不能用这个,不是那意思啊,来打开你看一下呗,啊之前咱就聊过这问题,好吧,哎,那回到咱的代码当中,这XY呀是我为了演示问题写的,那先给它删掉,那这A呀也就不需要了,对不?那这块呢,也不展示这个A,那你看computed里边没东西了呀,那所以说这个配置项删了去吧,对吧,好了,用watch写,那么问题来了,我怎么监视,我监视谁才合适呢?那就分析一下你的功能吧,回到页面里,功能呢,就是姓一改,全名改,名一改,全名也得改,那你说同学我监视的时候,我得监视谁呀,是不是得监视一下姓变没变,名变没变呢?姓只要变了,那怎么办?全名去改去,名要是变了呢,全名也改去,对吧?哎,好了,回到代码中,那你说监视谁监视姓,接下来呢,就是你要决定的时候了,同学你说我要写完整的配置,那就是first name写成一个对象,然后里边呢,你置什么immediate呀啊,还有什么deep呀,什么handler啊,对吧,这是完整的写法,那还有一种就是直接把first name这个间视写成一个函数,这是不是简写的呀?啊说老师那我就区分不了啥时候简写,啥时候完整版写法啊,那这样各位啊,在你不知道的时候,怎么简单你怎么写好不就当有一天你发现,哎呀,老师,我得深度监视啊,你自然而然就知道了。
03:33
有,我不能写成一个函数,我得写完整的那个配置项,对吧?哎,好了,那来我在这儿呢,不需要深度监视啊,我也不需要什么immediate,那所以说我就直接写成一个函数简写,你说对吧,那这会儿能收到什么来着,各位,一个是new value,还有个什么呢?Old的value能收到两个,那里边我要干嘛?同学啊,我这个姓变了里边干嘛呀,是不是引起全名的变化呀?啊,那问题是全名在哪儿呢呀?
04:03
哎,你看看,你准备好了姓,准备好了名,各位你准备全名了吗?你没有准备吧,各位你捋顺一下这逻辑是我知道你的性变了,是掉了这函数,函数里边干嘛引起全名的变化,那全名在哪儿啊,没有准备,所以说呢,你想用监视的时候,各位你有没有种感觉,这个全名啊,得你自己亲手的去给他准备好,对不?把这章拿过来写一个杠,再把这三呢给它拿回来,是这意思不,随后这块我就敢写了呀,说老师那你写什么呢?很简单,同学,由于我的first name写的是不是普通函数,那你说这里边的this就不用你操心了吧,This是谁?VMVM握在手里了,哎,那你知道了,那就是this点谁呢?Full name是不是全名,全名等于啥呀?等于最新的姓加上原来的名,这会儿能不能体会出来我说的是最新的姓,因为姓已经被改了呀,这是不是最新的姓啊,那这是谁呀?之前的姓对吧?那所以说同学你说之前的姓我们用这东西还有用吗?之前的姓好像没有用吧?啊那这怎么写?最新的姓加上一个什么呢?杠,再加上什么呢?This last nameme是这意思不?哎,回头看一下效果,各位张三,那这呢,当然我得改一下是吧?回来这儿别写问号了,走差之语法读谁呢?Full name,回头看效果,各位张三,张三是吧?然后你看着我改那个张123,下边是不是有动作?哎,那同理,各位你说你能监测这个姓,还得监测谁,是不是监测一下那个名啊说老师,那我要是不写这个,你看一下你不写这个,各位,你说一上来这儿是不是就废了,你看吧。
05:53
啊,控制台一打开啊,来到控制台,你看同学说有一个什么呀,属性或者方法叫做for name,没有定义,这就不墨迹了,哎,你得给它准备好嘛,走,当然了,我知道最开始的数据啊,确实是我自己写死的,但是以后才会变的呀,啊所以说你监测这个姓的同时还得监测谁呢?名,这儿再来一个小逗号,把last name给它拿过来,那名要是变化我怎么办呀?诶也简单,各位,那就用原来的姓加上最新的名,你说对吧?这俩行参都叫new value,但是这个收到的是最新的姓,这个是最新的名,所以说这应该这么做,This点是不是first name加上什么呢?是不是最新的名了?那你看同学我就没有必要非得叫new value,我这么写是不行,Val是吧?哎,就代表那个值了,好,那这儿呢,给它改一下。
06:47
复制过来,粘这块复制啊,这会也得用这个是吧,Val它简单嘛,当然你要不嫌麻烦,你就用Y流也行,是不好了,监测性的监测名了,那这回你看一下效果啊,张123啊3456,对不,同学你看这个案例我是不是拿这个watch写了一遍呀?啊说老师那他俩有什么区别呢?好嘞,各位,接下来咱就做这么一件事儿,打开计算属性实现的姓名案例,再打开这个watch实现的,然后呢,把目录呢给它收起来,咱们形成一个对比啊,首先我们琢磨一下用计算属性写的这个全名案例啊,这完整版写法啊,折叠起来你就先别看了啊同学看一下这个,这个呢,相对来说就精简了很多,你看啊同学,我只需要准备姓和名,对不啊,那我全名呢,通过计算属性直接写full name是吧,然后里边姓拼上这个名,OK,看一下效果。
07:46
效果肯定也是可以的,对吧?然后借助开发者工具的,你看一下它的这个情况,打开这儿你看啊,有姓有名,这叫做属性,那这个呢,是计算出来的,叫计算属性,对不?我只需要写一个full name是不是就可以了,哎,这就是计算属性实现,然后呢,我们再看看这个watch实现watch呢,那就得麻烦一点,各位你这是不是得准备好一个full name初始值是不是得你自己配好。
08:16
然后呢,怎么办,各位是不是监视性的同时还得监视名啊,我知道你把功能也实现了,但是代码呢,稍微繁琐了一点对不?而且借助开发者工具来看呢,是这么一个情况打开。你看所有的姓啊名啊,全名啊都是属于属性,对不啊,然后你改这个章的时候,然后呢,它再重新引起的这个全名的变化,就是不存在计算属性这一说了,对吧,完全是靠监视实现的,那我知道啊,各位可能说老师你不就那意思吗?想引导我一下,哎,说watch啊比较麻烦是吧?啊,还是计算属性好,还是计算属性啊它香啊,不是这意思,他俩呢,各有千秋啊,现在来看各位,我的确承认这个案例拿谁写更简单,计算属性,其实它官网上吧,各位写的就是这个案例,而且官网呢也给大家渲染了一个气氛,就是好像计算属性啊更香,你看一下啊,我已经给你准备好了,在这儿呢,各位你看计算属性啊,还有谁呢?真听属性我说一下啊,官网现在这儿啊,改名了,不叫做那个监视属性了,叫侦听属性,同学一个意思,我说侦听,我说监视是不是都是一回事儿,哎,你看他写的这么一个。
09:31
个案例,同学你看跟咱们的一模一样,有姓吧,有名吧,有全名吧,当然了,他没有用那个杠做分格啊,他用的是那个空格做分格,哎,然后同学你看监是谁,哎呀,姓监是谁名,你看他用的是不是也是vaal,他就不考虑那个O的value了嘛,那里边呢,引起全名的变化,全名的变化对不用watch实现的,然后你再往下啊,你看他说了一句话,他说上面代码是命令式,而且是重复的啊,什么叫命令式啊,他的意思就是你得亲自的去监测这个姓和名的变化,然后你去改全名啊,你踢一脚,我动一个地方,这就是属于命令师是不?哎,咱之前也聊过这事儿啊,再读后半句,将它与计算属性的版本进行一个比较,你看他咋写的?同学,有幸吧,有名吧,它是不是没有准备全名。
10:22
然后他通过计算属性计算出来一个全名,并且姓一变名一全名重新计算,然后你看官网说了个啥呢?说好多了不是吗?哎,那你看官网给大家表达的意思就是什么呢?同样的功能啊,如果说用那个写也行,用这个写也行,当然我们选择简单的,你说对不好,接下来我给你提出一个需求,你就会发现好像只能用watch,哎,什么需求呢?听我说各位啊,我有这么一个需求,就是当这个姓发生改变的时候啊,这个全名啊,延迟一秒钟做出反应。
11:01
你比如说这个张,我给他改成了张一,现在就是我一改张啊,这马上就变成了张一三是吧,哎这一听这名儿张一三是吧,哎,还有点像那张一山是吧?好各位,那你说我在这儿一写二,这马上是不是也有反馈,我的要求是慢一点,我写完一之后,等一秒钟,这再有反馈。那你说怎么写?来,咱拿watch写一写。你看着在这儿不就是这句话,让他等一会儿再执行吗?我写个啥就得了,Set timeout对吧,我这有一个代码片段,等多久一秒钟,随后我再去改那个全名是不是就得了?各位,你说是这意思不对吧?啊,哎呀,我发现这个姓变了,那然后呢,我开个定时器,等多久啊,一秒钟,然后干嘛呀?诶,我去改这全名,那你看一下效果就已经实现了,打开啊,我把章改成一等会儿。你看是吧,各位啊,也就是说这个计算属性watch里面,你可以非常畅快的去开启一个异步任务,但是谁却不行呢,就是计算属性,同学你看着这个,我拿计算属性写,你说咋写。
12:12
哎呀,说老师太简单了,不还是这句话吗?你一返回全名就有结果了,那你等一会儿再让他返回吗?对吗?老师写个set timeout也等一秒钟嘛,啊,那我在这呢,把这句话粘过来嘛,老师你看写完了呗,哎,那你看看效果吧,各位打开,嗯。啥也别说,一上来他就不对了是吗?说老师是不是报错了呀?啊,那看看也没啥报错,我把张呢改成张一。绝对过去了一秒钟,对吧,各位,就刚才我不说话,那长时间肯定过去了一秒钟,那我问你东西咋没了呢?诶说说吧各位,回到代码中,你陷入一个误区,你好像觉得呀,给这包一个定时器,这个full name呢,就等一会儿才有返回值,其实你掉坑里了,各位你仔细想想,这是一个基本功的问题,你说你这写了一个return,同学,你把这返回值交给谁了呀?啊哥们儿,你把这返回值啊,交给这个粉色的函数了,你说对不对,粉色的函数拿到了你的姓啊,加上你的名。
13:15
但是这个full name却是没有返回值的,你说对不?这个full name的返回值是啥?你没写,那就是and find它没有返回值了是吧?说老师那我要写一个呢,那你看一下呗,你一个900,那你看一下页面的效果900,但这不是我想要的效果呀,啊说老师好像明白了,就是计算属性啊,它完全是靠这个full name的返回值,而我们好像还办不到让这个name等一等再有返回值,对喽,就是这么回事儿,所以说各位你体没体会出来,就是计算属性里面是不能够开启异步任务去维护数据的。对吧,你靠的就是这返回值吗?但是谁却可以呢?就是watch,因为watch不是靠返回值,你说对吗?各位说老师,那watch是靠啥呀?Watch是靠你自己亲自写代码去修改,你说对不?你看这里哪有返回值啊,是不?你用心体会体会,哎,所以说它俩还是有差别的,那也就是说各位当watch也能实现,计算属性也能实现的时候,我们当然用谁计算属性,但是当你面临着一些异步的计算的时候,诶,你就得使用谁了呢?Watch OK,哎,好了,那我把这个呢给它删掉,我还正常写着啊,这会儿也删掉走啊说老师,那这就讲完了呗,它俩之间的区别就是watch能开启异步任务呗,计算属性里边不能开呗,啊是的,但是这里边还有一个小点,希望大家注意观察一下,我刚才啊,可自然了呢,我就给这个定时器的回调啊,是不是写成了一个箭头函数的形式,那有一些同学可能说老师啊,你这自相矛盾呢,当年是。
14:52
谁告诉我的呀?哎呀,View所管理的函数一定得写成普通函数,可千万别写箭头函数啊,那你这怎么写呢?
15:01
各位,我说一下啊,你说定时器所指定的这个粉色的函数,到底是不是view所管理的函数,我告诉你,不是。同学,咱得这么说你这个绿色的这个定时器吧,确实是在view所管理的一个函数名字叫做full name中开启的。这定时器确实是在fo内中开启的,但是定时器所指定的回调是不受VU控制的,说老师那谁控制啊,是浏览器定时器管理模块控制的,最后定时器到点了,也是GS引擎帮你调的,你说对吗?各位,哎,所以说一定要注意,这个粉色的函数并不是view所管理的,就说白了吧,同学,定时器到点了不是帮你调的那粉色函数,你说对不,定时器到点了是GS引擎帮你调的那粉色函数你说对不好,你像这种地方你就一定得写成箭头函数,同学你瞧着,如果你不写成箭头函数,你把定时器所指定的回调啊,嘿,你写成了普通函数,各位,我在这儿呢,给你输出一个Z,你就明白了啊,一秒钟之后定时器是不是到点,到点了之后,我问你是不是掉这个红色的函数,红色函数一掉,This是不是输出了,好了你自己瞧,我给你打开啊,各位控制台呢也打开。
16:26
我把张啊改成张一。各位,等了一秒钟,你发现this是谁?是window,对不?This一旦是window,那就意味着window身上的forname等于这个东西加上,诶,这是不是彻底就跑偏了呀?那可能有些同学说,老师为啥this是window呢?很简单呀,各位这又是基本功啊,你说定时器所指定的回调是不是由JS引擎帮你调的,而且他帮你调的时候,我问你各位,This已经给你指定好了,是不是就是那个window?对吧?哎,OK,但是如果我不写成普通函数,各位我写成箭头函数,你说这啥意思呢?也是GS引擎啊,帮你调的这个绿色这个函数,但是呢,你给它写成了一个箭头函数,诶,然后呢,它就没有了自己的this,没有自己this怎么办呀?是不是往外找啊,那往外找的外是哪里呀?WHY是不是first nameme的this呀?那first nameme我问你,你是不是写成了一个普通函数啊,那之前咱聊过first name是view所管理的函数,而且你还写成了普通函数,我问你first nameme里边的this是谁?VM知道不?哎,所以说这块课一定要注意啊,这块得写成什么呢?箭头函数才可以,哎,回来你看一下,写上一等一秒钟,OK,这是不是有反应了,你看这个this是不是VM,哎,这是一个隐藏的比较深的这么一个坑,说老师啊,乱了彻底我这脑子大了,我都不知道以后该怎么写了,哎,我已经给你做好总。
17:58
结了,划到最上方,咱们来一波总结,让东西清晰一点,好读一下同学computed和watch之间的区别,来读一读啊,第一句话,Computed能完成的,Watch都可以完成。
18:13
就是说老师我用computed完成了一个效果,你放心吧,用watch肯定也能写出来,但是你读第二句说watch能完成的功能,Computed不一定能完成,例如watch可以进行异步操作。就是刚才我说的这个姓一改啊,等一秒钟全名在变,Watch轻松能实现,但是computer来你写,写不了是不好了,然后再读,下边呢,有两个重要的小原则,同学你读一读一所有被view管理的函数,最好写成普通函数,这样的话this的指向才是谁VM,或者是以后我们要学习到的谁,组建实例对象。哎,也就是说我为啥说最好写成普通函数呢?因为你想一下啊,各位如果说这个里边啊,咱就拿哪个举例子呢,咱拿这个吧,同学是不是做了一个天气切换那个案例啊,来咱就拿它说事,各位啊。
19:13
我接下来有这么一个需求,就点击切换天气的时候呀,我弹窗弹个一。嗯,也就是说来往下找,就是一点切换天气,我不做这事儿了,我弹窗,我alert我写一一,那你说这种情况来你看一下啊,我一点是不是弹窗了,各位你说我这个change whetherr写成普通函数还是写成箭头函数,我问你对咱们这个功能ALERT1是不是没有任何的影响,对吧?因为这里面不涉及到我用VM身上的东西,但是一旦你用了VM身上的东西,你就必须给它写成什么呢?普通函数,否则你就碰不到这个VM,你说对不?为啥我说让你最好都写成普通函数呢?你说不定哪一天里边就要用到VM。啊,就如果你要是说老师我抬杠,我就这样啊,我这change by我就写成箭头函数啊,等以后有一天啊,我用到VM的时候,我再把它改成普通函数,那你说你犯上犯不上啊,对吧,最好写的时候咱就直接给它写成哎,这个普通函数,然后再往后读这个第二句话说所有不被vu所管理的函数,那是哪些函数啊,我给大家列举了一下,你比如说定时器的回调函数对吧?Adjust的回调函数,同学,这些东西都不是view所管理的,你说对不好,还有谁呢?我再写点,同学,比如说这个还记得吧,Promise的回调函数,对吧,你promise里边那个成功的回调,失败的回调同学,那都不是所管理的吧。
20:41
啊,你没学view的时候也能用啊,所以说你像这些东西最好,哎,要写成啥建造函数。啊,那目的是啥呀?这样的话,This的指向才是VM或者是谁组建实例对象,也就是说同学,View所管理的函数我们最好写成普通函数,不是view所管理的函数最好写成箭头函数,我们的目标只有一个,就是让this指向是谁,VM这边写普通函数也是这目标,这边写箭头函数也是这目标,你说对不?各位哎,你本着这个原则呢,它就不会出错,好吧,各位啊,这就是咱们所说的这个watch和这个comp的计算属性的一个对比,好吧,哎,然后呢,大家也注意一下啊,这个监视属性呢,在官方文档里现在叫做真听属性,对不好了,那这一小节呢,停。
我来说两句