vue3 组合式 API有哪些
组合式 api set up 和 r e f set up 是组式 api 的入口， if 是定义基本类型的响应式选项，是可以实现响应式的效果。组合式 api 使用 set up 和 r e f 也可以实现响应式的效果。
粉丝16获赞115
相关视频
01:19查看AI文稿AI文稿我之前在介绍我由于户口的时候，那很多朋友留言人说为什么管他叫户口？人家官网给的明明是组合，是 api， 我看到这个问题的时候，我也是疑惑了一下， 是呢，我又去多找了一些关联性来看一下为什么大家把它叫成户口。首先这个组合式 api 啊，从他的编码逻辑上跟 rex 的户口是非常的相似，那 rex 我们在他的中文网站上看到他明显的就叫库克。 还有一点，你看瑞瑞克的户口，他所有的 api 都是以柚子开头，这是人家的规则，但是没有也没有这样的一个前缀的规则。但是我们来看两个业界比较常用的户，首先是瑞瑞克这个库，我工作当中也会用到，叫 ahops， 这里边都是基于瑞瑞克的户口封装的，一堆户口 都是自建议户口啊，有非常多的功能。然后我们再看无忧易的这个无忧易柚子，咱们就从这个命名上来看，是不是有一些共性，我们把他的 前缀都命名成了跟 reax 的一样的命名规则。那最后我还发现在 reax 的官网上面，我们在这里搜索户口，他会有一个文章叫和 reax 的户口的比对，他也是和 reax 的户口进行了一个比对，这里分析了他的一些区别，基于以上三点同时期命名雷同， 再加上官网也有进行比对，所以我们把这个组合式 api 叫成户口，在工作当中也是比较常见的，好像也不会引起什么奇异，是吧？大家都懂。
898北漂程序员狮子
09:17
13:37查看AI文稿AI文稿哈喽，同学们好，这个节我们来讲一下我们的 watch 函数，那提到 watch 话，大家应该不陌生，对不对？用来干嘛的呀？哎，今天数据变化的，比如说我们下面这样的一个小案例， 咱们需要根据用户的一个输入关键词去后端呢拉取我们的数据，只要他输入的数据已变化，咱们就不断的从后端拉取不同的数据，你看这个小案例是不是就可以用我的 watch 去做一个实现呀？ 哎， ok， 好，那在 vivo 三这边呢， watch 的一个基本的作用跟之前呢 vo 二呢是非常相似的，它依旧是用来征听一个或者多个数据的变化。在数据变化的时候呢，咱们可以执行一个回调函数， 同样的话，两个额外的参数他依然是保持的，一个是我们的立即执行，一个是我们的深度聆听，哎， ok， 好，那接下来呢，咱们就按照这样的顺序，我们先去实现他的 一个基本使用，真听一个或者多个。然后呢，咱们再给大家开启两个额外的参数，一个呢叫做立刻执行，一个叫做深度真听。好，我们先过来看一下如何去真听一个数据的变化好过来， 那如果我们想真听单个数据的变化的话，他的语法呢，大概这样来写两个步骤，第一步呢，咱们需要先导入这个函数啊，叫做 watch， 用谁导谁？第二步呢，你需要去执行这个函数，然后传过来一个要真听的显示数据，哎，以及一个回掉函数。 好，我们看他下面一个写法，大家看这里哦，第一步先导进来，哎，导入这个函数。第二步呢，你需要去调用这个函数，调他的时候呢，我们传过来两个参数，第一个参数要真听谁，你就把那个响音师的数据啊，把它放过来，这里呢， 咱们是一个 ref 哎，由它来产生的一个显示数据。那第二个参数呢，是一个回调函数，这个函数的意识呢，就是说当你监听的 count 发生变化的时候，这个回调函数呢，会不断的进行执行。 那这里边还有两个他自动给咱引入的参数，一个呢是变化之前的老值 oww， 一个是咱们变化之后的新值，叫做 newww。 好，那看完他的一个大概语法之后呢，接下来呢，咱们去打开我们的大码，咱给大家落地一下，好，回到我们的大码区域。 左边呢依旧是我们跑起来的一个项目，这里呢，我们打开它的一个跟组键，我们在这里边呢开始编码的动作。好，右边呢是它的一个预览的一个结果。好，这里呢我们准备了一些样板大码哈，大家看一个 count 数据，它呢是由 ref 产生的一个响应式的数据，一个修改它的方法叫做 set count。 那下面呢，我们用一个按钮绑定一下一个事件，然后这个地方呢实现的效果呢，其实就是大家熟悉那个点击自增，打开右边哈点它， 哎， ok， 就这样一个小效果。咱们这样做的目的呢，是为了用 watch 去征听一下我们 count 的一个变化。好，咱们过来写吧， 咋写来着，哎，写一个 watch 函数，上面呢会自动给咱导入。第一个函数呢是我们要真听的数据，我们要真听的不就是我们 com 的吗，对吧？ 那第二个参数呢，是一个回调函数，代表 com 的变化时要执行的那个回调函数。那看到这里大家可能会疑惑哈，哎，这里怎么不加 点 value 呢？咱之前学过，不是要讲加吗？对吧？哎，这里注意哈，我们的 watch 里边呢，第一个参数 ref 呢，是不需要 加我们的点 y 六属性的哎，它会自动帮我们去处理哈，哎，这是一个需要注意的事项。好了，在里边呢，我们先简单的打一个 log， 咱们叫它 count 变化了，好保存一下。哎，过来，我现在要点击它了啊，大家注意观察一下，当 count 的变化时，这个地方呢，有没有打印出来，如果有的话，那证明是不是已经生效了呀？好，我们过来点击哦，大家注意观察 点。哎，这里变成一看变化了。点，变成二，这里变化了，那证明咱对于 com 的一个真听是不是就已经深造了呀？哎， ok， 好，那除了基本那个真心之外呢，他还给咱传过来两个参数，一个是变化之后的新值，我们叫他 new value。 一个呢是变化之前的老值，我们叫他 old value。 好，咱们尝试呢，把他俩呢都打印一下过来看哈，好，放过来。 好，我们重新一下，再次点击点走，你看这里，前面是星值一，后面是变化之前老值零看零变成了一，对吧，我们再点一次， 大家说，如果我再点一次的话，这个地方的性质和老师变成啥了呀？哎，聪明，是不是二和一啊？好，我们点一下纵听，哎，你看是不是二和一，哎， ok， 好了，那到此呢，咱用 watch 去征听单个响应 数据变化呢，他的写法，那么就写好了，只需要呢，你传过来一个要正听的数据，然后传过来一个毁掉是不就可以了？哎， ok， 那有些时候呢，咱的需求里边呀，除了征听单个数据源，有些时候呢，咱们还需要去征听多个啊，那接下来呢，咱们再看一下如何去征听多个数据的变化。好，我们回来。 哎，那什么是真听多个数据的变化呢？哎，也就是啊，同时真听多个数据的变化，不管哪个数据变化，咱都需要去执行这个回调。哎，举个例子啊，咱们看下面这个， 比如说呢，我们现在呢有两个数据，一个呢叫做 count， 一个叫做 name， 不管这两个响应数据哪个发生变化，我们都想之前一个毁掉。那这个时候怎么写呢？哎，我们看 下面哈，它的写法上呢，只有一处需要发生一些变化。看这儿我们真听的数据由之前的单一的一个 count 变成一个数组的格式， 然后在数组里边呢，把你想要粘贴的数据呢都给他放过来就可以了。这有一个顺序需要注意一下哈，前面的数组里边呢都是我们的新值，后面这个数组里边呢都是老值，他们的顺序呢且是对应的。你看这里哈， a new count， new name， old count， 然后是一个 old name， 是一个对应的关系。好了，那这个语法知道以后呢，咱们过来呢做一个测试，回到我们的代码区。好，回来 咱把上面这个呢先给他注掉。哎，这个模板呢，先注掉，咱把下面这个打开。哎，这是我们 听多个数据式的一个模板。好，把它打开。打开以后呢，咱们先过来看一下我们做了哪些准备工作啊？看这里准备了一个响应数据 count， 一个修改它的方法。准备了一个响应数据 name， 一个修改它的方法，哎，两个数据都有了， 有了以后呢，咱们在下面呀，用两个按钮分别绑定了两个点击事件，目的是为了修改我们这两个，哎，响应式的数据，看右边一个效果哈，看这里，点第一个按钮可以修改我们 com 点看把它改了，改成一了，对吧？ 那点第二按钮呢，可以修改我们的 name， 点看是变成 pc 了呀，哎， ok， 好了，知道我们做了哪些事以后呢，接下来咱们就用 watch 呀，监听一下我们的 count 和 name 的两个数据的变化，注意哦，是两个数据的变化， 好了，咱们过来写呗。 watch 第一个参数怎么变来着？哎，很好，是不是数组了？你要真听谁就把他俩呀都放过来，好， cont 和我们的 name 都放过来， 好，第二个参数呢，是不是一个回调呀？哎，咱们给他整个行吧，好看一些哈，那第二个参数呢，是一个回调函数， 再回到里边的参数是不是也变了呀？它变成了两个数组，好，一个是我们的， 放我们的新值了，对吧，哎，注意顺序哈， new count 和我们的 new name。 okay， 好，第二个参数是啥呀？老值呗，一个是我们的 old count， 一个是我们的 old name。 好了，那它的呢？都写好了？写好以后呢，咱们在这里呢打印一下呗。好， blog 一下， 这一次呢，咱们叫它 count， 哎，或者我们的 name 变化了，好，然后在后面呢，咱们把这两个数据呢都给它打印一下。一个是我们的新职，一个是我们的老职，好，把太太呢都扔过来。 ok， 好了，到这里呢，我们又写完了过来，那我们刷新一下哈，接下来我们要去修改我们的 cond 和我们的内幕， 我们不是说了吗，这样写好的一个效果呢，就是说这两个数据呢，不管哪个变，是不是都可以执行回调呀？来，我们过来呢，验证一下哈，我们先点一下我们的 com， 走，你走。哎，看，这里打印出来了，那注意观察 我们新值和老值的变化，我们这一次改的是 count， 你会发现一和这个零是不是变了呀？看这个地方，一是一个新值，零是一个老值，而后面这个呢， cp 呢，其实是我们这个 name， 他还是个 cp， 因为我没有没有动他们。 好，打完这个以后呢，我们再修改一下我们的 name， 看看呢，还会不会打印出来哈，点它走。哎，果然又打印了，这次呢，轮到我们的后面这个数据，你看，从我们之前的老值 cp 是变成现在的新值 pc 呀， 哎，那证明确实不管这两个数据呢，你修改哪一个都会执行我们的回调函数，对吧？哎，这是所谓的真听多个数据好了，那到此呢，真听多个数据的写法呢，咱们也验证过了，哎，其实呢，只需要把参数的位置 从之前的单一参数变成数组的一个多个参数是不就可以了，哎， ok， 好了，那到这里呢，我们就说完了我们关于 watch 的一个基本监听， 那它是不是还有两个额外的参数呀？叫啥来着诶，一个呢叫做 immediate， 是立即执行。一个呢是我们的叫 deep 深度，真听对不对？好，那接下来呢，咱们先过来看一下我们的立即执行。好，过来， 那立即执行呢？它的意思是说在征听器创建时，立即就触发我们的回调，对吧？哎，想认识数据变化的时候呢，继续执行回调，比如说呢，还是有我们这个需求，这一次呀，大家看这里，当用户呢什么都没有输入的时候，咱们以上来 先从后端先把这个数据呢给他拉过来。哎，这不就是一上来就先执行吗？你看在这个需求如果再增加这么一个小需求的话，他就需要用到我们的 emitter 参数了。好，那接下来看看呢，我们的 emitter 该如何来写啊？ 它的语法呢，非常简单，我们只需要呢在它的最后再补充一个参数，大家注意哦，前面两个参数保持不变，最后呢再补充一个对向格式的参数，在这个参数里边呢，我们增加一个选项叫做 immediate， 开启为处就可以啦。 哎，真的是这样吗？我们过来呢测试一下哈。好，回到我们的代数区，咱们呀再把我们上面这个呢给他注掉。好，先把它呢注掉好，合起来 把咱们第三块模板呢再给它打开。好，还是先过来看一下我们做哪些事啊？大家看这里，我们有小型数据，是个 count， 下面呢有修改它的一个方法啊，你看 点击还是那个 g u c 案例，我们呢通过它呢演示一下我们的立即执行好了，那咱们在下面呢执行一下我们的 watch 函数调它呗。 好，第一个参数是不变呀，依旧是我们的显示数据 count， 第二参数也不变，依旧是我们的数据变化时要直行的回掉 count 变化了， 这时候是不是需要增加第三个参数了，格式是什么样格式哎，对了，是不是一个对象呀？好，加个逗号。后面呢，加一个对象哦， 注意设置三个参数哦，别写错，尤其这个嵌套结构哈，不要写错在里边呢，我们可以添加一个叫做隐秘第二特的选项处。好，大家注意啊，我要保存了，看这个地方的变化，我要保存喽， 走你。哎，大家看，这里，一上来是不是先执行了一次呀？当我们点击时，我们再看哈点，你看点击时候呢，又执行了一次， 好了， so easy， 对吧？好了，这是我们的 in media 的参数啊，它可以在我们 watch 在 第一次真听的时候啊，就先执行一次，就是把这个回掉函数先执行一次，等到数据变化时，他会再次执行，哎，这是他的一个执行逻辑。好了，那关于 deep 呢，我们下一小节再说啊。这一小节呢，我们就 先讲到这里，我们讲了 watch 的基本使用，哎，它既支持单一参数，也支持多个参数。右脚了一下，我们的 in mediat 额外开启这个选项，它可以做到立刻执行，对不对？哎， ok。
00:39查看AI文稿AI文稿vivo 三里的 script 三种写法你都知道吗？大家都熟知的 vivo 三里面新增了一种叫做组合式 api 的东西，英文名呢叫做 compassionapi。 所以 vivo 三呢 script 现在支持三种写法，第一种呢，最基本的 vivo 二写法。第二种呢， ctr 函数这种方式。第三种呢，在 script 标签里面放入 ctr 这个属性， 可以看出来，无论是代码行数还是代码的精简度，第三种方法的方式都是最简单的形式。如果你对 vivo 很熟悉，那我推荐你用第三种。如果你还是前端新人，那我推荐你用第一种写法。第一种写法的学习负担小，先学第一种方式，掌握最基本的 vivo 用法后，再掌握 vivo 三里的其他内容。还想学什么，可以评论区留言告诉我哟！
265IT老司机李游
08:44查看AI文稿AI文稿咱们之前写 vivo 的程序呢，是这样的一个什么功能呢？点击这个 hello word 下面那个按钮，然后他变成 hello vivo， 对吧？啊？那这个呢，就是用的一个是选项 api， 选项 api 又叫 offipip i， 他是怎么写的呢？就是把这一个一个属性啊，比如对的属性啊，麦克的属性啊， 传给到这个组件里，这呢就是呃 opps api 的一个语法啊，那这个大家很熟悉，对吧？如果说我有数据的话，我都写到这个里，如果说我有方法的话，我都写到 max 的里，那如果有计算属性呢？咱就写到 ctrl t 的里面，对吧？然后 生命周期函数呢？啊，就是比如说有这个 cvt 的啊，有这个 monty 的，对吧？他是这么写的啊，作为一个个选项，把这个呃内容呢传给这个组件的一个对象里面，他是 一个这个思路，对吧？这就是 office epi， 而今天咱们要讲的什么呢？就是 ctrl giceapicamgapicapi 是组合 epa， 也就是说把所有的这些功能， 所有的一些功能写到哪呢？写到一个赛他 app 方法里面啊。那如何在赛他 app 里面去定义这个呃数据呢？咱现在就开始写了啊，好，那咱接受啊， 啊？赛他 api 啊，咱现在是不绑定那个抬头，对吧？绑定那个抬头，我现在想让那个抬头有有数据，咱们看一下现在是没有数据的，对吧？然后 我把这个塞他，我在塞他安排里面写一个数据啊，比如说就叫 like 等于什么呢？等于 nice 开头等于什么呢？等于 helloword， 然后我蕊称蕊称一个什么呢？ 蕊衬这个抬头啊，那我蕊衬出来这个抬头就其实就可以当做数据绑在这了啊，那我们看一下现在的效果啊， 哎，好了， word 出来了对吧？啊，那这个就是赛他吧里面的一个写法，可以用蕊称暴露出来一些数据啊，那有些小伙伴说这个蕊赛他是不是像对他一样，其实不是，不只是数据啊，函数也是从这里暴露出来的或者方法啊。那怎么写呢？比如说我们现在还是写一个按钮 还是洗干净 这个按钮呢？在控制台在在这个额乐的弹出框输出 helloword。 啊，那这个叫按钮，然后咱们写一个试键可立刻 等于啊叫什么呢？叫 c 啊。哈喽， c。 那这个 c 怎么定义啊？在 赛他吧里面我们直接定义一个函数就行了，大家看翻个身定一个函数叫什么呢？叫 c。 嗨，然后这个函数干什么呢？直接搁这他输出 哈喽啊哈喽， vivo 这回事啊。然后我把这个蕊衬再看啊，蕊衬后面我把这个 c 亥给他暴露出来， 也就是说赛他不得反为直 reten 我暴露什么模板里面就能用什么。他是一个这个思路啊。所以说我我暴露一个 c 害，然后咱看啊这里是不是 c 害啊，然后看能不能输出 hello vivo， 对吧？点击输出 hello vivo， 这是没问题的对吧？那这个就是，呃 ctrl j 是哪一篇的一个基本写法啊？然后咱们现在再进一步来写啊，有一个问题就会出现了。什么问题呢？就比如说我现在给他改变 抬头啊，改变抬头，比如说我现在把抬头的纸变了，咱能改变谁呢？改变这个抬头看看能不能改变啊，保存看一下效果。点击发现没变啊，没变，为什么没变呢？这就要说到一个响应式的一个概念了。 响应式的概念？什么是响应式呢？就是说如果说这个数据抬头是一个响应式的啊，那我改变抬头，改变抬头， 那 helloword， 呃，把这个 hello you 复制给这个胎头的话，他就会变，但是呢，这个胎头他只是一个普通的变量啊，大家看好啊，只是一个普通的变量， 他不是一个响应式的变量。所以说我现在改变那个抬头的话，他是不能直接反映到模板上的，所以说我点这个按钮，他是不会变成 hello vo 的。那 如何把这一个胎头啊变成一个响应式的变量呢？那就需要引入六的一个六里面的一个方法了。引入六六里面的方法，我把这个给他删掉。 引入又的一个方法叫什么呢？叫 r e f 啊，从哪引呢？刚才说啊，从又这引，对吧？啊？也就说从又里面，从又这个框架里面结构出来一个 r e f 啊，当然他提供了很多东西啊，咱现在就拿一个 r e f 就行了啊。拿出一个 r e f 之后呢， 我用这个 r e f 把这个 hellowor 的这个字符串给他变成一个响应式变亮，响应式变亮， 那也就说这个胎头他不再是一个普通的字母串了，这个胎头变成什么呢？他变成了一个响应式的变量，那响应式的变量的话，他就会有一个这个叫 歪溜的属性啊，那如果我们想改变这个抬头的话，我只需要改变抬头点歪溜就行了，比如说抬头点歪溜等于什么呢？等于 hello v 五啊，然后我们还是抱了抬头 啊，还是抱着抬头，然后把这个抬头放在这个 h 一里面，这都不变啊？这都不变。有时候我们修改这个响时变量的时候，改他不外流，其他的绑定模板的语法呢，还是不变的好。那我们现在写完之后看一下效果啊，点击 hellobuok， 搞定了，这个就是 响应是变量的一个概念，咱从这个六里面还能结构出来一个啊，叫 rex 的一个方法。那 r e f， 咱说了是 可以把这个字符串啊变成想象式的变量，那 red t u 呢？他也是可以将一个呃直变成一个想象式的，一个直的啊，可以将对象变成一个想象式的对象啊。比如说咱现在改一下这个例子啊，这抬头不再是一个字符串了，抬头是一个什么了呢？变成了一个 对象啊，比如叫十九等等，一个普通的对象，这个普通对象有个内蒙，内蒙叫小明。还有一个这个 a 值等于两岁， 这个这块这个是把引号给他去掉啊，内幕等于小明 a 值等于两岁。然后我们现在要改变这个啊，我们先把这个石榴针他给他绑定到页面上啊，绑定到这个，呃，这个石榴针的点 内蒙，咱们看一下现在的效果啊，哎，十九点他点内蒙，然后咱把这个先给他注视一下 f 十二，看一下是不是报错了， chat 到底办的啊？ ch， 小明，好，有了啊，然后这个页面大家看好现在这中间，对吧？我，我把样式给他去掉，让他在左侧显示， 然后是 css 把这个样式给他删掉，保存好。他在左侧显示了啊，然后我现在想干什么呢？点击这个按钮，点击这个按钮，现在是报错了啊， 点击按钮，把这个小明的名字给他变了啊，那咱们现在这么写啊，直接把这个小明留灯，他点内，给他变成什么呢？变成小红。哎，小，小明的名字变了，变成小红了。那咱看一下现在效果啊， 刷新一下啊，点击没有反应，对吧？为什么没有反应呢？因为小明他不是一个响应式的对象啊。那如果我将一个对象变成响应式的对象呢？我就可以用这个 rextyou 方法了，咱们这么写啊， readty， 然后括号 把这个小明给他扩起来。哎，看一下啊，换个行，看的清楚一点。 revit you， 把这个小明扩起来，然后我们还是把这 小明的内部属性给他变了。这回呢，咱看一下啊，点击变成小红了，对吧？啊，所以说不管是这个 呃自助串也好啊，还是对象也好啊，我们只有把它变成一个响应式的变量的时候，或者响应式的对象的时候，他呢才能被呃绑定模板的时候可以随意的变更，通过变更数据的方式实现模板页面的内容变更。他是一个这个思路啊。
274晓舟
16:05查看AI文稿AI文稿啊，咱写个水果列表吧，就是，呃，用表单实现添加水果列表啊，然后通过计入器去添加和删除，然后最下面再计算一个总价啊，实现一个这个功能。 好，那咱现在写吧，写吧，开干开干，走起开干，哈哈。嗯， 这回用组合一篇写了。啊啊，那咱先，我我一般写主页的时候就是如果说给大家演示的话，咱咱其实还是 先输出一下会好一些，省的写一半写一半了发现，哎，开始就写错了啊，就是 水果列表， 水果列表 不用写引号啊，不用写这个查字表，大师啊，水果列表，然后咱们 app 里面的把这个引进来啊，这个是俘虏他，累死他。 哎，水果这边有了。好，那咱现在开始开始啊，开整 没用的，关一关水果列表，那咱之按照之前的套路的话，首先是，呃，需要写一个表单，对吧？表单一个放这个放牧里面应该有一个音铺， 报名应该有一个音铺的，然后上面这个音铺的是名字，下面这个音铺的显示价 啊，然后我这样写的话就多写一点，累不？ 这个是名称，然后是一个银铺子， 下面的是一个 价格，然后是一个音铺的，然后咱再写一个八层，用来做添加啊，然后下面是一个列表， 又要大于 l i 列表的话，那就是咱应该写成这 这样的啊，名称啊，比如说是香蕉啊，然后 单价，单价，比如说是零点五，当然后期这个数据是咱自己输的对吧？啊，单价是零点五，然后数量，数量是一个计数器啊，那这里应该有一个八层 八天，然后第一个是减号，然后再写个加号，然后咱再写一个，呃， spa 子弹里面放一个零，初始是零啊，然后比如说这里香蕉苹果鸭梨多写两个啊，苹果鸭梨页面是一个这样这样的页面，对吧？一个水果 这表，然后我写名称和价格，点击添加的时候。呃，点击添加之后呢？怎么这么看吧，点击添加之后呢？点击计数器会增加数量啊，然后下面还应该有一个计算总价，对吧？计算总价在这了， h 二 h 二 这个是总价，假如说是一百元啊，咱要实现一个这个功能， 想实验这功能的话，之前咱们是用组合一篇写过了，用那个选项一篇写过了，对吧？今天呢，咱用组合一篇给他写一下啊。然后首先是实现这个数据的双向绑定，数据双向绑定怎么写呢？ 那就是表单，然后这块是微杠魔兜，对吧？模板还是这么写，没有区别啊，比如咱写个内幕，然后下面 价格呢，也是微杠毛豆等于一个， 等一个 pose， 在下面银铺子里面 v 杠毛兜等于一个 prus， 然后这个应该是一个数值，对吧？数值呢？咱就加一个修饰服南北啊。然后点击添加的时候呢，咱们写一个事件，事件写在放里面，艾特颗粒啊，艾特萨邦密特，萨霸密特，去掉默认行为点 陪伴，等于一个事件啊，然后是添加音色，老师今天不在状态啊，是有点有点小疲劳。嗯， 好，那那这个数据添加写完了之后，然后咱接下来呢，就是点击添加的时候，把这个数据应该添加到列表上，但是咱们先简单一点写啊，先在控制台输出一下啊。好，那写写这个赛他啊，赛他。 首先定一个这个，呃，内内幕是为了绑定，对吧？绑定水果名称的啊，那就是 r e f 空自助串，那咱们得引入这个阿 e f， 对吧？ wel f love you， 然后 cos 这个 pros 价格呢？价格咱写个零，价格写个零啊，然后 刚才咱是不是已经绑定好了这了啊？内幕和 prs 绑定，绑定完之后呢，我们需点添加的时候呢，需要创建一个响应式的一个数据啊， 那就是 cos 一个，点击添加的时候翻个身音色添加，然后 cos 一个这个 sout。 等于啊，等于一个响应式的数据呢，就是 red， 咱得先引进来啊 red， 然后把这个数据给他，变成一个响应式的数据啊，把谁呢？一个水果，对吧？内幕的值应 等于这个内幕点外流啊，然后 pros 的值呢？等于这个 plus 点外流，就是上面双向数据绑定的这两个值啊，拿到这个两个值之后，然后我们现在控制台给他输出出来，可搜点 love you 输出这个服务的，看看是不是。呃，咱们想要的这个数据啊，但是想要试的数据，咱直接输出的话可能会 不是那么好看哎，咱，咱直接加到列表里吧，直接加到列表里吧啊，点击的时候直接加到列表里啊，那咱现在写个列表啊啊， cos 的历史的等于一个 vip 五一个数组，对吧？一个空的数组， 然后咱呢直接绿色 利是点 pose 啊，添加谁呢？添加这个输入啊，然后咱看一下现在的效果啊，把这个列表给他绑上，绑定上 l i 呢，是 v 杠 fo 等于 icm 音符音 mist mist， 然后这个香蕉呢就变成了 im 点内啊，单价呢就变成了 icm 点 pros 啊数量呢，这个就是咱应该给个促使数量的吧。那促使数量的话咱给一个 icm 点 come on 看看我还没定义呢对吧。所以说要在这看看这只是初只是给个一啊， 然后咱看一下现在的效果啊啊比如说是一二三，然后是两块钱点添加啊，看看是不是哪写错了啊啊就说哎呀这不是到绑定吗？那是的是的， 但是右三里面的话他可以作为一个方法来将变量变成详细的变量。 内蒙啊咱没暴露这个没写蕊翠是吧蕊翠啊，这块应该写个内蒙，然后是普爱斯然后是利斯特啊然后是 银色的啊这回就好了刷新然后这个是呃 三啊这个是苹苹果苹果啊，一块钱添加加起来了对吧啊然后香蕉啊然后是两块钱添加啊，那水果里边添加没问题了啊水果里边添加没问题了啊。那这里我改一下，大家看啊。 我刚才是不是写这个内幕等于内幕点歪瘤， plus 等于 perfi 点歪瘤对吧。啊那如果说不写歪瘤我直接内幕让这个内幕就是这个内幕啊。如果说让这个 plus 就是这个 pls 那这个行不行啊我这么写行不行啊那值没变对吧，还是绑定的双数绑定那个值呢啊如果这么写的话就会有一些小问题啊，比如说这块写苹果，然后就是一块钱添加啊， 比如说多添几个苹果然后如果这个苹果改了，苹果改成香蕉了，大家看是不是都变成香蕉了。所以说这块 的话咱们应该呃不应该直接复制给这个响应式的这个内幕，而是应该拿到这个呃响应式内幕的外流 啊，这样的话他就是一个呃原始类型织布串，而你写内幕的话就是一个引用类型，是一个对象，所以说引用类型的话一个变他都会变啊，因为他指向的是一个对象，所以所以是 应该这么写啊，应该这么写好，那这个写完了之后，这个写完了之后呢？咱现在要写什么呢？刚才添加没问题了添加没问题，我现在要写计数器了，对吧？啊？写计数器的话 也在这写，那就简单了，翻个身啊，银色的，银色的，比如说我这里咱让那个技术技术器传一个这个，哎。啊，然后不是银色的，是银可瑞斯啊， 银科瑞斯啊，添加直接传个 i i， 就是我要修改的数据的锁引啊，然后呢？就是 mist i 点 cat 加加，对吧？ 然后迪克瑞斯减小减少呢？也是全该，然后这块是减减啊，然后我这块得暴露出去，对吧？英克瑞斯和迪克瑞斯， 然后这个计数器呢，咱需要绑定时间了，可立克等于英科瑞斯，然后上面这个是减至低克瑞斯，然后需要传一个直传 那个什么呢？传一个这个利斯特的英奈克斯， 把这个阴 nice 作为一个缩影给他传出来。阴 nice， 然后咱看一下是不是就可以改变这个 i 的这个数据了，是吧？啊？那咱现在写个香蕉 两块钱啊，写个这个苹果啊，三块钱，然后点添加点添加点减少点减少，没问题，对吧？啊？那现在有一个问题，就是说如果说减少少到零的时候啊，比如说一我再点一下 不应该是零，直接给我删掉了啊，不应该零，所以说这块我可以这么写啊，减少的时候我可以写，如果说 剪完之后如果说这个直抗他 他的值等于零了啊，那我再写一个，并且并且我写个 ctrl 是否删除数据，然后 提示一个 ctrl 之后我把这个数据给他删掉啊，那怎么删呢？用这个 i 删啊，就是 mist， 他点 splas 是可以用来删除数据，对吧？删除第删。删除哪个数据呢？哎啊然后删除几个呢？删除一个啊，这样的话咱们再看一下效果啊。 苹果两块钱添加，香蕉三块钱添加，然后加都没问题，对吧？然后减，再看香蕉减到二的时候一的时候再减。哎，报错了， 肯放 s 拿着底放呢。肯放是哎呀不是啊哎啊保存 啊。哈哈。宁宁娘说啊。对宁宁娘说我写错了香蕉 然后苹果三块然后加都没问题，然后减到香蕉再减到一的时候再点减，哎。弹出来是否弹出数据点是就给删掉了啊？减减减减减，是否删除数据是删掉了啊。好 技术题也写完了啊。最后写一个什么呢？最后写计算总价，对吧？计算总价的话那咱还得写一个这个偷偷 pros， 偷偷 pros 咱就需要用刚才说的用那个计算属性来实现了，对吧？所以说我需要结构出了一个计算属性啊，挺标题的。 那这个 ctrl t 的等于什么呢？ ctrl t 的是谁呢？就是啊 cos 的一个偷偷 pros 等于 ctrl t 的计算属性啊，然后 我需要把这个属性，我需要把这个值给他计算出来。那怎么计算呢？怎么计算呢？ 首先的话我应该定一个变量叫 icum 等于零，初值是给于零。那我是不是应该计算那个利是他里面所有的元素，所有的元素里面的数量和呃单价的成绩啊，对吧？ 所以我就可以便利他，便利这个利索点封一尺括号啊。然后微是这个元素， 微这个元素，然后 sum 求和加等于等于谁呢？等于这个微点，呃 数量是亢的，对吧？然后乘以这个 v 点，这个单加是 prox， 对吧？啊，那这样的话， sum 呢？就是咱要的一个所有数据的乘呃，累加的一个总价的 总加，计算出来之后，然后咱们 rechat s um， 这样的话头头 pro 就计算出来了。计算出来之后，然后我们给他暴露出来。头头 prs 保存 好，那我现在接着写啊，香蕉 两块钱， 苹果三块钱，然后添加加加加，总价也算出来了啊，总价也算出来了，然后减少，减少，减少，减到一删掉啊，这个就是用组合 app 实现的一个水果列表。
189晓舟
01:29查看AI文稿AI文稿我们在使用 vivo 三定义响应式数据的时候，要使用这个 rife， 然后在用这个数据的时候呢，要写上点 w， 这个方式比较麻烦，我教给大家一种简单的方法，我们反问 vivo 三的官方文档，然后拖到最下边，这块有个响应式语法堂，先点击显示启用， 然后呢把这个包用 npm 或者压下来装一下，装完之后的话呢，在你的 witch 文件当中进行配置，那我在这里边已经配置完了，如果你使用的是 ts 的话呢，那需要对 ts 进行配置，我们靠配这段代码放到我们的生命文件当中。好，我把这段代码已经复制过来了， 现在我们就可以正常使用了。我们这时候呢，在这块就可以给他换成倒轮，具体的详细使用大家可以看文档，那我们就可以不用使用这个歪流了，但是你要注意这块的话呢，如果你有负值操作，那这个变量你要改，把它改成 let， 比如说这块你要负值，是吧？一定要这么写。那么如果对， 可以看一下我录制的 gs 的系统课程讲的很全面，现在我们在使用 propos 的时候也会变得非常方便，我们可以直接设置默认值，而不需要使用 which default 了。呃，当然我们也可以对这个变量进行改名，是吧？给它改成 a b c， 你可以进行别名的定义，不过呢，这是试验特性。说一下，在这块儿会有提示，大概意思就是说这个功能是试验阶段， 以后有可能会进行更改，所以建议你明确的指定你的版本号。那大家看这个项目呢，就是晚上咱直播讲的雷若加 vivo 的系统平台项目里边的话呢，我就使用了这个最新的特性，写起来的话呢，确实是省事。
492后盾人
05:44查看AI文稿AI文稿五又三有哪些新特性？这是目前使用五又开发前端框架的同学们面试及工作中常见的一个问题，那今天我们就来做一个全面的分析和总结。第一个五又三是二零幺九年底发布的，名字叫 one piece， 就是海贼王的意思， 刚刚出来的时候我们可以看到啊，非常多的相关五又的三的一个插件啊，他的一个 logo 就是海贼王的一个图标标志， ok， 这是我们对五又三的一个简单的一个介绍，那么我们下面来说一下五又三的一个新特性啊，那我们在说的过程中可能会结合着比较多的五又第二的一个特点来做一个讲解。 第一个就是五优三新的响音式数据的一个定义，那么我们都知道五优二里面哈，我们的一个响音式数据是使用 data 来定义的，在五优三里面哈，我们使用的是 ref 和 renee t 来定义我们的一个响音式数据，所以说这个的话变化是最大最大的，我相信开发过五一三 都使用过 ref 和 reno t 五，并且哈这里还有一个点，就是他们的一个响音式的一个原理也发生了巨大的变化。在 v 二里面哈，我们使用的是 object 点 d four property， 那这一个方法是我们 v 二里面响音式原理的核心方法，但是它是基于我们 es 五的 一个 api， 那么五一三啊，它使用的是 procast， 这是一个 g e s 六的一个 api， 正是因为这个原因哈，所以说我们五一三哈完全不支持目前的 ie 浏览器，所以说这个点我们一定要记住，这是我们第一个最大最大的一个特性， 那第二个特性就是五六三重启了虚拟动物的实践和地府算法的一个优化。 ok， 那具体有哪些处理呢？这里我们简单过一下，如果要深入了解，同学可以下来认真的去研究一下。第一个我们是帕奇福奈个动态企业店的一个标记，那么在五一二里面哈，虚拟动模式进行全亮的比较，性能明显会差一点。那在五一三里面哈， 我们虚拟动物它通过 party flag 进行动态几点的标记，所以说在比较的时候只会比较带有标记的几个点，所以说这样子大幅度的提升了我们的一个虚拟动物比对的一个性能。那第二个点啊，我们这里说一下，就是事件划船， 在 v u 三里面哈，我们看过元旦宝的同学都知道，他把很多事件提升到了顶部去做一个全局的一个定义， 并且定义成了一个数组的方式，那使用试卷的时候，我们不需要再做一个重复的定义了，就说这些哈，都是无忧山蓄度磨成，做了一个巨大的更新和油画，面试的时候我们一定要把这些点给说出来，那还有就是吹虾肯，无忧山引入了吹虾肯的一个方式啊，那这个方式哈，也是基于我们 es 六的动态模块化的方式来做了一个处理啊，这个我们面试的时候尽量也把它给说出去。 ok， 那这是第二个大点哈，第三个点就是无忧三底层是用 ts 重构的，那这个的好处我们就不用 多分析了，至少有一点，那 v v 三哈对于兼容我们的一个 t s 是更加友好的，这也是我们 v 二的一个痛点，也是大大的做了一个改幅。那接下来我们说一下 v v 三 新的一个变化哈，就是组合式 api， 那这里的话英文就是 comprese api， 那我们以前哈叫哦 p 显 pi， 就是配置项的 api， 那组合式的 api 和配置项的 api 也是有非常大的一个我们的一个业务逻辑写法，或者说组合上面的一个区别。说这是一个点哈，这是一个点，那后面的话 啊， v v 三新增的一个配置就是我们的一个 star， 那这里是 v v 三哈唯一新增的一个配置，那就是我们 star pro 的一个配置项。 当然在 vi 三点二之后啊，这个 up 有一个新的简便式的一个写法，这个后续啊，呃，使用 vi 三的同学可以下来尝试一下。 ok， 在下面我们说一下 vi 三的一个新特性啊，那后面我们说的可能就是一些细节上面的东西了，原理上面的东西我们要知道，但是细节上面的东西我们也应该清楚，对吧？这样子真 对于面试官我们回答问题的时候他才能感觉到，哎，我们是认真哈去使用过 v v 三，并且从细节是了解 v v 三的，对吧？ ok， 第一个就是计算属性， ctrl t 的新的 计算属性和我们新的增添器瓦器啊，当然这里面使用的方式，机器基础的一些概念可能是不同是一样的，但什么不一样的哈，就是他的使用方式可能是不一样的。 ok， 这是我们的使用层面上的一些变化。还有就是我们微商大量的引进了我们的一个 hocuse 语法啊，当然这个地方哈， hocuse 是我们 record 呃，早就 版本发不出来了。那无忧三的话哈，也是借鉴了一些 hooker 的一些使用方式哈，当然 hooker 我们在业务的时候也会经常使用，所以说啊，虽然说 miss 日哈他还在，但是 hooker 完全是可以替代他的，并且更友好的处理我们的一个业务。 那接下来就是我们五月三的生命周期的标哈，大家注意哈，五月三哈生命周期，它同样有五月二的生命周期的大部， 但是少了一个就是可瑞 t 的可瑞特部分的一个生命周期，那这是一个比较大的一个区别。那还有 v v 三的一个啊， v 杠 e f 和 v 杠 four 的一个区别。我们都知道 v 二里面哈， v 杠 four 和 v 杠 f 是不能一起使用的，因为他们的优先解决问题。 微微三里面啊，完全改变了这个状态啊，就是微微三里面微钢衣服的油箱级是高于微钢货的，所以说我们循环的时候啊，完全可以把它们混在一起来使用，这也是大幅度的提升了我们的一个性能。 ok， 在下面我们说一些比较细节的东西啊。第一个就是微钢 model 的本质变化， 我们都知道哈， v 二里面有一个 model， 它其实是通过我们的一个 value 加 at and put 事件来组成的，但是在 v u 三里面哈，它使用的是 model 加上我们 update model 来实现的，所以说这也是一个巨大的一个变化。 并且 v u 二哈有个非常重要的一个点儿， sunk 修饰符在 v u 三里面已经移除了，由什么哈？由 we got model 来替代，其实本质上哈，那 wechat model 就是我们以前使用的点 sig 就是，对吧？非常的类似哈，当然还有其他的组件和 api 的一些变化，这里我们就不细讲了，比如说，呃，有些非常细节，非常细节的东西哈。呃，面试官问到一定要说出来 啊，比如说我们五幺二里面哈，有一个是什么哈？五幺二里面，我们每 template 你下面哈里面写我们的这个节点的时候必须有一个跟节点，但是在 v u 三里面不需要，你可以有多个跟节点，是吧？这也是一个细节性的一个非常大的一个变化。那这些细节上的变化我们都在面试里面哈，可以把它说出去，让面试官更加 清楚地认为我们，哎，我们是更加深入去写个实际情况，去写个我们这个 b u 三框架的什么给我们面试带来一个加分项啊。 ok， 谢谢大家。
11meta世界
03:28查看AI文稿AI文稿老铁们，今天咱们来讲一个小的知识点，咱们在面试过程中经常被面试官问到， v o 二和 v o 三的差别是什么？哎，是不是经常被问到，哎，咱们通常的回答是，哎，底层原理变了，吹 shaking， 咱们的加载速度更快啊，然后以及我们的什么组合摄影篇， 那么组合使 etf 在等待最大的好处是什么？其实就是我们什么可以封装资金户口，我们可以抽离咱们的逻辑，哎，同学们来看一下， 我们线上这里摆了六个发送验证码的一个按钮，我们来分别试一下啊，你看，哎，一个、两个、三个、四个、五个、六个，你会发现每个发送验证码的逻辑， 哎，他是独立的，一个是十秒倒计时，另外一个是二十、三十，四十、五十六十，对吧？那同学可能会说，老师，你这个东西没啥差别，他不就是一个按钮吗？我们封装一个 组建好呀，没错，是否能组建，但是这里呢？我们用组合式 apa 把它抽离出来，哎，咱们来读一下咱们的原码啊，好，切到咱们的 vs cod 来看一下。哎，同学们来看到我的页面，虽然只有这么几个按钮，但是他实现了什么？每个按钮之间发送验证码的逻辑 独立的，对吧？有一个叫开门八层的按钮啊，我有六个，那么我放十个，二十个，一百个都是没问题的，因为每个按钮呢，都是独立的，那么这个按钮里面其实我们就做了一个视图层和逻辑层的抽离，来看一下这个按钮是怎么封装的啊？开门八层找一下， 哎，同学们来看这个组件，这个组件其实我们用了一个非常简单的 e l 八的按钮，这里面呢，我们用了事件 disable， 还有一个显示标题，哎，你会发现他只是显示了数据，而这个逻辑，我这里边有逻辑吗？明白，注意， 我这里没有逻辑，我这里只有一个叫 use timer left， 这就是我们常说的叫自定义护客，我把倒计时的案例倒计时的逻辑抽离成了一个自定义护客，在这个 use timer left 里边去实现了。 啊，这个里面呢还可以接收什么？接收传过来的 time com， 比如说我是倒计时十秒啊，二十秒啊，三十秒都可以，那么这个 use time lap 就是我们的逻辑，逻辑和代码层的完全抽离，代码层只负责去展示。那我们再来看这个 use time lap， 他干了什么事啊？来看一下 我的 hooks， 来看一下这个代码，这个代码就是我们正常的什么呀，一个倒计时的逻辑，比如说我声明一个 reft 啊，声明一个我们的显示标题，然后做了一个开始倒计时的什么啊？一个逻辑函数啊，这 这里呢开始定，开始开启咱们的倒计时，然后呢判断一下当前是不等于零，如果零的话，我们停止倒计时，然后重新的把这个数字置为最初时值，如果你不传的话，我默认是六十秒倒计时， 最终呢，我们将这个响应式数据以及显示的文本以及最终是不是已经开启，把这个出 boss 返回去，这样的话在我页面中呢就能够显示正常的按钮，我放一百个按钮都是可以的，而且按钮按钮之间呢，逻辑都是抽离，按钮只负责展示逻辑，数据维护全在自定户口里面， 哎，你会发现是不是跟我们之前写项目完全不一样啊？ vo 二里面我们尝试把什么把逻辑视图样式全写到一起，而 vo 三呢， 是把它抽离开，试图只展示我的结构。而我资真正的逻辑呢，我用资金顾客把它抽离成我们一个一个个的函数，这样的话大家在开发过程中我就可以最大化的去复用咱们的逻辑，这就是咱们微灿和微二的一个最大的差距。
1289黑马老高聊技术
00:32查看AI文稿AI文稿二十七号 v o 三将替代 v o 二成为默认版本。不说我们还没有学会 v o 三的组合社 a p i 和赛卡吧，这种依法糖的曲贴法的，用 v o 二依然没问题，但是这个后段常见啊，他特别喜欢 v o 二。为什么 v 二面向对象这种思想呢？比较适合理解，一切例子搞定。但是 v o 三一来的话就会让你产生一种 错觉，组合是 api 和原来的面相对象，他俩交织的这种写法呢，就会让我们感觉不是那么耐。现在 vivo 三小七的上传版本，你也无需焦虑，技术都是相通的嘛。 vivo 三的话，我们通过文档，通过视频，通过一些小戴帽测试，可以帮我们慢慢的上手。
1200黑马老高聊技术
00:20查看AI文稿AI文稿vivo 三相较 vivo 二有很多颠覆性的变化。升级的时候呢，大家一定要注意。 全局的 api 而言，有两点全局的未有 api 被改变为使用一个应用实力，全局和内部的 api 已被重组为树状结构。
50北大陆神说前端
04:32查看AI文稿AI文稿今天我们来说一个就是提升我们微友开发效率，就是自动加载我们的 api， 我们呢先把咱们的项目给跑起来， 然后我们回到代码当中，那现在大家看到这个项目呢，就是我们晚上八点讲的这个 view 的脚手架，那我 我现在呢进入到我们这个页面当中，就是这个页面啊，那如果我要使用一个显示数据的时候，我们是不是得这么使用，是吧？比如说这块定用显示数据叫做 uzer， 然后 raff 一下， 好，那么我们定完这个数据之后，我们会看到这块是包错的，是吧？那我们在实际用的时候当然也会是包错的，比如说我就在这块用，我们回到页面当中，他呢是不会有什么效果的，在这块的话 会咱们报错。哎，那我们正常的使用应该怎么样呢？我们正常使用是不是要把这 rife 给引过来，是吧？ 我们这引过来之后的话呢，才可以正常的使用，这个时候的话呢，这个错误就消失了，看到了吧？然后我们回到热门当中，当我们刷新的时候，我们就能看到这个内容，那么我们要解决的自动加载 api， 就是说不需要这一行，让他自动来进行引入。 那有关于这个的文档，我已经把它放到后动人的文档库了，大家可以记住这个网址，我会不断的更新这个文档库，分享一些实用的技巧。 那么在这里边的话呢，我们需要安装这个插件，它解决的问题就是我们不需要赢 pot 了，直接来使用我们的 api， 那无论是我们的 vivo 的 api， vivo rot 的 api， 包括我们的一些 ui 库，比如说 说昂昂的迪赞，或者说 alibaby plus， 我们都可以使用它，我们先看 vivo 当中使用。首先呢你要把这插件给它安装上，那我已经安装过了，就直接配置就行了，在位的当中进行配置。好，我们这个时候呢回到我们的位当中， 现在我给你演示的项目是我们晚上讲解的这个搅手架，那这个搅手架呢？我已经把这个插架把这个功能模块给他拆分了，所以呢， 我们是我在这块实际配置的时候啊，去到我们 wait 里边，在这块有一个 auto input 在这块啊，那当然的话呢，如果你没有像我这样拆分，你就直接在 wait 的配置文件里边配置就行了。 那我们需要引过来个包，把这包引过来之后的话呢，把这一块给开启。好，我把这一块给放到这里边给开启。那这样引入 之后的话呢，我们主要看这一块，我们先不看，我们主要看这一块，这一块就表示我们要对 view 还有 viewrote 啊，让它实现制动的 api 导入。然后呢，我们可以指定一个生成的这个类型声明文件，如果你设置成为处的话呢，那它会在你的项目的根部录下生成， 那比如说我把这块给注掉，这个时候的话呢，我们再编一下。好，那现在我们回到我们的项目代码当中，我们这块就会多一个 out input， 看到了吗？那这是我们 ts 的类型生命文件。 呃，这个设置完之后啊，一般时候我们还是可以把这个类型生命文件单独放在一个文件夹当中，那如果单独放在文件夹当中的话呢，我们就开启这个选项，这个时候的话呢，我们再重跑一下。好，那我们重跑之后的话呢 呢，我就把它放到了 types 里边，看到了吗？就这文件，那我们根部录像呢，这个就不需要了，给他删除掉。 好，我们把它删掉。这个时候设置完之后啊，你还要注意，我们要在 ts 配文件当中来指定一下，包含这个类型生命文件在印科路的这块，那我在这里边的话呢，已经把 types 里边全部包含了，对吧？所以呢这个生命文件就会被自动加载， 这个时候我们再回到我们的主驾当中，还是回到刚才的 home 里边，那现在我们就不报错了，看到了吗？这个类型声明文件，这自动有了我们使用的 aps 吧，一些计算属性啊， raff， torafs 啊，我们就不用引 pot 了，直接这么使用就可以了。 这个时候我们回到页面当中，那我们可以再刷新一下，看一下那个内容是否正常出来，我们看到内容也正常出来了， 那这个视频我们就分享一下，我们使用 vivo 还有 vivo rotor 啊。呃，自动羽绒 api， 我下个视频里边再分享一下，我们使用 alaban plus， 以第三方的 ui 库，怎么样自动导入这个 api， 那么大家可以点一个关注，这样晚上我在直播的时候你就可以收到通知，感谢大家收看，再见。
290后盾人
00:20查看AI文稿AI文稿自己通知大厂为何如此看重 vivo 三？真的能碾压 rector 吗？像比较 vivo rvio， 三点零在这方面有明显的优势，尤其在上手难度上， vivo 近乎碾压式的优势。同学们想学习一下快速入门 vivo 三吗？评论区扣六来领取吧！
412黑马pink
01:53查看AI文稿AI文稿view 三有哪些新特性？ view 三是 view 这一次框架的最新版本，引入了许多新特性和改进。以下是 view 三的一些主要新特性。一、 composition api view 三引入了 composition api， 可以让开发者更加灵活的组织和重用组建代码。 composition api 可以使用更多的 javascript 特性，如函数变量等，并且让组建代码更加模块化和可测试。二、更快的渲染速度 u 三引入了 virtual dom 的重写， 通过优化 verse one down 的比较算法，提高了渲染速度，同时也减少了内存使用。三、更小的体积 u 三通过将代码进行拆分和优化，使得酷的体积比 u 二更小。 同时也提供了 three shaking 支持，可以让应用程序只加在需要的代码。四、 teleport q 三引入了 teleport， 可以将组件渲染到任何导美元素中，而不仅仅是副组件的模板中。 五、新的组件 a p i q 三引入了全新的组件 a p i， 包括 define， component、 age、 computer 等。 这些 apr 可以让组建定义更加简单直观，并且可以支持更多的编程风格。六、更好的 type script 支持 new 三对 type script 的支持更加完善，可以提供更好的类型检查和代码提示。 七、更好的调试工具 u 三引入了更好的调试工具，可以更方便的查看组件的状态和调试代码。 以上是 view 三的一些主要新特性，这些新特性都可以让开发者更加方便高效地开发 view 应用程序，并提升应用程序的性能和可维护性。
81前端sir
00:28查看AI文稿AI文稿问一个最经典的哈 vio 二和 vio 三的区别什么？响应是 proxy， 哦不，这个地方 protect 那东西你扯的话没人请，别人只会认为你是背的，你对这个项目理解不到位。首先别人问你 vio 二和 vio 三最大的区别是什么？ vio 三可以解决副用逻辑的问题，为什么？因为它有组合式 api， 性能提升其实都是次要的。 就说以后别人问你 vo 二 v 三的区别是什么。首先第一点，我觉得 vo 三它最大的特性是什么？可以去附用咱们逻辑，因为它可以封装自定义户口。
1235黑马老高聊技术
12:57查看AI文稿AI文稿哈喽，各位观众朋友大家好，今天我们来学习一下的第十章，认识卧尺真听器。那这个东西呢，它主要是用来监听我们这个响应式数据的一个变化，比如说使用 r， e， f 或者是 recto 所包裹起来的一个数据呢，才可以被我们这个卧尺所真听到。那么写一个例子， 咱们声明一个变量，就是这个 mac 纸，然后他是一个 r 也和对象，然后里边呢我们放一个小满。 ok， 然后我们把这个变量呢给他绑定一下这个 vgamodo， 那绑定完这个 vivo mode 之后呢，我们就可以侦听一下这个 mac 制的一个变化，那就使用这个卧尺， 那他第一个参数呢是这个 shots， 也就是正厅的数据源，就是我们这个 mac 纸，那给他传进去就好了。 ok， 那第二个参数呢是一个 cb， 也就是考拜客一个回到函数， 在这个回到函数里边呢，他会给我返回两个参数，就是六歪柳和这个奥的歪柳，也就是一个新纸和一个旧纸。好，我们来给他输出一下啊。 ok， 我们在页面上呢给他进行一下这个改变，那默认的话，我们是写的这个小满，然后我们把这个纸呢给他改变一下， 我加一个一。 ok， 大家可以看到此时这个心纸后面呢就变成了这个小满意，那旧纸的话还是这个小满，这个的话就是一个卧尺的一个基本用法，他就是用来监听我们这个纸的一个变化，当然他也可以正听这个多个元，这的话，我们来一个 mac 之二，那这样做， 把这个东西我们改成一个大满，给它区分一下，然后绑定到下面这个印铺子里边， ok， 那这个握尺呢，也需要给他改一下针，听多个数据源，这要使用这个数组，然后把这个 mac 之二呢给他跟到后面就可以了。那注意此时这个六 y 六和这个奥的 y 六呢，也会变成一个数组，那顺序呢？就是跟我们这个所对应的。那我们来看一下， 那比如说我先小满，后面加一个一，大家可以看到左边的话是这个心纸，右边的是这个旧纸，那小满呢？已经加上了这个一，然后大碗呢？我们加一个二 啊，还是新值啊？大门已经加上这个二了，然后这个是旧址， ok， 也是没有问题。所以说你想征听多个数据元的话，你就可以使用这种数组的一个方式，当然他也可以征听这个对象， 咱们把这个麦废纸给它改造一下，那里边放一个对象，然后层级呢，我们可以弄深一点，比如说 f 啊，没有加冒号，然后把再来一个内，我也小满， ok， 那这的话我们就不真听多个了。 那上面的绑定也需要改一下，就是 message 点 f o 点八点内这样子，然后我们再再来侦听一下这个 message 的一个变化， ok， 我会给他加一个一二三，才发现并没有任何卵用啊，是因为如果要监听这种深层次的话，你需要给他开启第三个属性，就是一个 ox， 是一个配置像，然后里边有个地铺，这个的话，就代表这个深度监听， 那开启深度监听，此时呢就可以监听到这个而野夫里边所嵌套的这个对象的一个变化。那我们再来看一下小满后， 我再加一个，一发现他已经可以监听到了，但是呢，会有一个问题，你会发现这个新值跟这个旧值是一样的， 大家可以看到这个小满意心值跟旧值是一样的，需要注意一下，如果是这种引用类型，他所返回的心值跟旧值是一样的，那么一会抛开圆码的时候呢，再来看一下这个问题，但是他监听是没有问题啊，他都可以真听到。 ok， 那这个的话就是针听这个对象，那如果我们把它换成这个 reactive 呢？那 reactive 的话，我们先不开启这个地图来试一下， 哎哎，发现也是可以真听到的，所以说 react to 你开启地府跟这个不开启地府呢，他是一样的，因为他在园马里边呢，已经帮你的去这个做了这个隐性的一个开启了，就是这个地府，所以说 reactive 的话，就是不需要开启这个地步了。然后比如说我这再加一个属性，我再加一个 a 值，等于这个十八，然后我把这个麦 c 这呢再给他变一下，就是点 fo， 点八点 a 值 啊，我就监听这个内幕和这个 a 指分别监听这两个属性啊，那这个 mac 证就不要了。 ok， 那现在只要任意一个指呢，发生一个变化，他就会触发这个窝车这个函数。哎，那比如说我只想征听这个内幕的，我不想征听这个 a 指，那也是可以的，那你就通过这个 mac 指点 f o， 点八 点裂，呃，当然这是不行的，因为你如果直接点内幕的时候呢，他是一个这个自助创类型，不是我们这个 process 所代理的一个对象，所以说你如果要真听这个单音属性，那微微推荐的话是使用这个 盖上函数，就是你可以创建一个回到函数去给他返回这个你所要真听的一个属性啊，所以说需要注意一下，就是要监听这个属性的单一指，你需要把它变成一个函数，然后我们再来看一下， 比如说我现在改这个 a 制，他就不会所发生这个变化了，改内容呢是没有问题的， ok， 所以说这大家需要注意一下，那以上的话就是这个卧尺的一个所有用法，然后再来看一下它里面的一些属性，那这个地谱的话就刚才就已经介绍过了，然后它里面还有一个 amazes， 这个的话是接收一个布尔织，默认的话是这个 boss， 那你如果传处的话，他会把这个卧蚕兽里边这个拷贝可能立马先走一次，默认的话他是不会走的。我们可以先来看一下，对，默认的话是没有任何输出，然后我们把这个东西给他开启一下来，发现他已经提前了，帮我去 走了一次，由于没有救治，他填充了一个案例，犯者， ok， 这是 mate 的一个作用，帮我们去立即执行一次， ok， 还有另一个参数，就这个 flash， flash 的话是有三个字，呃，默认的话是这个 pr 一， pr 一的话他就是这个，呃，组件，那更新之前 啊，钓鱼，然后还有这个 sink sink， 是这个土木之心， 呃，执行，然后还有是这个 pose pose 的话是这个组建更新之后啊，所以帮你去做一个执行的，这个的话可以控制我们这个卧室的一个执行的一个顺序，那你是要在组建更新之前调用呢？还是说要同步执行，还是说组建更新之后去执行呢？当然这个 东西的话在我们这个卧池里面可能用的不是很多，在我们下一张卧池以 fox 的话可能会用到， ok， 所以说大家需要记一下就好了。然后我们再来看一下这个圆码， 可以那么继续来讲一下这个卧尺的一个圆码，他是在这个 rotamco 下面这个 apa 卧尺的 ts 里边，他其实核心的函数呢，他又掉了这个度卧尺， 对，然后做了一些判断啊，其实也是掉这个东西，然后把这个哨子，也就是我们这个数据源，还有这个拷贝的回到函数，以及这个 office 配置项又传给了这个都卧室， 那都我是做的第一件事呢，它就是格式化，我们这个 shots， 因为我们可以传多种类型，我们可以传阿野和对象，可以传 reactive， 对象可以传一个数组，可以增听多个元吗？还可以传这个函数，就是增听单一属性，一共支持这四种模式。然后他就 把这个东西做了一个格式化，都付给了一个该特函数，在这做了一个初始化，然后他又去这个判断，那如果是儿以后对象呢？我就把这个歪柳取出来付给了这个该特函数，那如果是 relative 呢？我就直接把这个值付给这个该特函数，并且把这个地铺呢设置为处。 这个的话就是我们之前使用 relative 设置这个地铺和不设置地铺，他的效果是一样的，因为他在原码里边直接给这个东西呢去做了一个开启， ok， 然后第三个是这个数组，就是我们可以增听多个元，然后他就把这个数组呢做了一个便利，然后看里边有什么东西，有阿姨会的话还是读这个歪柳。如果是这个 record 的话，它进行了一个垂位字， 这个垂卧司法其实就是地规，跟我们开的那个地铺是一样的，他会把里边每个属性的做一个针听，那你如果 是一个函数呢，他就帮你去做一个加工。 ok， 然后我们再往下看，如果我们这个哨子传的是一个函数，然后他其实也是做了一个加工，付给了这个该他函数，并且呢判断了一下有没有这个 cb， 如果有的话就是执行这个卧尺，如果没有这个 cb， 那他就会执行卧尺 effect， 也就是我们下一张要讲的东西，大家可以提前先了解一下。 ok， 然后我们继续再下，再往下看啊， 在这这的话他又进行了一个判断，就是这个 cb 口碑和函数和这个地铺，如果开启了，他就进行这个垂沃尔斯深度监听，其实这个垂沃尔斯里边他就是做了一个地规，对，当然也是比较耗时的。 ok， 然后我们继续再往下看啊，来到了这个叫步，然后他把这个旧址呢做了一个初始化，大家可以看到现在呢是一个空对 像，就是这个东西啊，然后这个叫步的话，我们一会再来说啊，然后下面是这个调度啊，调度的话其实他都付给了这个死该车了，就是我们之前讲的那几种模式， 如果是哦 sink 的话，还是就是这个同步执行，如果是 pose 的，大家注意看，他又传给了，就是把这个叫法，就上面这个函数传给了这个 q pose 的装点 effect 啊。注意一下，如果在原码里边看到了这个 q pose 的装单 affect， 他就一定是在组建更新之后去做一个执行的。 那如果是这个 pr 一，就是这个 qpr e flashcobex， 如果碰到了这个，那他一定就是在组建更新之前去做一个执行。对，你在圆码里面看到这两个函数，你就可以去这么理解，然后付给了这个 schedule， 付给了这个调度，然后呢又付给了这个 react q efect， 把这个依赖呢 收集了一下，但是他只是收集了，因为现在还没有依赖这个更新，所以说这个东西呢，就是这个叫步，这个函数他不会走，然后我们继续再往下看， 那如果我传了这个考派可，并且我设置这个 ameritates， 就我们之前讲过，如果设置这个东西的话，他会立马优先去调用一下这个叫本 就是这个函数，然后去获取了一下这个心值。然后呢下面又有一个判断，如果是这个 mad 他的话，他第一次的话，他这个是相等的，就是我们可以看到他是这个对象，和这个他俩指针是一样的，所以说他会反一个安地泛针， 然后呢再去更新一下这个旧址，那第一次的话，这就是第一次为什么会反一个安迪范的的一个原因啊，因为在他下面执行的这个 invite， 他去优先执行的这个叫步，那如果 如果没有设置这个 amidat 呢？他就会给旧值做了一个初始化，那比如说我们 r e f 里边之前有一个这个默认的一个小满，那他这就会复制，把这个奥的歪理呢变成一个小满。 然后比如说我们有依赖更新了，把它变成一个什么小满一，此时呢就会触发这个一旦的收集，他就会去掉这个该臭了，然后去执行里边对应的这个叫本，然后这时候呢就读到这个新址了，此时这个遛弯领呢就是这个小满一。 ok， 然后我们再往下看， 这个奥的歪柳呢，我们在下面已经复过制了，那他已经等于这个小满了，所以说这个奥的歪柳呢就不成立了，他就不等于这个对象了，所以说他就会返回这个当前的这个奥的歪柳，也就是小满。那这个牛歪柳呢？就是这个小满一，然后 去执行这个抖音的 cb 考贝克，然后我们就在页面上呢就可以看到这个新纸就是小满意。旧纸呢就是这个小满。然后在下面呢做了一个更新，就是他执行完才会更新，把这个新纸呢再付给了这个旧纸。这个奥的歪柳， 那他就是这个小满意了。 ok， 然后再进行更新，比如说我们现在变成了一个什么小满一二，后面又加了一个二，那他又又去走这个叫步了，那此时呢这个东西他就变成一个小满一二了， 然后呢又又到这了，又到这的话，这个奥的歪柳呢？他是有直的。对，我们之前已在下面已经更新过了，所以说他变成了一个小满意，那这个右歪柳呢？变成一个小满意二，所以说然后他又去直行 这个考拜客，那我们这个新址就是小满一二，旧址就是小满一，然后呢执行完成之后呢再来给他更新，那这个旧址呢？又变成了一个小满一二，就是这么一个流程，大家可以看到他这的话是直接复制，直接复制，那如果是对象的话， 那对象的话他就会引用吗？所以说他新值和旧值是一样的，就是因为他在这直接复制了，那以上的话就是所有的卧车一片的一个黄金流程。 ok。
67小满zs
00:37查看AI文稿AI文稿b u 三项目中一般会有 composable 目录，它的作用是什么？你使用过吗？ composable 目录主要用于存放你的组合式 api。 在 bu 三点零中，新增的组合式 api 是一种强大的状态逻辑重用机制，它允许你在多个组建之间共享和重用逻辑， 使得你的代码更具可维护性和可读性。如果你对 bill 三加 fight 从零到一搭建脚手架感兴趣，可以看看我的抖音店铺课程，也许对你有帮助。下一个视频，我将会详细讲解如何使用 composable 特性来优化 bill 三代码。
109李钟意讲前端
