00:00
好嘞,各位,那在这一小节呢,给大家讲一个VIEW3里的新知识,叫做ref函数,我们之前在VIEW2的时候吧,学过ref,咱们那个时候学的re呢,是一个标签属性,诶也就是说呀,它是这么用的,你比如说我有一个音input的元素,然后呢,我写一个ref走,随便写一个啊q we走里边呢,还有一些别的属性,我们就不关心了,然后呢,诶,这个标签写完了,那大家想想我们之前为什么给一个元素写上ref这个属性呢?简单点说就是为了给这个元素啊大标识,哎,说白了,回头我得拿到你啊,拿到你之后呢,你比如说我让这个input框呢,获取焦点啊等等一些操作,对不?哎,咱之前聊过,就有点类似于原生GS里面ID的替代者,对吧,就是打的标识很简单,但是这回我们讲这ref他可厉害了,它是一个函数,哎,这两个东西你不要搞混,哎,不是说这样说老师就把原来的这个废了呗,完了用这个呗,不是各位原来的没有废掉这个ref。
01:00
你依然可以使用,这回只不过在VIEW3里面多了一个ref函数,那这个函数它能干嘛呢?哎,我们用一个功能去给它引出来,找到我们之前写的代码,来吧,各位精简一下啊,我不想写这么多的东西,只展示人的姓名和年龄,删掉删掉,然后这个数据呢,同学,我也不想通过V2这种方式去配置,当然了,也不想通过VIEW2去配置,这个方法删掉,然后这个呢也删掉,这个注释呢也删掉,因为这一小节啊,我们就得关注一下响应式的问题了,诶来给它删掉,只留下名字和年龄啊,这些东西也都给它删掉,那在这儿就干净了,我只返回内幕和A置是不是就可以了,那这呢也给它删掉好,目前呢,我们看一下效果啊,回到页面刷新一波,哎,那就人的信息呗,张三18来加个功能在这啊,写一按钮,哎,叫做更新或者叫修改吧,修改人的信息啊,那给他来一个点击时间,走名字呢,我叫这个change info,诶。
02:00
改变信息吗?音符不是有信息的意思吗?那在这儿呢,我就得给他匹配一个什么东西呢?方法来走着,方式名字叫做change,音符里边怎么写,不就是想把那名字和年龄改一下吗?啊,那非常简单,各位内幕直接改吗?等于比如说不想让他叫张三了,叫李四行吧,那再写着,同学把这age也改一下啊,不是18,比如说那是48 OK啊,那再把这东西怎么办?是不是得交出去啊同学,这一步你千万别忘了叭,那个VIEW2多了一个环节,你这不返回,同学你说你上边怎么用呢?对吧?各位来保存,这回看一下效果啊,理论上好像应该能改过来,你说对不?各位,我数据在这儿呢,完我在这一改对不?那我一改数据页面就变呗,诶,这不是view给我们的承诺吗?啊,来看一下效果啊,回到这刷新一波321走。改过来了吗?没有,但这事儿啊,咱得说明白,到底是数据压根儿就没有改过来,还是说数据改了但是页面不更新是不?各位哎,那怎么验证啊,很简单吗?我就在这儿,改完了之后我就来个consolo输出,输出名字还有年龄不就得了吗?我先去改,改完了我再输出来看一下效果啊,刷新一波走你各位发现了什么呢?数据其实改了,但是怎么着view?
03:18
哎,你是改了view,没有监测到view,同学只有捕获到了,你修改数据是不是才能帮你更新页面?哎,这个工作流程我不想再赘述了,同学咱之前研究过好多遍,在V2里面,是不是那数据是你改的他没发现呢?哎,那回来怎么能让他发现呢?哎,各位先说一下这个问题出在哪儿啊?问题出在这儿,你这么去定义这个张三和18呀,那只是一个普通的字符串和数字,无论它怎么改,U不会监测到的,也就是说你这么定义的数据,它根本就不是响应式的数据,如何把普通的数据变成一个能被view所监测到的响应式数据呢?那就得借助这个人了,谁呢?Ref函数来引入,哎,这个ref同学不是属性,需要引入,哎,从比里面引入一个re函数。
04:06
那么它的用法也极其简单,就是把你正常所配置的这个数据啊,诶交给ref,在这直接写张三,那同理这个18删掉ref走着这就写一个18,哎,其实你看从这个形式上并不难,就是原本你直接写张三,这回咋的交给ref函数,Ref函数把这张三呀加工一下,然后再存在这个name里,那同理把这18呀也再加工一下,然后呢,再存在这个A里,OK吧,哎说老师这回就响应式的,是的,这回就是响式的了,来,那这回呢,我们看看啊,回到这儿呢,刷新一波,哎说老师这回可好了啊,321走你。气人不同学,页面变吗?死活不变,那你这数据改没改啊,改了,哎呀,说老师这太烦人了,这怎么个情况呢?来想把这问题说明白,各位,我把这行注掉,你先别改啊,这块儿呢也注掉别改,说老师为啥注掉,我就直接告诉你,你这么改改的不对,你不能直接name,等于李四你这改的压根儿就不对,所以说啊,同学咱这样你看行不?我点击修改人的信息的时候,我先不改,我先不执行这俩东西,我给你输出一下name和age长什么模样,也就是说我想瞪大眼睛看一看ref加工完那张三,他是一个什么样的张三,对吧?各位好,回到这儿瞪大你的眼睛看好了啊各位,我要开始点了321走。
05:33
好家伙同学,原来ref所加工完的张三本质是一个什么?来看这儿,再看这本质是什么,是一个对象,原来ref加工完之后的那个年龄18,它也是一个对象。哎,体会体会,你写的字符串,张三变成了一个对象呢,哎,对象在哪儿呢?在这儿呢,往前看各位,他是一个对象不假,但是前边写了这么一个东西,那么他想给你表达的是什么呢?哎,也就是说红色框这东西确实是一个对象,那它是谁的实例对象呢?它是re I PL的实例对象,那问题是蓝色框这东西是个什么鬼?来,各位把这单词呢,我给你拆分一下,各位啊,你别嫌墨迹。再比如三里面关于ref相关的东西,其实挺缠绕的,我们只有一步一步的把每个单词,每个缩写是什么意思你都搞明白了,你才能彻底的懂。好同学,我把这个呢写一下ref I mpll啊,这个词呢,得拆解一下,首先看前半部分啊,这个re呀,指的是这个单词,各位re reference,有什么意思呢?来各位直接说了啊,不查了,叫E。
06:48
引用,哎,引用,然后再看后边这个I,它所指的是这个单词it employment,它的意思叫做实现。
07:01
哎,一个叫引用,一个叫实现,那连起来念呢,啊叫引用的实现,说老师这啥玩意儿,这越解释越懵啊,怎么就引用的实现了呢?各位你想想啊,有没有这么一种感觉,你刚才写的吧,就是一个干巴巴的字符串啥呀,张三,哎,这想张三,然后呢,人家把你的张三拿走了啊,然后呢,通过某种方式塞到这个对象里了,然后呢,你用张三的手得从这个对象里面把张三取出来,你觉没觉得有一种感觉就是通过这个红色的对象,你在引用这个张三是不?哎,是在这体现出来的啊,朱老师,这词我也得记位同学了解知道就可以辅助你理解的,也就是说各位在VIEW3里面想把一个普普通通的字符串,想把一个普普通通的number数字变成一个响应式的数据,你就必须得借助ref来回到这儿re杂的,哎,给你包装一下,当然啊,各位,我们还有另外一个手段。
08:02
那是下一小节讲的,这小节我们只关注ref啊,你把张三丢给ref ref1加工就把你的张三变成了一个什么实力对象呢?哎,以后呢,同学我们管这个东西啊,就这么称呼了,先说说标准的称呼,标准的称呼应该叫做引用实现对象,引用实现对象,因为ref employment本身就有引用实现的意思嘛,哎,全称应该叫做引用实现的,哎呀,我的天呀,什么呀,实例对象,但是同学你不觉得这么说有点反人类吗?啊人问你还说那比如三里面你把那数据丢进去,Ref加工之后生成的什么呀?你告诉人家,你说是引用实现的实例对象,哎哟,我的天呀,直接把人干废了。所以说同学,以后我们简称这个红色的对象,我们换一种称呼,直接就叫做引用对象就完了,哎,也就是说想实现响应式,那就得把你的数据丢给ref,让ref加工生成一个引用对象,就变成响应式的了。
09:01
啊,那来我们打开它看一下,哎呀,说老师里边有这么多东西呢,来同学这些我们不关注,哎,就是什么下划线开头的什么下划线,下划线这些同学我们不关注,不是给咱成员用的,哎,主要是看这儿各位你也看到了一个非常熟悉的形式啊,有一个Y流属性值的,嘿,不给你,然后呢,是三个点,哎鼠标往这一放呢,你看人家的提示是invoke property,同学不觉得这玩意儿有点熟悉吗?啊同学,这是什么呀?VIEW2里面它去实现这个数据的响应是用的是不就是get sector说的再明白点,是不是借助了object.DeFine property,然后配合着get和C,是不是完成的这个响应式啊,那我告诉你同学,在VIEW3里面ref去实现响应式也是通过object.property也是通过ER于cier,那这个时候可能就有同学说了,老师是吗?你点开那value是张三吗?你看一下呗,是不是哎。
10:01
是,那还有一些较真的同学说了,老师不对,我并没有看到那个塞和get啊,在VIEW2的时候,我是亲眼能看到那个塞和get的,那你这没有啊,同学,有,只不过呀,他给你藏起来了,藏哪儿了呢?藏在原形对象里了,各位这就很巧妙,你觉没觉得他这样做让你看到这儿的时候就很干净,那你说有没有get和塞呢?其实有他藏在原形对象里了,而且同学还有一个优势,就是原形对象里的东西,当他找东西找不见的时候,自动就找原形,是不是各位不用你在指挥他了,你看多巧妙啊,哎说老师不对,这怎么还有一个value呢?那你点开呗,哎说老师这还有一个张三,这啥情况啊?同学,我这么说呀,你就懂了,你觉不觉得红色框里的这一堆像极了我们VIEW2里的这个人,我给你分析过啊,叫做下划线data。同学,我这么一说,是不是有种感觉豁然开朗,你写的张三人家收集到了,给你匹配了张三的geter,张三的塞ER,然后呢,把张三那个值啊放在一个Y流属性中,哎,然后呢,给你放在圆形对象上了,但是呢,为了能让你取出来的更方便人把这东西往这儿是不是又放了一下啊?同学像极了我们把下划线data里的属性放在VM身上对不对?各位你看看V3想理解好同学V2你得过关是不?哎,那同学说到这儿呢,我们就可以停下来了,那这回你就知道了,我要想读这张三,我得怎么读,您得点歪溜,那我想改这张三呢,我也得点歪溜去改,你读的时候人家走的是get,哎,你改的时候人家调的是塞,然后塞里面封装了一个逻辑干嘛呀?哎,去更新页面是不各位,哎,那回来吧,各位都看到这东西了,哎,那看一下这儿啊,这年龄肯定也是这么做的,你看18打开有年龄的geter塞这儿呢,18是不但我们一般不去看这个圆形里面折叠。
11:53
起来我们就直接点value得到是不是就可以了,好回来,那你说接下来怎么办呀?哎,那不用我教你了,各位能教我了,这会儿打开这儿呢,打开同学那个name呀,是你心里想的那样吗?一个单纯的字符串,我问你是吗?不是那咋办?哎,你得点value是不?哎,那同理,这会儿也得点歪六,这不就得了吗?啊来回头看一下效果,刷新一波321走你。
12:19
数据变没变,变了页面更没更新啊更新了你看响应是吗?对不?各位回来,但这里边儿啊,有一个事儿呢,有点解释不通,哪儿解释不通,哼,你看这儿同学模板里面按照常理来说,我不是得点歪溜A着呢,我是不是也得点歪啊,但是现在有意思了,我不点VALUE6它也能读出来是不说老师那我点value呢,你点value就不对了呀,回到这刷新一波,你看东西都丢了,哎说老师这怎么回事呢?跟大家说啊,在模板里面你不需要点value流,为什么呀,它能自动点value流,就是VIEW3在解析你这块的时候,他发现,哎呀,你想读取内幕,然后呢,他发现这个内幕是一个什么?哎,完整点说,他发现这个内幕是一个ref impf的实例对象,然后呢,他身上啊,有很多很多的属性,其中有一个最重要的啊,对我们来说啊,最值得拥有的就是这个VALUE6,随后呢,比如三呢,就把这个VALUE6啊给你读取出来了,给你。
13:20
放在这儿了,那么简单点说,就是刘三在解析到这段代码的时候,发现这个内幕是一个ref引用对象,哎,简称re对象或者叫引用对象都可以。哎,发现是个ref对象,那怎么办?哎,就自动的读取了Y6值,说白了,你不用点Y6了,人家帮你点完了,OK,这不就可以了吗?学会了吧?各位想让数据响应式吗?想,那就这么写,想改吗?想,那就这么写,想在模板上呈现吗?想,那就直接写OK。
我来说两句