00:00
这节课我们来学习DeFine reactive函数。大家在一些公众号还有一个,呃,一些书籍当中呢,肯定见过就说要定义一个DeFine reactive函数啊,Reactive表示的是响应式,那么其实很多同学呢,都特别不明白为什么要定义这个函数,那么现在呢,老师就把它的一个秘密告诉大家啊。为什么要定义DeFine reactive函数呢?实际上是因为object.DeFine property啊,它不好用。它不好用在哪里呢?咱们把这个底下这个BC啊,咱们都给它删掉啊,然后咱们现在呢,来看一下它到底是怎么不好用,就是我们get呢这个方法,咱们可以看一下咱们的API文档。Get这个方法呢,他就说了,他说的是,呃,访问该属性的时候呢,会调用此函数,那这个函数的返回值会被当做属性的值。也就相当于现在这个get的函数呢,它必须要有返回值,比如说你现在返回一个七,那么OB勾的A属性呢,现在的值呢,就是七,我们来看一下,好,现在这个七呢,就能够显示出来,没有什么问题。
01:14
那这个set它到底是怎么用呢?咱们可以来看一下,他说属性的这个set呢,是这么样的,当属性值被修改的时候呢,会调用此函数,该方法呢,接受一个参数,也就是被赋予的新值,会传入赋值时的this对象,看见了吗?会传入赋值时的this对象,那什么意思呢?也就相当于现在你这个set呢,它是接收一个参数,对吧,那它传入这个塞,这个参数是什么意思呢?这就是说这个值是不是就是你被赋予的那个心值,比如说现在我给他来个N。好,那这个时候我就在这逗号一个N,我们现在呢,试图去给它啊,把这个OB勾的A属性呢,我们去给它来一个,呃,设成九吧,当然这个比较N了,就叫NEW86吧,这样的话可能看起来更漂亮一些啊。
02:08
好,那这样的话,我们来看一下刷新。你看你试图改变OB勾的A属性九。啊,那你就知道了,这个new value的值呢,确实是九,就相当于这个九通过赋值给OB勾的A,它呢就会偷偷的传给set啊,就是S函数的这个参数。但是现在呢,最诡异的事情来了,就是我再次输出OB勾的A,它会输出九还是七呢?它还会输出七,就是等于说你这次赋值呢是失败的啊,我们来看一下,它还是会输出七,你试图访问OB勾的A属性七。发现了吗?那这是为什么呢?这个原因其实很简单,就是因为你这个get当中呢,它并不能真正的返回你刚刚修改的这个值。他还是会从这儿走,这个你只要一访问OB勾打点调用A,那这个时候呢,它就会访问这里。
03:03
他就会啊,特别特别固执的去返回七,你这个酒呢,就仿佛没有被设置成功一样。所以这个时候呢,应该怎么办呢?这个时候啊,它就给需要通过一个变量来周转。什么意思呢?就比如说我现在设一个变量,你看这个变量我设在外部。好,当我设置它的值的时候呢,这个时候我让这个变量等于你设置的这个值。那我要使用它的时候呢,对我就直接访问啊,返回这个临时变量的值。你看就通过它来周转,设的时候把心值设给这个变量啊,就设给它了,然后访问它的时候呢,我就直接返回这个临时变量的值。就是这样这么样的一个周转的过程,那现在的话这块呢,就能输出九了,我们来看这个九就终于出现了。好,那OB勾的A加加可以吗?我们来试试看,也是可以的,这个十呢也是可以出来的。
04:06
没有什么毛病,但是第一次输出他肯定是安地范的,因为一上来他就返回,他把它是安地范的嘛。对吧,那所以说现在你的话,你就会发现了,哦,原来现在呢,我们就需要有一个临时变量,这个临时变量呢,能够周转get和set。啊,这个是一个非常重要的一个知识,然后呢,再引出来接下来的那个函数,那个函数其实提供了一个必包环境啊,我们马上说我们先把它给放到咱们的PPT当中啊,就先给它放到咱们的这个。呃,PPT当中当做咱们的笔记是这样子的,好,咱们咱们把这个加一个标题啊,这个标题我们就复制过来,叫什么呢?对就叫做啊get和C需要变量周转,是不是才能工作呀?啊这个是我们发现的,那这个时候我们应该怎么样继续下去呢?就是你这个临时变量呢,看起来不是特别美观。
05:05
所以这个时候呢,就可以把它封装到一个函数中,然后利用函数的B包啊,利用B包特性,哎,然后这样的话呢,它就可以去这个,因为什么叫B包啊,B包就是一个函数外部的这个这个作用域,对吧?比如说现在GA的函数是函数,S函数是函数,那它定义时候所处的那个作用域环境就是B包。所以这个时候呢,大家就习惯上把它呢,大家注意看啊,就会封装,封装到一个函数中,这个函数呢,咱们就可以给它起个名字,这个名字呢,就叫做DeFine啊reactive。好,那这个时候我们就可以给它起三个参数,第一个参数数据对象,第二个键名,第三个值,好,那这个时候的话,你就会发现这个值实际上呢,咱们就可以给它当做是get和set这两个函数B包中的环境。
06:03
那咱们再说一遍,B包是一定要有内外两层函数嵌套的,那么现在呢,Get和set是内侧,外头这个def DeFine reactive呢是外侧,那现在呢,就形成了一个闭包环境。所以这个时候怎么玩呢,就很简单,就是我get的时候呢,访问这个参数。然后我set的时候呢,我再让这个参数啊,就把你的new value设置成你这个新的参数,对吧,当然这块可以去啊判断一下就是。如果你要设的这个呃,参数,它和你的这个新值是完全相等的啊,那这个时候就return什么都不做,因为你这个值跟这个值等,那你还改它干嘛呀。所以是这样子的,那这样子设完之后呢,我们怎么办呢?就可以调用DeFine reactive,我们就可以让OB勾对象的A属性,哎,我们就可以给它定义出来,当然这块应该是得塔了啊,然后这块应该是K。
07:03
哎,这要变一变这样写,当然了,我们还可以把那两个属性也加上,第一个是可枚举啊,可枚举的话,咱们之前看见过innumerable,第二个呢,就叫做可被配置啊,可以被配置,可以被配置的意思就指的是比如可以被delete啊,就是可以被外部delete,那这个一般来说叫configguable,我们也要给他生成true啊,API咱们可以看一下,有一个叫con啊,Configguable,一个叫innumerable啊。这俩一般都配置上,如果不配置也没事,诶不配置也没事,但是最好配啊最好配,因为它俩的默认值呢都是false,所以配置上的话呢,会比较好啊,会比较好一点,对吧?是这样子的啊好了,那这样的话,我们就可以在这里DeFine reactive OB b go a就可以了,然后怎么办呢?对,是不是还要给它一个初始值啊,比如说初始值是十,然后我就可以给他啊输出这是十,然后给它复制成九,他就再加加,或者给它复制成69,加加变成70,那这块是不是就能输出70啊,哎,我们来看一下。
08:08
啊,没有问题,一上来视图房的OBGO的A属性是十,因为它默认值是十啊,B包中的初始这个值呢,就是十,好,然后这个时候它就会输出十,输出十的时候它还会啊,触发这条语句啊,就是你试图访问OB勾的A属性。因为这里确实是在访问OB勾的A属性。然后呢,这里是OB勾的A属性等于69,这个时候就相当于我们再给它重新的去复值,改变OB勾的A属性的值,然后再让它加加,这个时候我们就相当于呃,访问,因为自增符号实际上也在访问它,然后也在改变它,诶要变成70,最后这块是70啊,所以这么吧,那也就相当于DeFine react,它的最初始的含义呢,其实就是构造了一个必包环境,就这个Val呢,现在呢就非常的棒,对吧?哎,那你就会发现,每次的话就是当从data中的那个key读取数据的时候,这个时候get函数呢,就会被触发。
09:08
然后每当往data中的那个key当中去设置数据的时候呢,我们这个set的函数就会触发啊,所以这个时候这个Val实际上就提供了一个必包环境,就是它实际上就是一个必包环境,那么很多的公众号,还有很多的这个书啊,包括咱们现在市面上能买到的一本介绍这个利底层源码的那个书,实际上呢,那本书上实际上是没有。特别的这个呃,去把这个东西讲清楚啊,就没有特别的去把这个B包这个事情去讲清楚,但是现在咱们就给说给同学听了,然后相呃希望咱们现在能听到这个视频的同学呢,对他是有一个比较好的这样的一个。就能对它是有一个比较好的这样的一个理解,好吧,哎,好,那么现在呢,呃,大家一定要能把当前的这个函数啊,要能给他啊写出来好,那么呃,这个函数封装完之后呢,你就会发现其实它很好用,比如说这个时候就可以封装个B对吧?B,比如说是33。
10:07
啊,那这两个函数呢,都是响应式的,什么叫响应式的呢?就这个时候我只要输出OB勾的A,哎,然后它这个时候呢,然后包括B,他这个时候呢,都能被监控上。对吧,你试图放在A属性A属性,然后我让OB勾的这个B。哎,等于66啊,那这个时候的话,你可以发现等于66的话,它就在试图改变OB勾的这个啊,对不起是B啊对吧,哎,是这个是B,但是这里他是不是在写了一个A属性,一直写死了啊,所以咱们把这加上一个K属性。是吧,哎,把这个A属性不能写死啊。好,那你看这块是不是就改变B属性是66啊,然后我再去输出这个B,你就会发现它确实变成66了啊,所以这样封装成函数的话,这个函数这个B包就不用你去生成临时变量了。
11:00
明白吗?所以说他就是一个替代临时变量的这么一个过程,所以就很多的,呃,很多的人他其实不是特别理解这块啊,那么现在呢,其实能让大家把这个弄懂啊,那么我觉得还是挺开心的啊啊大家呢要去练一练。
我来说两句