00:00
好嘞,各位在这一小节呢,我们来完善一下这个编辑功能,目前呢,是这个样子,当我点击编辑按钮的时候,它确实变成了一个输入框,但是我还得手动点一下获取焦点,再输入东西,然后再把它改掉,一个更好的体验应该是这样的,就是我点了编辑按钮啊,你除了要把这个睡觉文字变成一个输入框以外,你还得做第二件事儿,就是让新变出来的这个输入框怎么着获取焦点,也就是说我一点击编辑按钮,直接它就处于这个状态了,那这个代码得怎么写呢?其实就是加一个逻辑,对吧?各位编辑编辑按钮的时候,多做一件事不就可以了吗?回到代码里面,编辑按钮在这儿呢?这个if和这个else呢,都是为了完成文字变输入框的,对不,接下来多做一件事,拿到那个输入框,让它获取焦点不就可以了吗?所以说呢,我给它打一个ref,保证我能拿到它吗?起个名字叫做into的title,输入的title。
01:00
嘛,好了,给它复制,然后呢,在这个里面开始写逻辑,首先拿到它this,点到for,拿到它,然后调这么一个API就可以了,Focus是不是获取焦点来我们试试啊各位你看if else把文字变成输入框,紧随其后,我就让它获取焦点来,咱看看行不行啊,比如说我想编辑这个学习来走你各位没有效果,这是为什么呢?我们分析一下啊各位是这样的,就是当你刚才点击了学习之后啊,他走了if判断,然后呢,进入到这个里面了,走完了他没有进入else,然后是不是就来到这儿了呀,各位你听我说,这就是一个实际的问题了,你是不是觉得你46行改了it's edit,你是不是觉得你改了it's edit view就发现了,那你是不是觉得view就立刻的帮你去重新解析模板,然后input框是不是就出来了,出来了之后你是不是觉得才执行的这段代码,然后。
02:00
的框是不是就获取焦点了呀?其实不是,各位,我告诉你真正的流程是这样的,这句话的确走了,但是走完了这句话之后,各位view并没有直接去给你重新解析模板,View是继续往下走,走了哪句话,走了这句话,走了这句话之后,同学,然后人家再帮你重新解析模板。但我想问的是各位,由于我们是用V-show在控制这个东西,那也就意味着刚才走这句话的时候,音input的框还没有来到页面上呢,对吗?啊,Input框确实有,但是display隐藏了,我们之前就说过,如果一个input框给它隐藏了,你再去调input框的focus,能获取焦点吗?不能,所以说这是一个顺序上的问题,View并没有像我们想的那样,就是只要发现你改数据了咋的,立刻就重新帮你去重新解析模板,没有啊,他是等把这些所有的这里边的代码都执行完了啊,然后再去重新解析模板,那他为什么这么做呢?啊,它防止你发生这个问题,你在这儿改了todo的is edit,你再往下又改点别的好家伙,你一共改了八个,如果人家遇到修改就重新解析模板,那就存在一个效率的问题,你改了八次,那人家模板就重新解析了八次,没那个必要,所以说人家是这么想的,我就等着你这个回调里面所有的代码都执行完,最后我再琢磨一下,一共你改了几个地方,诶,我再给你重新解析模板去啊,也就是说各位51行这个代码掉了。
03:35
但是阴部的框还没有出现在页面上呢,对吗?那这问题怎么解决呀?啊,最简单的办法,各位你在它这个外侧呀,给它包一个东西,包一个延迟定时器,让它等多久呢?200毫秒,然后各位来这句话开始走,马上就奏效,来我们瞧瞧啊,各位首先呢,我先把它调成正常获取焦点,失取焦点,接下来你看着啊,我想编辑这个睡觉来走,你各位怎么样是吧,是一个顺序的问题,你这样写的好处就在于等你去编辑那个吃饭的时候,你点击编辑按钮不要紧,你自动就从睡觉那个input框里面,是不是失去焦点了,你看着走直接就过来了,这样的话比较好啊说老师那难道就得这么解决吗?就得包一个定时器吗?当然不是,官方也想到这块了,官方给我们设计了一个API,来,各位从这个VC出发呀,你能得到这么一个东西叫Dollar福next t next啥意思?
04:35
呢,哎,就是下一次的tag呢,有轮的意思啊,你比如说像玩游戏,我第几轮了,第二轮第三轮了,对不?所以说他的意思就是下一轮,说老师那啥叫下一轮呢?来听我说这个next t呀,它可以去指定一个回调,你比如说我给你写一个方式回调,Next所指定的回调函数会在盗墓节点更新之后再执行,我再说一遍next t所指定的回调会在盗墓节点更新完毕之后再执行,那有没有一种感觉,我可以安安稳稳的把这个东西放在这儿,那你这个整体的逻辑就是,诶,遇到这儿了,他去修改it's edit view发现了,说哎呀,你修改了it's edit,但是呢,我先不去重新解析模板,我等着你把所有的代码都执行完,于是乎呢,就来到这儿了,VIEW1看到红色框的代码就心里边有数了,哎,说明白了,这兄弟啊,是这意思,就是一会儿呢,我去重新解析完模板整个。
05:35
报M都更新完毕之后啊,诶我再帮这位兄弟呢,去调用粉色框里的这个函数啊,然后呢,就去重新解析模板了,然后呢,Input的框就出现到页面了,然后呢,诶就执行了这个do更新完毕了吗?那这个时候你就发现诶你点击就直接可以获取焦点了,你瞧着啊走对吧,点这走走是不?各位哎,所以说next t在真正开发当中啊,用的特别多,各位啊,那这个东西官方是怎么解释的呢?各位来我给大家总结好了,官方是这么说的,就是作用就是在下一次盗墓更新结束后执行其指定的回调,注意是下一次,不是本次。
06:19
啊说老师这个下一次我怎么理解呢?同学啊,咱就这么说,你在这我问你46行你改没改is edit你改没改,改了,但是你在这改了,是不是得等整个这些东西执行完了之后再去重新解析模板啊,那这不就属于下一次了吗?是不是?哎说的再直白点,本次啊还没来得及改呢,诶下一次他去改对吧?各位,哎,所以说这个东西不难,但是非常有用,是不什么时候用呢?一般这个时候啊各位就是当改变数据后,你数据是不是改了,也就是说来同学我们的代码里a edit是不是数据,是数据改没改,改了再往后读,当数据改变后,要基于更新后的新到母谁呀,不就说那input框吗?啊要进行某些操作,什么操作呀,获取焦点,那么就需要在next t所指定的回调函数中去执行那个获取焦点,哎,说白了,同学你要不包这。
07:19
东西啊,代码执行的顺序他不对,是不啊,这东西都走完了,完了音input的框才来到你的面前,那肯定不行对不?所以说得用这个,但是你会发现啊,有些程序员呢,它也这么写,就直接把外边这个NET呢换成一个定时器,完了定时器呢,不给时间,同学,咱们学过那个浏览器的循环模型,你说就这样写啊,我把它拿走。我把这注掉,我在这儿呢,直接写一个set timeout,然后我不给时间,说白了就是定时器立即到点呗,但是我们心里明白各位定时器就算立即到点,定时器的回调也得推向队列去执行,所以说你这么写同学也能把这问题解决,你看是吧,也可以,但是官方一点儿,你别这么写,官方一点呢,用这个就可以了,OK,各位啊,一个顺序的问题,他为啥把好多次数据改变都积攒到一起,然后再重新解析模板呀,为了效率高嘛,对吧,各位好了,那这一小节呢,我们停。
我来说两句