00:00
好嘞,各位,那在这一小节呢,我们给大家说一下VIEW3中的响应式原理,说VIEW3的响应式原理之前呢,我们先回顾一下VIEW2里的响应式原理,在VIEW2当中,对于对象类型的数据,它是通过object.DeFine property来对对象里面的属性的读取和修改来进行一个拦截的,我们管这种拦截呢叫做数据劫持,哎,大家想想数据劫持是不是响应式的根基呀,你连我改了数据都发现不了,你怎么给我做响应式啊?我们再说数组类型,在比如二当中呢,数组类型他想做响应式是通过重写更新数组的一系列方法来实现的拦截,就比如说你在view当中啊,数据里面呢,有一个数组,你调了数组深升的push方法,其实你调的是vu经过二次封装的push,这个push里面做了两件事儿,一帮你正常的。
01:00
去调用数组身上的push,那么第二件事儿呢,帮你更新界面是不?这个之前我们都验证过啊,我们在控制台给你输出过对不对,我调的push到底是不是位原型对象上那个push输出的是不是false对吧?各位哎,我们也可以换一个说法,哎,叫对数组的变更方法呀,进行了一个包裹啊,那在这儿呢,写了一个简略的代码在这啊同学咱就别看了,一会儿我重新给你快速的写一遍,OK,那么VIEW2这种实现响应式有什么问题呢?存在的问题就是新增属性,删除属性的时候,界面根本就不会更新,还有就是直接通过数组的下标去修改数组里的元素的时候,界面也不会更新,其实这两种方式同学数据都改了,但是VIEW2没有监测到,对,不可能有些同学啊,这块忘了,还有一些同学呢,是直接听的我们这个VIEW3的课程,所以说呢,我。
02:00
重新快速的给大家演示一下,在桌面上呢,我提前建立好了一个V2的工程,并且呢,我提前写好了一些代码,来咱看一下我写什么了,超级简单,各位没有第二个组件,就一个APP数据里面保存着,哎整体来说呢,人是一个对象,里边有人的名字,还有年龄,然后我把这个呢呈现到页面上了,那么接下来呢,我运行一下它啊,Npm pro serve,由于我之前这儿啊已经开了一个了,VIEW3的这个脚手架呢,是8080,那这时候你发现啊,它特别机智,它把V2这个脚手架再启动的时候啊,那个端口号啊自动加了一,哎在8081上好了,我们打开一下走着。空台呢切好,为了能让大家更明白啊,我看的是哪个,在这里面同学你看我这个网页的标题,VIEW2 view2,然后在这呢,我是VIEW2写的效果好,接下来呢,测试一下这两个东西,我新增属性和删除属性的时候,VIEW2能不能监测到,好回到我这里面,在这儿呢,我写两个按钮啊,第一个按钮呢,叫做添加一个sex属性,哎,就是性别,那在这儿呢,写一个叫做删除,删除谁呢?删除已经存在的这个内幕属性,你看这这不有一个内幕吗?来把这个隐藏掉,那他们两个呢,都给一个点击事件click,添加一个sex,那就是I的sex,那删除一个name呢,叫做delete name OK,写完了,那这个这个都得配置成MYS在这写,别用VIEW3的啊,VIEW2里面不能直接写VIEW3的啊,直接写view。
03:46
它里边正常的那个,来把这个呢缩进调一下好,里边呢开始正常写代码,先说说添加一个性别属性,要是正常写我得怎么写?首先this.person我是不得拿到这个person,各位这得写this啦,这不是在VIEW2里吗?对吧?然后点二什么呢?Name,哎,不是name了,我想添加一个性别属性,那就直接写呗,性别呢,让她是一个女同志,写完了吧,各位啊,那看看效果啊,在这儿再来一个展示的不是年龄了性别,那这怎么写呀,Thanks是吧,各位,哎,来看一下效果啊,回到这儿刷新一波,那我想做的好一点,就是如果你没有性别呀,你这整个这标签都不要展示,很简单,回到这儿加一个东西就得了,叫做v show啊,那判断的是谁呢?就是person身上到底有没有性别这个属性,来我们测试一下啊,刷新一波,原本它只有两个数据,一个是内幕,一个是A,我添加。
04:46
走没有效果,那数据变没变呢,直接告诉大家数据啊,其实变了在这儿,你输出一下这个东西啊就得了,放在这儿啊点什么呢,性别。我添加之前输出一次,添加之后输出一次,同学,这够说明问题了吧,刷新一波来走着,添加之前没有,是安范的,添加之后有了,但是页面为什么不变呢?因为你直接这样操作,数据添加一个新的啊,你通过那个DeFine property它监测不到,那这问题怎么解决呀?各位啊,是VIEW2里呢,按照咱们笔记来说,确实有这问题,难道就不能解决吗?
05:28
可以解决各位,哎,咋解决我不知道你还记不记得了,我们是不是有这么一个API this.dollar for set还记得他不?哎,告诉人家你要给谁身上追加东西,我要给this person这个对象身上追加一个什么属性啊,性别属性,那么他的值呢?哎,比如说是一个女同志,OK,写完了吧,这回瞧效果去刷新一波添加走来了没来了啊,那只有这种解决方案吗?也不是,各位怎么着,哎,在这我给你准备好了,把这个引入view的解开同学,在这一来view身上也有这么一个API,但不叫Dollar site,叫做view.site能不能回忆起来点啊各位来刷新一波走是不来了,哎,那这个添加属性这问题啊,也能解决,就是麻烦一点,你得调一个特殊的API,或者呢,是调这个好了,那我们把这问题解决了,那把这个呢,给它注掉,还是用这种方式啊,省着再引入这个view了,那接下来同学来说第二个问题吧,就是我想删。
06:28
除这个name幕属性那咋办?你正常来说吧,删除很简单,从对象里面删除一个属性,我们还不会吗?Delete this点谁person点啥是不是name呀,来瞧效果啊各位这块呢,我也做的好一点,在这个名字这块也给他来一个V-show,就是说如果呀,你连名字这个属性啊你都没有,那就不要展示这HR了,来刷新一波,一上来是不是有啊,删除一下,哎,说老师删没删呀,回来老套路同学肯定是删了,把这一行给它放过来,删前输出,删后输出,那在这呢name,那在这呢name OK,看一下效果啊,刷新一波走删之前张三删之后呢,Andde find的是吧,数据确实变了,但是页面不更新,同样的道理,因为你通过这种方式去删除属性,得犯property是监测不到地啊,大家回忆一下得property只写两个东西,一个是get,一个是set,当有人读取的时候,诶,我帮你调这个,那当。
07:28
有人修改的时候呢,我帮你调这个是不?那当有人新增的时候呢,嗯,我检测不到,那当有人直接删除的时候呢,嗯,也不行是不?各位,那这个问题来吧,怎么解决呢?也有解决办法,只不过这个东西啊,之前没跟大家提过,哎,This点同学,它有Dollar site,我跟你讲它就也有Dollar delete Dollar就是给一个数据里面追加一个响应式的属性,那你说delete呢啊,就是给一个数据对象里面移除一个响应式的数据呗,那在这直接写this点谁呢?Person移除谁呀name这不就得了吗?来看效果啊各位,删除名字走你是没了,哎,那同理,如果说呀,你不想用这个this身上的这个,你就可以用它把这直接复制过来得了,走着,那这行呢,住掉这行呢解开这行呢,删掉,那这块叫什么呢?哎,叫做delete,好这回呢,看一下效果啊,刷新一波走你。
08:28
哎,舒老师这姓名怎么还在呢?那你检查一下呗,因为这块儿没改是吧,来刷新一波,这回走是不是没了呀,也就是说各位有一种什么样的感觉呢?确实存在这个问题,但是能不能解决,能解决来再说一下这个各位就是直接通过数组下标去修改这个数据界面不会更新,同学也存在,比如说在这儿写这么一个东西吧,好呗,诶写一个爱好,爱好是一个数组,比如说学习啊,然后再来一个,哎,叫做吃饭行了,然后我在页面上呢,想展示这个爱好,那在这儿呢,我在最后吧,再来一个啊,没有V-show啊,直接就是爱好在这儿,直接给它改一下爱好,那这怎么写呢?Person点后baby啊,那当我想修改这个爱好的时候,来吧,在这儿走叫做修改第一个爱好的名字,嗯,那在这呢,我就直接写一个update啊是ho就。
09:28
得了啊,但我们心里明白啊,不是修改所有是修改里边的第一个啊,那在这儿呢,再给他配置一个so尼,里边怎么写各位this.person拿到hoby,然后改第一个爱好,比如说给它改成什么呢?哎,叫做逛街,OK,改了吧各位,那回到这刷新一波啊,走改吗?不改为啥呀,这样写还是不行,那怎么解决呢?同学老套路,还是利用这个东西啊,view.set或者是this.dollar set就可以了,在这儿来同学是不是可以这么写呀,比如说this.person然后找谁呢?找这个hobby啊,找这个诶hob北,然后修改它的第几个呢?索引值为电零的那个,哎,把它的值呢改成逛街,这样是不是可以来刷新一波?各位走着改没改改了,那只有这种方式吗?当然不是,还有另外一种各位啊,啊,就不说那个view.set了啊,那肯定是有的那东西啊,说这个各。
10:28
找到这个东西啊,这个数组,然后调数组身上的这么一个方法叫做Li,大家还记得吧?啊,那这怎么传来着啊,我想修改第一个,那怎么写呀,零一,然后写上这个逛街走着,你这不是属于掉了数组身上的变更方法吗?来看一下效果走,你变没变了,哎,所以说同学也能解决是不好了,我们把VIEW2这个响应式的原理给大家复习了一下,哎,然后呢,又把它存在的问题呀,都给大家演示了一下,然后呢,我们又说说如何解决这个问题,所以说同学还是那句话,不要说我们讲了5U3就把5U2踩的一文不是是吧,不要这样各位,因为他确实有问题,但是人家呢,也给你提供解决方案了,对不?各位好,那这小节呢,我们先停没干别的,复习VIEW2的响应式原理。这小节停。
我来说两句