00:00
来我们说说下一个问题啊,就关于V2与V3小试区别的一个对比啊,那这个东西啊,将来在面试的时候,这个提问性应该是很高的啊。那到时候再说的时候怎么说呢?就是说把V2的想是它的基本核心道理说完之后,再来说一说三的是吧,当然你不要直接就提出V3是什么样子,最好有一个铺垫吧,对吧,说我那个VIVO3出来之后啊,然后我又自己去研究了一下VIVO3。然后呢,这个时候我就发现VIEW3里边显示的东西呢,和这个V2里边显示的东西呢,它俩是有区别的是不是哎。那我先来说说啊,VR里边它这个显示的核心,比如说对象,它是通过object.property这个方法去实现的。他会把这个对象里边已经存在的这个属性的值进行一个读取或者说更改啊。然后呢,进行这么一个及时的操作。那么这种方式呢,有一定的问题在里边。比如说大家可以看到OB点这个方法啊,它最后的第三个参数是个配置对象,里边有get和set,如果说我要是针对于这个目标对象。
01:03
是吧,它里边的这个属性值的读取,那会进入到get,如果说要是对这个属性值进行修改,那会进入到。但如果说我要是针对于当前这个对象添加一个新的属性,或者删除一个已经存在的属性,那这个时候有效果吗?没有效果界面是不会更新的。那同样的,如果说要是数组V2里边,要是把一个普通数组变成一个响式的数组,它会重写,注意啊,是重写数组里边更新数组一系列更新元素的这个方法来实现这个元素的修改。啊,这句话可能读起来比较绕是吧,我给大家去解释一下,简单来讲就是说我要想在V2当中。是吧?把一个普通数组变成详细的数组之后,要对它里边的数组当中的元素数据进行更改的话,那这个时候它需要把更改这个元素的方法进行一个重启的操作。从而来实现这个什么呢?修改的操作。
02:02
那么但是这个数组的这种方式也有一定的问题在里边。也就是说,当我通过下标的方式,把数当中这个下标所对应的那个数据给它更改了,替换了,或者说我要去更新它的长度,那这个时候界面也不会更新。是不是这不都是存在的问题吗?所以说VR里边后来就出现了一个方法叫set方法,或者说Dollar set方法。可以实现这个小数数据的操作啊。到了V3里边完全不一样。VIEW3里边是通过谁呢?是通过这个proxy代理对象和这个reflect反射对象,他们两个配合来实现了这个监视及这个数据响应的操作啊。那么这个proxy这个代理对象是吧,咱们可以通过MDN来看一看。那么这个对象是吧?用于定义基本操作的自定义行为。这句话不太好理解,而且将来面试的时候,如果说你要是把这句话跟面试官说了,我估计面试官也扛不住的是吧,什么意思啊,我也不懂啊,那实际上呢,就是说我可以通过proxy。
03:11
这个代理下实现什么呢?把普通对象变成想是对象的这么一个操作啊,实现了一个数据代理的一个操作啊。啊,但是呢,这个proxy对象里边在用的时候,我们需要通过new,它里边需要传入两个参数,第一个是它给的看啊被proxy代理虚拟化的对象哈,然后呢,它常被作为代理的存储后端,这什么意思呀,是吧,其实就是很简单,我们的目标对象,目标对象变成代理对象嘛,是吧,所以说他给的就是我们所说的目标对象后边的第二参数是handle了。憨斗罗是包含捕捉器的占位服务对象可以为处理器对象啊,简单来讲它就是一个处理器对象用来监视啊你这个数据的变化的啊,它里边有一些这个监视的方法,它里边的这个监视的方法大概有多少个呢?13个啊在这呢。这有很多是吧?啊,但是我们重点主要是说说这个什么呢?Get set和这个delete,大家可以看一下,Get就是读取属性值,换句话来讲,将来你通过代理对象去调用一个属性,想要获取这个属性值的时候,它会自动的进入到这个处理器的什么呢?Get方法当中。
04:16
如果说我要是更新这个代理对象当中的某个属性值,哎,那会进入到set,同理,我要去删除一个属性,会进入到这个delete property这个方法当中。但是还不够,因为这些方法内部还得需要配合谁呢?这个reflect咱们可以去搜一下这个啊回一下。Reflect,这个对象是什么对象呢?它是属于反射对象啊,内置对象是用来做反射操作的啊,所谓的反射就是什么呢?你给我这个东西,我内部可以直接自动的把这个东西的东西再给你哈,可能有点绕是吧?啊简单来讲啊,就是说呃,通过反射对象可以把你当前这个代理对象或者目标对象当中相关的属性的属性值或者属性啊的操作直接给你返回来。
05:00
但是呢,我们要知道它是不是一个函数对象,因此它是不可构造的,这句话又怎么理解,就是说这个对象它是不能拗的。啊,它里边所有相关的方法得通过这个对象去调用它的静态方法才行,或者说直接调用。啊,所以说大家大家可以看到它对于它的这些方法都是一个静态方法的描述嘛,是吧,哎,看都是reflect点什么什么东西啊,那为什么要去介绍它呢?因为在VIVO3里边要想实现这个数据的显式啊,那个pro proxy这个代理对象,它内部的handle处理器对象当中那个监视方法里边用到的都是reflect对象当中方法,呃,简单来讲就是说reflect这里边的相关方法都是配合刚刚咱们所说的。这个handle了,对象里边这些方法来去使用的啊行,那这块呢,咱们就有一个了解,就知道什么呢,VIEW3里边的数据啊,详细的操作和V2完全不一样了。VIEW3里边用的是pro c和这个什么呢?Reflect,一个是代理对象,一个是反射对象,那下边呢,咱们也通过代码的方式让让大家去看一看啊,它的显示是怎么实现的啊。
06:08
好,那我这边的话就简单一点,把咱们之前讲的代码给它做一个保存啊,首先在这儿新建一个文件吧,零四杠re啊基本使用,那我这样把这个APP啊,就放在这个里边来了。然后现在咱们来说说V3里边详是原理,它的核心啊,或者说它的核心原理,那我这边呢,还是新建一个文件夹吧,零五杠啊,这个就叫做什么呢V3。的核心原理,应该说VIEW3的呃,响应式数据的核心。原理。好,里边我也是新建一个文件啊零一。响应式,响应式的原理,点HTML吧,咱们直接在这个文件里边啊,把这个代码去写一下,大家来看一下啊。
07:00
那首先呢,我这边来一个目标对象吧,因为我最终是要把这个目标对象变成想试对象吧,是吧?哎,那怎么办呢?我就来一个count,来一个user吧,等于一个对象用户他应该有自己的名字,比如说我们叫做ski。再来一个age,来个20,然后再来一个外吧,啊,也是一个对象,内幕来个小英。好,也给他来一个H,那就来一个19吧,是吧,哎,那下一步我要做的就是什么呢?把目标对象变成什么呢?啊,代理对象,哎,那这里边我就又来一个count pro X y,比如说user吧,等于的是new proxy。啊,注意它里边有两个参数啊,第一个参数是目标对象userr,第二个是一个处理器对象,处理器对象内部有一些监视的方法,我们要通过那些监视的方法,再加上反射对象里边对应的方法,从而实现这个数据的显示啊。
08:01
啊好,那我这块先写一下这个参数啊,那么这里边参数一啊,我写的是U是吧,实际上就是我们的TT目标对象啊,还应该有一个参数什么呢?哎,参数二啊,那这里边这个叫做h nd handler,代表的是我们的处理器对象。处理器对象逗号用来监视,用来监视数据。及这个数据的操作,好,呃,当然我这个位置并没有写handle了啊,我就写的是一个这样的对象,实际上是一样的道理啊,好。那将来呢,比如说我要干嘛呢?就是通过代理对象获取目标对象中的某个属性值是吧,那我就看点log吧。然后来一个proxy user点。好,那这里边儿呢,你要想获取这个属性值是吧?诶我们来看看啊。
09:03
那这个handler对象当中有一个叫set方法的,这个是属性读取操作的捕捉器,点击进来啊,我们来看看它这个方法是用于拦截对象的读取属性操作,也就是说将来我要是拿这个属性值,那会自动的进入到set方法当中啊,相当于是一个监视操作嘛,那这个GA的方法里边,它有三个参数,一个是他给的,一个是pro type,还有第三个参数的话,是负责关于这个继承的操作啊,咱们这个对象是不用的,咱们主要是用前两个啊。那所以说呢,我这块来一个get方法。啊,将来还应该有set的方法,好,都写上,它应该有一个delete property这么一个方法,我也写上啊,那get方法呢,在这里边有参数target target还有一个pro吧,好我呢在这先CAno.log这么一句话,比如说盖的方法调用了,诶注意啊,我这块是不是通过代理项点的这个属性,想要获取属性值是吧?啊,我一保存啊,咱们out加B。
10:02
啊,这个先关掉没什么用。检查。Cons,哎,我们来看一下get方法调用了UN find,哎,为什么是UN find呢?我不是要获取这个属性值吗?是吧?那为什么是UN find呢?因为你没有通过反射对象把这个数据给它反出去,所以说下边我还得通过return加上这个reflect反射对象,它内部也有一个对应的get方法,这个get方法当中需要的参数就是我的目标对象及你要拿的这个属性。好,我现在再去保存。那么大家来看一下啊,一刷新看到了吗?钙的方法调用了,佐助也拿到了啊,这个是什么呢?带领对象加上反射对象,它俩配合,最终可以实现这个显示的效果好,那同理啊,比如说这个时候我来一个process you the.name等于比如说来一个什么呢?呃,哪里都名人好注意啊,我这个时候是不是属于更改吧,更新这个属性的人是吧,我们再来看set cano点落个括号,诶set方法调用了,然后呢,我再去保存,咱们再来看一下,我一刷新。
11:06
发发现方法调用了是吧,那既然调用了,我就想看一看当前的我的目标对象上边有没有这个name。啊,或者说我直接输出user吧,咱们来看一下啊。这一刷新。我们来看看现在还是佐助是吧,佐助,那我这边改了吗?哎,没有改,我写的是名人,他目标对象上面的数据并没有去改,那怎么办呢?也是,这里边还得需要通过return返回我们这个什么呢?Reflect反射对象调用的对应的set方法,并且你想看我要更改某个属性值,那你是不是应该把属性和值给我吧,而且哪个对象上的属性目标对象,所以说它也有一个他给。TT。它也有一个PP,它也有一个什么呢?V。啊,那我们只需要把这三个参数放到这个里边来,它就会自动的帮助我们通过代理对象把目标对象上的这个属性的值进行更改操作,所以说我就保存,咱们再来看一下啊,我一刷新看啊,Set方法调用了,Name已经变成了什么名人啊,通过代理对象更新目标对象上边相关的属性值。
12:20
那这个时候我们再来举个例子啊,比如说。注意啊,这个位置啊。嗯,这个位置,这个位置应该是通过代理对象更新目标对象上的某个属性值操作是吧,那我下一个呢是什么呢?比如说。通过代理对象向目标对象中添加一个新的属性。我们看怎么做呢,还是proxy有点,比如说我给他来一个gender,等于更难。然后我要去看的还是我的目标对象啊。
13:02
保存,我们再去刷新一把,你刷新我们来看一下set方法又调用了,而且里边多了一个什么呢?真那由此可见啊,Set方法不仅仅是说修改目标对象的属性值,同时它还可以为目标对象添加新的属性,是不是啊,那上边这个就什么呢?获取目标对象的某个属性值啊,好,那这个方法呢,一看这个名字就应该知道应该是什么呢,删除目标对象。删除目标对象上的什么的某个属性,好,那删除目标对象,你应该告诉我目标对象,而且应该告诉我这个属性是吧?哎,在这里边我cancel.log括号,我再写上一个delete delete的方法调用了。好,我们来看一下啊,我现在在这个位置来一个delete。
14:00
Proxy点里边的什么呢?比如说name。啊,我已保存。然后呢,我再去刷新,大家看一下点列方法调用是不是好,那我删完之后,我的目标对象上面还有没有这个属性呢?我们再来看一下user。好,我们去刷新一下,来看一下。我再去刷新一下啊,我删除的是什么呢?删除的是。内幕是吧,保存啊。多刷两遍。有没有内幕属性呢?还有是吧,啊那为什么呢?因为我在这里边代码还有写上是吧,还得通过return这个对象点里边有个delete property这么一个方法告诉我的,告诉我目标对象,还有当前要删除的这个属性。好,现在我保存,我们再去刷新一把,大家再来看一下是不是那个内幕数据就没有了是吧,好注意了啊,我现在是删除的这个目标对象,那我目标对象里边有个属性是外。外里边还有数据,我能不能做更新操作呢?好,我们再来看一下。
15:00
这个是什么呢?更新目标。对象中的某个属性对象。中的属性值,言外之意就是说通过proxy u点里边有个Y。里边的内我给它变成什么呢?出铁好,然后我们再去看一下目标对象。OBJ就是柚子。好,我们再来看,我就刷新。我们点开它看一下啊,外出铁是不是已经变了吧,所以说这是属于一个深度检视的一个操作是吧?好,这个呢,代码啊,咱们写的并不是很多,有get和set delete,但是这些就够用了,这就是VIEW3里边它的显示数据里边的一个原理代码啊,当然了,咱们写的是比较少的啊。真正的V3里边那个核心的显示数据代码应该比我们写的还要多啊。
我来说两句