00:00
接下来呢,我们,呃,为了简化这个程序,我们可以只把这个程序只写一层啊,就是我们现在这个程序就不要去加这个外层这个box啊,我们就直接给它散着放,放到一层里。诶,这样的话能呃快速看见效果,这样的话就可以不用递归了,对吧?哎,我们呃快速的去看一层,那这个时候呢,我们就需要把之前的数据,数据的那些,呃,咱们上次课程讲的那些数据监测的那些东西,我们都给他拿出来。啊,数据监测的那些东西都给拿出来,所以我们就把这些文件呢,我们都给它放进去啊。好,我们把这个JS文件啊,之前写的这些关于数据的这些JS文件啊,我们都给它放进去,哎,这些数据文件啊,都非常有用啊,关于一些什么模板呀啊不是模板数据监听啊,DV啊,Observer啊,然后water咱们上个视频啊,如果没有看的同学要去找找看啊,关于数据这个更新对吧?哎,数据劫持啊啊这样子的一些东西啊,那么数据劫持这些东西进来之后呢,实际上就是在这个view这块呢,哎,他就需要去呃,进行一个呃,就是挺重要的一个操作啊,就是在这个view这块,我们就需要去呃。
01:16
这个这个这个监测这个这个这个了。对吧,哎,他就需要把这个东西变成observer了嘛,所以说我们就拗一个observer。哎,我们就要把这个data呢,给它变成一个双向,给它变成一个这个,呃,这个绑定的啊,New一个observer,但这个observer的话,我们现在就需要以啊,但是不对,不是observer,是observe啊。因为咱们又给它封装了一个叫observe的一个小函数,所以这行的话我们就叫observe.js。好,然后这边的话,我们就呃用observe这个data啊,我们这么样去做它,那这个东西呢,就变成响应式的了,好是this点下划线data啊。刷新,保证这块不要变错,那么变成响应式之后,我们要干什么?
02:01
对吧,变成响应式之后,它的逻辑是什么,就是为什么它是响应式。那是不是就相当于这个数据要变成响应式之后,理论上讲我们现在就要收集依赖,那现在这个依赖是什么?对现在这个依赖呢?就是你compile的这些东西啊,Comp的这个模板啊,但是咱们现在只有一个组件,这一个组件就是你这一个EL挂载的这个东西吗?对吧,哎,那所以说现在的话,我们就可以在这里去调用啊,它的一个初始化的一个啊,一个data啊,那所以说这块呢,就可以调用一个initt这个data对吧,Init data,然后呢,调用这个呃,Init comput。啊,调用这个it这个comp的。哎,然后我们把这里呢,就会有init这个data,好,然后在这里呢,我们先去备份,就是self等于this,然后我们现在呢,就需要去,呃,便利咱们现在啊,就是身上的自己身上的所有data。
03:02
好,我们用for each来遍历。For来遍历的话,得到这个key,得到key的话呢,我们这个时候就可以用,呃,再写这个DeFine property。哎,DeFine property啊,我们就可以绑他自己的身上啊,绑定这个key,然后这个key的话呢,它就有get和set对吧?哎,那这个时候你就会发现,当我用get的时候,那我要干嘛,是不是它就直接返回你自己身上的下划线的这个data塔这个key就可以。啊,然后当我要调用set的时候呢,我这个时候就要调用他自己身上的啊,然后data这个key,我就让它等于这个你这个心值啊new value,我们把这个new value呢给它放上去就可以了。所以他现在呢,是这样的一个情况。啊,那这个it的话,一个目的就是要让它变成响应式的,对吧,要让它变成一上来就开始把默认的这个数据变成响应式的。
04:01
然后这个compute的我们就先不说了,Compute的就是一个计算后的一个东西啊,但是这里你就明白了,那实际上这个iit这个地方呢,它就类似于生命周期,就是这里呢,实际上就是生命周期。对吧,诶因为什么呢?因为我在这里可以触发一些东西,然后这些东西呢,可以去触发用户的这个啊生命钩子啊,这个事件钩子,因为你这个东西用完之后,我我我这里是不是就可以就是我这个data,实际上某种意义上也可以看到是个生命周期啊。对吧,然后在这里呢,他就可以去调用,调用这个用户传进来的这个options,比如说created。看见没有,他就可以去调用这个。啊,因为什么,因为比如说你的生命周期是怎么进来的呢?生命周期是不是要在这里去通过这个C的这种方法去传进来。那实际上这个create是在这边就进行一个调用啊,那它实际上这块就相当于你的事件写的这个函数是通过呃,咱们底层的代码来主动调用啊,来给他啊调用上的对吧?哎,底层调用来给他调用上的是这样子的啊,这个大家要明白,把这个事情呢,大家要能想清楚。
05:09
啊,想清楚是这样子的。对吧,哎,所以说现在啊,当然这块会有一个报错,我们看看是怎么回事啊,这块这块这个是啊,我看看啊,这个是A。他这是怎么回事,报错啊,把这个干掉,A塔A刷新。Must be an object a property description must be an object。啊,他说你这个property的这个description必须是一个对象,我们现在这个A它不是个对象。没必要是个对象啊,他现在我们看一下这怎么回事,这块报了个错。嗯,然后这块的这个view的这块是怎么回事,看一下不要着急self,然后这块是key。我们要便利这个地方,然后我们地方property啊,便利它,然后它。
06:01
诶,这个是哪报错了,我们看再看一下它这个错不好找。这个key。Key,他说,Must be a perfect description must be an。必须是一个对象。他说,属性描述必须是个对象,这是个对象吧?没错吧?这个东西有问题吗?它是它不是一个对象。这个很神奇啊,那我们现在先输出一下,因为这块这个bug必须要解决,刷新我们看一下啊,这块能有一个A,然后我其他的发现指令我先给它注掉。哎,就是整合起来的话会比较复杂啊,兄弟们,整合起来的话会比较复杂,但是没关系。我们一点一点的去把它一点一点去写出来啊。好,我们把这个发现指令这块我们都给它注掉啊。哎,注掉好,现在就一个A,那这个A的话,它现在怎么就有问题了呢?我们现在是不是要把这个A变成。
07:05
就是能从自己data上去读,有个get和set啊,那为什么要这样做?因为实际上就相当于我们把这个属性绑到了自己的下划线data这上头。对吧,诶绑到了自己的这个,绑到了自己身上,这self等于this没有问题,然后这是key。定义这个key,然后这是个对象。对吧,对象是get和set,那这种感觉是不是上下文的问题,我们给它换成。箭头函数是啥?Set,然后是new value。是这样的问题吗?他还是会报这个错啊,Must be an object。A。对吧,Perfect description,就属性的描述。For each是这里吗?属性的描述。啊,他说你这个属性的秒哦,对不起,这块是property。是吧,哎,变成T了。
08:00
是吧,哎,这块是那个负数了,这回就OK了,它就变成这种响应式的了,啊这样子来的。对吧,哎,响应式的这这样子来的,那他这样的话,你就会觉得这个页面没有进行一个模板监听,没错,因为模板监听的话,实际上就相当于我们这个数据的这个依赖是什么。对吧,这个数据的这个依赖是什么,就是你的那个observer,你现在要去发力。啊,所以我们现在这个observe observer我们现在要打开看一下啊,然后这个observer现在这块咱们之前的课上不是已经写了吗?就是关于他的一个,呃,就是呃,关于我们现在要在这个DP这个数组啊,他这个呃就是我看一下在这。哎,对。啊,我们现在是要干嘛,在这个构造器当中对吧?哎,然后去在这去调用它这个observer AR啊,或者说是呃,Work,然后在这里会能便利每一个这个元素。对吧,哎,便利每个元素,然后便利每一个元素的话,我们现在是干什么?对,是不是就是在这这里面的话,它比较关键的啊,就是呃要把那个water给加进去,而这个water这个东西咱们已经在之前的啊,这个里头已经呃已经做了啊,就之前正好已经做了,在这个地方已经把这个water给加进去了。
09:15
对吧,哎,那所以说最重要,最重要的就是你那个water要干什么。对吧,所以说你现在就会发现这个water的好处了。啊,就是你仔细一品,你会发现这个water真是太美了。对吧,哎,这个water会美,那water的话这块不是最后的一个回调,就是这个CD的扣吗。对吧,哎,那也就相当于将他所有变量相关的回调都全都执行掉了。所以说你就相当于你这个watch啊,在进行实例化的时候,就是你watch在进行实例化的时候的那个,呃,就是它的一个这个叫什么来着啊,他的一个这个这个这个。呃,这个这这个回调函数传的是非常非常重要的,所以说这个我我这个view这块呢,比如说我天生它是有watch的,对吧,这块我会有个watch,比如说我这里watch的一个A,大家能发现吗?对吧?Watch的A,当这个A变化的时候,我现在希望它怎么办?
10:08
对吧,那这个时候我这个watch应该怎么办?对我这个是不是就需要在这个v.GS当中,这一块我需要再去默认的啊,就在这里默认的,我们需要把这个watch给他给给绑上。对吧,哎,我们就需要在这里把这个watch就给它。绑定去。哎,没什么毛病啊,所以在这里呢,我们现在就就需要调用啊,就调用调用默认的这个watch,所以就是this点下划线it watch啊这样来的。啊监控,那现在的话这就是init watch,那这个init watch的话是非常简单的啊,因为你只需要引入那个water。啊,只需要引入这个water。War,然后from,然后是点杠。嗯,water.js对吧,然后这个water的话呢,我们就需要在这里呢,啊,首先我们先备份一下,等于this,然后呢,我们现在就是这个,呃,把这个water给得到。
11:09
对吧,哎,就是watch啊,Watch就等于自己啊,咱们现在的这个人的opens当中的这个watch,然后我们现在就可以便利啊,Object key这个watch。对吧,哎,然后watch的话,我们现在就可以for each for each的话呢,现在就是key key的话我们就可以new这个这个water对吧?哎,因为你拗完water之后,它这个就很神奇。是吧,哎,那那。绑定谁是不是他自己self吧,因为你new的时候,你别忘了water要三个,一个party,一个expression一个扣啊,然后expression就是给个key,然后扣呢,不就是这个watch的啊,你当前传的这个watch的这个key吗。是这样子的,所以你这块的这个A呢,它就能被监控啊,那这块的话,我们看log一个AA改变了对吧,AA改变了啊,然后我们刷新一下,这块是不报错的,但不报错的话呢,怎么用,就相当于这块是有一个实例。
12:05
实例的话,比如说我们管它叫VM,然后我们这块就可以输,呃,输出这个VM。啊,那这个ABM的话,它就是一个对象嘛,那这个对象身上你看就有个data data就有A,而这个A呢,它现在是不是有一个observer,还有它的一个依赖收集系统。发现了吗?都是在他的这个身上的,是这样,都是在他的这个身上。啊,没有什么毛病。好,那没有什么毛病的情况下呢,我们接下来的话,这块就可以去怎么办呢?是不是就可以去用VM点这个A,我们就可以去加加对吧?哎刷新你看这个A是不是改变了。对吧,那这个A是不是就已经被试图访问A属性,试图改变A属性,然后呢,我是notify,你试图改变A属性,A改变了。对吧,哎,那这个其实就很神奇,就是我默认写的这个,我默认写的这个watch啊,就我现在在观测这个watch,实际上就已经通过这个water就一下子就解决了。
13:01
对吧,那可能有的同学就到目前为止明白这个water是怎么回事了。啊,就明白这个water怎么回事了,就相当于就相当于。对于初学者而言啊,最容易理解不了的其实就是这个watch,就是这个watch。啊,那现在的话,相信你对这个watch和这个watcher就啊就更加的了解了啊,就他是干嘛的呢?他就相当于不管你是直接自己写到watch室也好,对吧,还是我们自己去做的这个啊,做的这个响应式的这个这些东西也好,因为我们自己比如说写的这些data。那这些data我们要变成响应式的呀,对吧,那这些data我们要变成响应式的话,我们要我们要干嘛?对,我们现在是不是就需要observe observe它里头是不是也含有watch。所以里里外外这个water它是挺挺累的啊,那它water能干什么,Water就能去触发你这里的一个回调。啊,那它是很智能的,所以说你在这里改变这个啊,你在这里你看V,呃,VM的这个A加加,它照样能够去把这个A改变了,是很神奇的,对吧,那你如果不握持的话,那他是不行的,你如果不握持的话,他这里这个回调是不会出现这个事情的。
14:08
啊,不会的话它是不行的,对吧?哎,但是这个watch你最好也得写啊。哎,最好也写,你看这样他就不会去对吧,但它也会通知这个notify,也会通知这个视图改变。发现了吗?它也会通知这个视图改变,所以这个东西呢,还是比较好玩,就这个watch。这个东西啊,所以说呃,如果说这块你还是觉得懵啊,那就说明你在之前啊,咱们这个啊,就是啊,就说说白了就是你在学数据监测的时候,就没有特别理解这个第1P和watch啊,那么watcher啊在还是建议大家能够把之前的视频好好的再回看一遍。啊,好好的把这个water这个视频呢,咱们再去认认真真的重写几遍。啊,那这样重写几遍的话呢,你就能够让咱们的这个。对吧,哎,让咱们的这个变得更加的啊,就是清楚咱们这个呃。
15:03
就是小脑瓜对吧,变得更加的清清清澈啊,哎,一下子就能明白,它还是挺开心的是吧,你这个卧室能够被监测了。好了,那这个时候这个模板编译的话呢,它元素还是没有上述的,看见没有,咱们现在这个这个视图还是没有上述的,那我们在下一个啊视频当中,我们现在去解决这个问题。对吧,哎,解决这个问题啊,就是说他这个模板编译肯定是要编译的。啊,编译的话呢,但是你这个编译的半天,呃,你这个模板怎么到最后对吧,诶都没有上树。啊,那他是怎么回事,那我现在呢,就需要去把这个东西给你去解决啊,把这个东西彻底的给解决一下。
我来说两句