00:00
好的,我们继续啊,那刚才呢,呃,我们说到这个数据绑定了,我提到那个三个点呢,是用那个object.DeFine property,包括底层的也是用这个,有的小伙伴说对于这个不是这呢,我就去一下个数据解释和代理,然后呢,我在咱们这个空,等于是代码里边呢,我去整了一个扩展内容啊啊是个文空的文件夹,然后呢,我用我的mapbto呢,去给大家导入了一下。那这个呢啊,作为我们扩展内容的一个根目录啊,然后在它的下面呢,我去整一个啊零一啊,你比如说那这个呢,我们说一下这个数据劫持代理。嗯,好,整了一个文件夹,然后呢,在它的下边呢,我去整一个啊index.js在这里啊,我们说一下。呃,所谓的呃违约终止的数据,呃劫持代理。
01:01
对吧,呃。首先我们要劫持谁啊,那其实就是这个data塔,那假设呢,我这模拟我们U中的,嗯,那data选项,嗯,那这data中呢,是我们初始化数据的地方,比如说我这呢,来一个your name吧,啊比如说啊叫carry吧,嗯,好,那接下来呢,我们来一个eight。对吧,就是33好,那我初始化了两个数据啊,两个数据,那最终呢,谁要劫持它呢?就是我们的race,那这呢,因为race是个关键字啊,我就用个下划线race来表示,那这个呢,我们是去啊干嘛去模拟这个,呃,组件的实例。对吧,那实力自身上边本来没有这些属性,那么现在呢,我要去坚持,哎,代理他身上的属性啊,也就是说最终我要实现的目标是什么,在这个race身上有这些属性。
02:05
但是那你。真正的说底层实现的,你不可能是粘贴复制啊,这个是通过编码的形式去实现的,对吧?哎,我们怎么去做呢。嗯,可能有的同学说啊,那简单说下划线z.u name,我直接等于这个贝塔点u name就行了,那这个呢,不叫劫持代理,这个是直接赋值,而且啊,那现在如果这样直接写的话,有个问题啊,我修改这儿的属性的时候,并不能不能监视到这个属性的变化。不能揭示到这个属性的变化,所以也不是用的这个啊,那么它底层呢,是利用什么,利用这个object点,哎,DeFine。什么呀啊property啊,用它去实现的。那如何去实现呢?首先啊,我们要对。Data中的所有属性呢,进行枚举,你只有去枚举出来,是不是才能拿到它里面的T和对应的value,进而呢,才能想办法去代理到我们实力身上呀,那这个时候呢,我们可以利用一个放循环啊,比如说我let一个癌em吧,然后呢in我们的data,首先大家要知道在这里边我去打印一下这个item,包括。
03:21
哎,Item对应的value是不是能够拿到。对吧,哎,那在这儿呢,为了大家看的清楚一点呢,我在它的下边呢,啊整一个index的页面,那这儿呢,就是这个数据啊结识代理。然后我们把对应的GS呢,去给它引入一下,引入一下那是当前路径下的index GS。那我通过啊浏览器呢,呃,去打开这一个页面,并且呢,来到控制台,你看啊,我们现在用放循环是不是能够拿到它的P和对应的value啊。拿到了以后我们要干嘛。对吧,拿到了以后我们要干嘛,我们要。
04:02
把这个属性呢,是把设置给我们的瑞。啊,那这个时候呢,我们需要利用这个object点儿DeFine property去设置。首先第一个参数呢,是你要去设置的目标对象,就下划线这呗,添加的属性呢是item。对吧,哎,设item就K嘛,那么对应的value呢,应该是在这儿有个说明对象啊,这里边呢,它有很多种写法啊,比如说我们可以通过value去设置,但是呢,这种呢没有get set,所以呢,我们对应的应该是用这个写。Get get的方法呢,一定有一个返回值,那么这个返回值其实就是当前扩展属性的。Value。注意啊,现在的item这里面的变量K对不对,这个value应该怎么写呢?其实就是我们的data塔item呗,嗯,对吧?啊,那这个呢,是对应的value。
05:01
OK,呃,那现在啊,我们做完这个操作以后呢,我们去干嘛,去打印一下,那我们的this下划线。保存一下来,那这个时候呢,来到页面啊,我们刷新看一眼,注意啊,现在这个对象你不展开的话,你会发现什么属性都没有,而我们展开看啊,因为扩展属性啊,它需要展开才能看得到。这个时候大家看是不是有两个属性,Age和your name呀,而且这两个属性你会发现在他的身上呢,并不能直接看到它的value,哎,我们需要点击一下才能看到。那这个呢,是典型的通过get。去获取到的Y6值,那它呢,跟假如说啊,这个对象上上来有一个test啊测试。啊啊测试,那这个测试K的属性呢,它实际上呢,就肯定没有那么三个点你看。
06:00
是不是吗?他没有对吧?啊,那这一点呢,我们要清楚啊,现在呢,我把这个啊干掉它好了,光有get还不够啊,首先大家要知道啊,我们的get的作用是什么啊,这个呢是啊get作用啊用来啊获取啊,这个呢是用来哎获取我们扩展属性值的。嗯,什么时候调用呢?当啊获取该属性的值的时候。然后呢,我们去调用这个对应的get方法对吧,那这个时候我们可以证明一下,看着那在这里啊,我can打印一下这个get调用。来。上心,你看上来并没有调用that对不对?那如果说啊,我想知道u name的值,我一叠大家看着走。掉了。啊,你想要拿到这个值,一定要调用get才能拿到对应的value,哎,那这是这个,那除了get。
07:02
还有一个东西叫set set干嘛的啊,我们待会儿说啊,你看着我先做这样一个操作,我要去通过这个raise。去修改我们现在代理的这个属性,比如说修改下这个name啊,假如说呢啊叫换一个吧,叫we吧。好,那现在呢,我要去修改它啊,那紧接着呢,我去打印一下这个里边的UR。哎,我们看一下能不能修改成功啊过来。刷新。你看啊,现在呢,还是carry,那我我想做的是不是要修改成为呀,没有修改,那这个时候呢,大家要注意啊,啊,我们通过这个什么呀,通过这个object点。DeFine property啊去啊它的get方法,嗯,添加的啊,这个扩展属性呢,不能直接干嘛啊对象点。
08:02
不能直接啊,对向点。什么呀啊,属性修改。啊,不能直接修改啊,这个没有为什么,因为这是它的特性,所以这个没用那。我想要修改它。到底怎么修改呢?啊,我先不给大家注释啊,打开它啊,当你一修改,虽然说不能直接修改,但是会触发另外一个方法叫set。啊,这儿呢,来一个调用。嗯。嗯,来保存一下啊,看着。刷新大家看C调用了,调用呢,是因为我们这在修改。来,而且调用的同时呢,这你能够拿到什么最新的value值。那在这呢,我去打印一下new value。我们看一下是不是最新的啊,我们想要修改的值是V的对不对。过来刷新啊,果然是对的,没有问题啊,那说明。
09:06
Set方法是干嘛的?我们可以总结一下,它们是用来哎set啊,去监视我们当前扩展属性呢,啊,只要一修改哎就调用。好,那在外边儿不能直接修改,我想问一下,那在里边能不能修改了,你看这是最新的value,我能不能做这样一个操作。我在这儿修改,而且呢,这个时候我这儿不用写位置了啊,我写这个你说行吗?想想看。来我们试一下啊,注意啊,我在里边去修改来刷新。注意啊,这是个死循环。他这是个死循环。啊,那为什么是个死循环呢?啊,我们先把这个注掉吧。看看啊,那算的方法呢,是不是当你一修改它就调用,然后一调用了以后进来,我们紧接着又去做了一个操作,是继续修改,所以这是一个死循环,并且呢,现在我们没有结束的条件。
10:13
在这里啊,大家要注意啊,千万啊,千万不要在我们的这个set方法中啊,直接干嘛,直接修改当前扩展属性的值。哎,会干嘛呢?会出现什么死循环。嗯,那会出现啊死循环。好了,那这是这个,那在这儿不能直接修改这个赛的方法有什么用呢?你别忘了他的扮演的角色是监视。我们想要修改日身上这个值,直接修改,修改不了,我们可以采取一个迂回战术,你注意啊,This身上哎对应的K叫什么取决于谁。现在你是不是把得塔中的?
11:02
数据劫持过来代理到你的身上了,所以我们在这儿呢,可以去修改修改贝塔中的数据。那那要修改它呢,也比较简单,找到对象,对象注意啊,我们要修改谁,是不是当前的HR啊,因为这是一个变量啊,对象操作变量的时候,你应该用中括号对吧?那要修改它等于什么,等于这个new value。那这样的话,整体思路是当我们修改race生产的属性的时候呢,调用SET1定要set呢,我们拿最新的value赋值给谁啊,赋值给data。把data中对应的这个属性一修改,那因为data中的一修改,你注意啊,你最终你扩展属性是不是要依赖于人家,所以瑞身上这个。是否会跟着变?OK,那这个时候我们来看一下能不能修改刷新。大家看这就成什么成V了,哎修改成功了,那其实呢,这个呢是VIVO啊,数据结识代理底层实现的一个核心思想就是它。
12:10
哎,讲完这个大家应该是更清楚一点啊,更清楚一点,那以后呢,你们再看到这种。哎,点点点的,那说明它底层用的就是什么呀?啊,就是我们这个DeFine property。OK,那这是这个啊,那这节课呢,我们讲到这里,哎,需要大家下来把这个哎去消化一下来。
我来说两句