vue插件自动.value设置

哈喽，各位观众朋友们大家好，今天我们来学习一 v 三的第二十六章，深入 v 港 model， ok， 那 v 港 model 呢，它其实是微微的内置指令，它支持这个永普特， cirect radio 以及各种表单元素，甚至呢自定义组建呢，也是可以去支持这个 v 港 model。 ok， 那 v 杠猫等它在 v 三里面呢，是属于这个破坏性更新的。其次呢，它就是一个语法堂，呃，是通过这个 propers 和伊米特去组合而成的。 我们已经之前讲过这个 props， 它是单项数据柳，只允许这个负极呢去传着数据给子集，不允许子集呢去修改这个负极数据。所以说唯一也考虑到这个问题的，它直接把这两个合起来做成了一个 wegame mode。 ok， 我们来看一下它对比 v v 二的一个变化。首先是这个 props， 这个默认值，在 v v 二里边，它叫歪柳， v u 三呢，它叫这个猫头歪柳。 然后这个事件呢， v v 二默认叫引注册，在 v v 三里边，它是通过 r d 称冒号毛的 w 这种方式是 v v r 里边哦 sink 的一个写法，但是 v 三呢，已经把它占用了，所以说哦信可在 v v 三里边直接就废掉了， ok， 其次它是支持的这个多 v 杠猫的模式， 甚至呢可以支持我们这个自定义修饰服这个 model fell， ok， 我们来写一下今天这个例子，然后我是在这个 app 的 vivo 呢去引入一下我们这个资助键，我们今天来演示如何去给一个自定义组件去绑定一个 vga model， ok， 因为我们那些表单元素呢，之前已经讲过了。 然后呢，我是在这写了一个标题，写了一个按钮，然后呢引入了一下我们这个子组键，就是这个 vivo 猫头点儿 vok， 在这个子组键里边呢，也是去创建一些元素，有这个按钮哇，其实就是模仿一个带 log， 看一下页面上的效果啊，大概就是长这样，这是负极组建，然后呢这个带这个弹框呢，就是一个子组建。 ok， 就是我们希望点击这个关闭的时候呢，可以去控制这个子组建的一个显示与隐藏， 然后词组间点击关闭呢，我们可以把这个数据的回传给这个负极，并且呢把它给关掉，就是形成这样双向绑定的一个模式。 ok， 我们来写一下今天这个代码，那首先我们先给他绑定一个 wegan model， ok， 这个字母叫一瘦， 然后我们通过 r e f 去给他定一下这个变量为一的寿。 r e f 啊，由于他是一个开关，所以说我们直接给他定成一个 布尔值就可以了，那默认的话我们先让他展示，对，先让他能看见，同时我们把这个数据呢给他呈现到这个页面上面，给他显示也能看见这个数据的变化。 ok， 啊，这样的话我们就可以这个自定义组建呢去绑定一个非扛猫头。但是这个自定义组建呢，如何去接收我们传过来这样一个值呢？ ok， 其实呢他通过抵饭 props 就可以去收到，通过这个，然后呢我们还是使用这种发型自面料模式去给他做一个接收。 ok， 我们刚才说过在维玉三里边他默认值呢叫这个猫的歪柳，在维玉二呢叫这个歪柳，我们使用的是维玉三，所以说是要使用这个猫的歪柳这个名字，然后呢它是一个布尔植， ok， 然后我们来输出一下这个字，直接给他输出到页面上，那他应该输出的是一个处，因为默认给他传进来就是一个处。 ok， 我们来发现一下页面，哎，已经是传过来了，所以说我们可以用这个词来控制我们这个弹框的显示和隐藏，给他绑定一个微杠 e， ok， 好的，然后呢我们再给这个 aps vivo 呢把这个开关的给他加一个事件来切换这个子组件的显示和隐藏，就是控制这个一瘦的值， ok， 给他去取一个返就可以了。 好，咱们来看一下效果，点击开关来设置为 boss， 并且呢我们这个自然弹光呢也是关闭了， ok， 这样切换是没有问题的，但是现在我们要实现的是点击这个关闭， 把这个副组件这个数据呢给它改掉，并且呢把这个资组件把弹框给它给关掉。 ok， 这时我们就需要配合使用这个底范 dmes 去给他做一个组合，通过这个， ok， 然后我们讲过他是通过 updates 冒号，这是一个固定语法，然后呢后面跟上我们这个名就可以了， ok， 这样子行，然后我们来接受一个 emails， 然后我们给这个关闭呢来一个事件为 click we close， 好的，我们来触发一下这个事件，就是这个 updates 猫头歪柳，然后我们点击的时候呢给它置为一个 poss， 就把这个东西呢给它关掉， ok， 这样的话就实现了这个数据的双向流动，我们来看一下它的变化。 好，咱们先刷新一下点击开关， ok， 关掉，没问题，现在呢是副组件控制没有问题，然后呢我们自组键点击关闭， ok， 这个弹框呢关闭了，并且呢把副组件传过来直呢也是修改掉的，哎，也是没有问题的。 ok， 这样的话就是一个最简单的一个 v 杠猫的的一个用法， ok， 我们来演示第二个多 v 杠猫的用法， ok， 在 v 三里边呢，他支持绑定多个肥港猫头，比如说我们来绑定一个 tax 的歪领， ok， 然后我们给他一个词叫什么 tax 的吧，我们来声明一下这个变量 啊，还是使用 r e f 来个 string 默认值叫小满吧。 ok， 我们把这个值呢也给传到这个子组建里边来，那他接收呢？他接收的话是通过他通过 v 杠猫的冒号后面这个名字呢去给他做一个接收， ok， 我们把它复制一下，在 v 杠猫兜里边去接收一下就好了， ok， 然后他是一个 string， 然后呢我们把这个值呢付给我们这个音铺，就是这个内容，去通过冒号 y 六去给他做一个绑定， ok， 这样子就绑定上我们这个 taxy 六，这个值呢就是一个小买卖，来看一下刷新， ok， 那小满呢就已经过来了，然后我们把这个值呢在副组件呢也给他显示一下吧，我来验证他们是双向的， ok， 那个 dna 叫 tex， ok， 也是没有问题，但是我们现在需要做的就是这个子组建呢，去改变这个值的时候去同步这个副组建， ok， 还同样还是使用那个英米特去给他做一个绑定， ok， 然后呢我们给他来个事件叫 input 吧，叫称职， ok， 我们刚才讲过这个，这个固定学法呢，还是一样的，对，通过这个啊，不对，陈冒号，后面呢，把这个名给他跟上，哎，其实也是非常简单。 ok， 那这样子就可以了，然后我们来接收一下这个疑问题，然后他的类型就是疑问题获取一下这个 torquey， 就当天这个元素啊， 就等于一点 target， ok， 发现他推断的是一个疑问的 target， 疑问的 target 呢，是没有办法去读这个 y 六的，所以说我们给他来一个状元，把它推断成一个 html html 引扑特，引扑特 amit， okay， 这时候我们就可以读到这个 target 点歪柳了。点歪柳， ok， 我们把这个歪柳呢做一个回传就可以了，使用 emit 是这个 tax 的歪溜，然后呢，把这个头给的歪溜呢去给他做一个回传， ok， 此时呢，数据呢，就已经变成这个双向流动的，其实很多那些第三方的组建他也是这么 碰撞的，比如说我们常见的按着门 ui， 按照点赞的，都是使用这种方式去做一个 vivo mode。 ok， 我们来看一下 啊，比如说我数个一二三，哎，数据呢，已经同步上去了，哎，也是没有问题的。 ok， 那这也是他的一个多 v 杠猫的的一个用法。 ok， 然后呢，我们再来介绍一下他的，呃，他的自定义修饰符啊，那么之前讲过他有些内置的，比如说什么 trim 是吧，男版和什么 lazy 啊，一些他内置的，现在呢，我由于演员宣布去自定义了，比如说我们叫意思 et 啊，这懂得都懂啊。 ok， 然后呢，我们在这个猫的歪柳如何去接收这个东西呢？它其实是有一个规范的，就是我们使用这个之前定好这个 vivo 猫头的名字，就是我们之前定的是这个太子的歪柳，后面的跟上 他这个 model files， 那后面这一段这个名字呢是固定的，前面这一段呢只要跟上这个 vigo model 冒号后面这个用法就可以了。你如果是使用这个默认值的话，你就是这个 毛斗毛的 fails， 对，我们刚才使用的是这个自定义那个毛的，所以说就是 tax 的歪溜毛的 fails。 哎，这样子使用就可以了啊，他可以传，他可以不传，所以说我们这加一个问号，把他呢变成这种可选的。 ok， 我们刚才呢在里边接收一个什么 is bt， ok， 然后他返回的是一个布尔直。 好的，就是有这个东西的时候你去怎么操作，还有没有这个东西的时候你再去怎么操作去做一个判断。 ok， 我们先来接受一下这个东西，我们来一个定一个 props 吧。 ok， 然后我们就在这来给他写一下吧。啊，比如说有这个东西 啊，泰特的 models， 然后他下面这个印子 bt 啊，就怎么怎么做，如果没有的话又怎么怎么做，如果有的话我们就在后面加两个变态吧。 ok， 如果没有的话我们就正常返回来给大家做一个例子。好的，我们来看一下页面效果，我们刷新一下，点击一哎，后面呢把这个变态这两个字呢已经是加上了， 也是没有问题的，这个的话就是他的一个自定义修饰符。 ok， 那以上的话就是一个所有的微钢膜的一个用法，然后呢我们来讲一下他的圆码。 ok， 我们来看一下这个微猫斗的一个圆码，它是在这个状态道目下面这个 src directt， 下面这个微猫斗的 ts， ok， 它其实呢就是一个自定义指令，大家如果对指令不熟悉的话，可以去看一下，下一张，下一张我已经讲过了，然后你再回来看这个也是可以的， ok， 那么先来看一下他这个 初始化复制，他是在这个 monty 他里边去做这个初始化复制，就是通过这个 el 去复制一个歪柳， ok， 现在的话只是一个单向的数据流动，然后我们再看这个 cry， teacher， crati 等，它接受三个参数，第一个是易要盗墓见对象，第二个的话是这个邦定对象，这三个的话是一个 v 六的， ok， 然后我们再看一下这个爱的疑问他，你是哪是给这个 el 去做一个绑定的一个事件，然后呢这个 lazy， 这个 lazy 呢就是它内置的一个修饰符， lazy， trip， 还有这个 number 一共是三个，它内置的， ok， 如果 lazy 为处的话，它就触发这个称职事件， 那称职时间的话，只有只改变且鼠标离开焦点的时候呢，才会去做一个触发，而 imp 的事件呢则是会一直触发，所以说通过这个东西你可以给他做一个惰性， ok， 然后呢并且判断一下这个 tree， 如果有这个 tree 的话，就手动调用一下这个 tree， 去除这个左右空格，如果是这个传这个 number 的话，就可以进行这个 tonight 的一个转换， ok， 然后去调用这个翻译函数， ok， 然后呢在下面又有一个判断，如果触发的是称职时间，并且设置这个 trim 啊，也是会去掉这个确定方法的， ok， 然后在下面这个 lazy 呢，有一个特殊处理，就是我们这个中文输入法的时候呢，比如说我们这个输完一个东西，我来个 asd 这样子， 哎，我现在在说东西，但是我没有明确我要选哪个字，这时候呢也不会去触发我们这个引库存，当我们这个点击完了之后呢，才会去触发这个一步的事件，所以说他针对这个中文输入法又做了这个特殊处理，通过监听卡姆杰森斯尔和卡姆杰森，嗯，等， ok， 然后我们再来看这个比佛， 啊不对，他一个更新，如果如果是蕾蕾的话，就直接给他 reap 掉。还有这个 tree， 如果已经做过这个 tree 的话也就直接 reap， 如果这个 number 已经做过 to number 的话也就直接 read， ok， 如果新值和旧值不一样的话才会去做一个更新， ok， 这个的话就是一个他是他完整的一个微猫的一个圆码，但是这个微猫的他配合这个伊米特去做一个更新。我们再来看一下这个 伊米特，一个圆码， ok， ok， 那么再来看一下这个伊米特一个圆码，他是在这个装 time call 下面这个扛 pot 呢，伊米特里边， ok， 他先夺取了当前实力的 propers 一个对象， ok， 夺取完之后呢，又获取一下这个疑问的，也就是我们传过来这个事件， 就是这个阿巴蒂德这个猫的歪柳就是这个东西，然后他就去做了一个判断，通过这个 starvis 去判断事 啊不对的冒号开头的，如果是的话，他就给你去截掉，也就是获取后面这个毛的歪柳， 对，其实就是后获取后面这一段获取完成之后呢获取一下这个修饰符，这个 number 和 tree 就是他在回传的时候呢也会去给你做这个处理。 就是我们这比如说传染参数啊，你之前有没有绑定这个 tri， 他在回传的时候也会给你进行一个过过滤，所以说他考虑的还是很周到的。 ok， 这的话就是一个他对修饰服的一个应用。然后我们再来看下面，在下面定的是一个憨多的内 在韩德罗，内部呢去调用这个兔韩德罗 k， 其实呢就是加了一个昂，对应我们这个世界名称可以看一下，对，就是在这加了一个昂，然后呢去执行这个 covice stink island 里去执行我们对应的一个回调函数。 ok， 以上的话就是他所有的一个圆码。

好了，那么这种太白蓝呢？可能你以前已经做过了，对不对？好，那么结构样式这块你也应该很清楚了，所以结构样式这块不要求大家啊，不要求大家。呃，这个在课堂上写啊，那么呃，这个呢，我会待会发给大家啊，有一个未完成版，叫选项卡的一个未完成版，那么因为我们要来完成呢，我们把它拿过来， 那么这个这个逻辑啊，这个目前它里面就只有，它里面就只有啊，这个对，结构样式现在点击点不了，对不对？ 好，那么为了跟刚才的那个案例做区分哈，我把这个 glow 的啊，我换成一个 sky， sky 啊， sky， blue， 好，那么做一个区分啊，做一个区分来，我把他这个东西，嗯，拿一下复制粘贴。好， 那么这个时候我们现在来看，就这个，所以现在点击是没有作用的。好，那么我先给大家分析一下，虽然没有写，我还是给大家分析一下，说这个东西如果布局应该怎么布啊？呃，来给大家说一下，首先分上 上下结构对不对？分上下结构啊，上下结构，那么上盒子上盒子有三个按钮吧？对，对，三个按钮。然后为什么有一个蓝色的呢？因为他身上有一个类，叫做当前类，对不对？对，有一个当前类， attem 或者卡润都行。啊，那么 好，那意思就是我把这个泪给到第二个，他样式就在他上身上。好，那么这边呢？这边的话，他其实现在只看到一个按钮一对应的内容，其实应该还有两个，对不对？按钮二和按钮三对应的内容对不对？好，那么现在为什么看不到他们呢？ 很简单隐藏了啊，也就是说现在还是一样，他相当于也有一个当前类，是不是？对，也有一个当前类啊，好，那么我们啊，这个给大家分析了之后，我们来看一下刚才我们的分析啊，那么确实他这个盒子确实是这样子的，就是上面上盒子，然后还有下盒子， 对，上盒子有三个，三个按钮，同样身上有一个当前内好，然后下盒子也有三个，那么卡顿也是当前内 好，那么下盒子看到啊，下盒子，这，下盒子这里面的 div 其实应该是隐藏的，对不对？对，应该是有一个 discree 浪的啊，我们来看一下有没有， 你看 table condense 啊，那么内容里面有一个 display 那，但是卡润他就 display rock 啊，确实是有这么个东西。好， 同样的道理，这里面也是一样， at 我的话，他应该就是，你看 at 我的话，他应该就是一个背景天蓝色啊，所以这个已经 ok 了，布局已经 ok 了，那么这时候我们开始来分析代码啊，我们的 view 代码应该怎么写？那么这时候呢，首先引住他，引住了，对不对？好，他引住了，所以我们在 这里面直接就六六就行了，六，六六。好，那么这样的话，我们首先也要给他一个，那么现在找不到他的 id， 对不对？找到 id 用泪啊，他有泪，我们就用泪点，这个东西 没有了。好，那么这个我们有这块有一个经验哈，所以这个你应该看得懂。好，接下来写的一塔，那么的一塔目前好像还不知道要写什么，所以就先不用写，先不用写，我们先分析分析他待会应该怎么切换。 待会的千万很简单，无非就是把这个泪是不是给过来。对，对，无非就是把这个泪给过来。你看我泪给过来了他这个东西就有了啊。好，所以，所以，但是啊但是我们现在的思路其实应该换一换了，朋友们 他这个累有时候会有 at， 不对不对，其实有时候其实应该是没有的，对不对？ 对，所以对于他来讲啊有时候有有时候没有。是不是三元上服？对，所以把它首先第一步加什么 冒号才能写三余丈夫对不对？对，好，所以有时候有要么这个要么就是空，是不是这意思？对，所以前面应该加一个条件什么时候有是吧？ 好，那什么时候有呢？呃点击时候啊。点击是点击啊，但是当然你不觉得一开始刷新页面其实不用点击吗？对吧？所以应该是这么想来。好好听啊好好听。 页面页面上所有可以展示并且样式进行切换的通通最后都归根为数据的变化， 记住这句话啊页面上你所有看到的变化全部都是谁？都是低卡里面的数据在变，那意思就是我的这个切换是不是也是可以看成是一个数据在变。 比方说我定一个变量，然后一的时候他为一的时候表示定一个变量啊， 一的时候表示当前内在这里为二的时候表示当前内在这里为三的时候表示当前内在这里。可不可以？ 可以，所以我就来定义这么样一遍啊我们现在这个东西啊还没写完整所以他就这样。好，那么我现在定义这样一个变量啊这个变量啊 number 我就给他唯一。那么这个东西用来做什么的？用来表示，用来表示当前类在谁身上？好，那么老师说了，一就表示按钮一身上， 二就表示按钮二乘三，所以这个时候你应该是 number 等等于一，是不是？这意思？对，好， number 等于一吗？等于一，我就第一个有 at 不累，你看一下是不是 有了吧？有了，那么现在呢？来，我把 number 一改哈，改成二，改成二，那这个时候我们看一下。 没有。哎，老师，你不是改成二吗？他身上怎么没有泪呢？咱们写了没有？没有，所以其实对于他们三个人来讲都是有可能有泪，有可能没有泪，对不对？对，所以应该把这三个把这个给他复制过来粘贴一下，然后给他改成 二。等于二的时候我就有这个类，当然他等于二的时候，其实前面一个不成立了，对不对？不，成立了。好，所以同样的道理， 下一个会不会啦？不会啊，当然我给大家看。好，现在我给他改成二，你看一下现在是二就有了。对，同样的道理啊，同样的道理。好，所以把这个东西拿过来粘贴一下。好，现在呢？就把这东西改成三就可以了。然后我们来看一下现在。 好，那么你现在点击肯定没有效果了吗？对不对？点击试卷写了没有？没有？没有啊，别急，我们先看三有没有效果，我改成三啊，改成三，来看一下现在是不是三就有了。好，所以接下来一步就是点击试卷了，对不对？ 我现在在三，这里，现在这个东西是什么？叫做默认值为三，是不是？好，现在呢？我点击一，是不是这里要过来， 那么其实什么叫这里这个样式要过来呢？其实 number 把它改成一是不是就可以了？所以我在他身上写一个什么点击事件叫做，哎，可 等于，那我改谁？ number 等于一，我把 number 改成一，是不是这个条件就成立了？对，那同时后面这两个条件就不成立，所以只有他有 at， 后面两个没有。来，我们看一下这个事件成立了没有？来，点一下啊？ 点一下是不是过来了？当然第二个，第三个还没有，因为还没有加事件，所以后面这两个会了没有。 来，哎，可立，可没错。复制粘贴来， number 等于多少？二，二，没错，等于二。那这样的话我们来看一下前两个按钮至少可以了， 是不是？嗯，前两个你会啊，那么剩下第三个会了吗？会了，就是复制粘贴而已啊。那所以把这个东西拿过来，所以三，二三。好了，那么给大家解释一下啊，解释一下为什么这个代码是这么样子的？来，一二三。那么现在你， 你先，你先看啊，就是我每次一刷新全部都是什么，都是在三，对不对？这个原因是什么？原因？是初始值对不对？对，所以现在的话 ok 了，来，我们看点点，点点是不 ok？ 好，那么现在呢？给大家解释一下为什么是这个样子来， 所以看代码是怎么执行的啊？首先用户去点，用户没有点击，是不是什么事情都没发生？对，用户一旦点击，他改了，谁改了？底下这个数据对不对？你看是不是又是一个手机的箭头？ 好，那么这个数据一旦发生变化，又影响了上面是不是使用的这个 number， 所以这个影响了，这个谁做的？这个是 view 做的对不对？对。 view 就帮我们去，你看用户点击 view 帮我们修改了这个值，同样的因为这个值变，那 view 又帮我们修改了界面，更新了一下，重新判断了一下。 啊？所以这么样一个流程啊，这么一个流程来给大家点时间啊，把这个东西的理解一下，然后呢？把它写出来，然后这个东西我发一下啊，我发一下这个未完成。

那咱们上节课说到了新闻里边做的一个自定义指令啊，最终的效果呢，就是说在新闻里边有一个，这三个自定义大不同大小颜色的这个圆圈，我通过自定义指令的变量啊，通过自定义指令来定义这三个 spa 呢， 自定义大小啊，但是这个指令呢，只能够在这个这个页面里面用，现在咱们把它改造成全局指令啊。怎么改造的全局指令呢？我们首先要在面的这样入函，入口函数这个地方 打一个什么呢？ vo e 点你这个这是一个优异的一个函数。然后呢这里边呢，我们把我们要打的指令，第一个参数是我们要打的指令，第二个参数的是这个指令的内 内容，指令的内容就是对象啊，就从这六字里边来看一下，我们刚才不写好了一个局部指令吗？我们把 w 卡了里边的这个内容放到 ms 后边，作为一个对象，作为一个参数，第二个参数，行了就完事了， 这了这了以后呢，我们这里边的这个指令就可以不要了，就可以不要了，这个地方就可以不要了， 到了以后我这个指令还是生效的，你看闺女还是生效。那么我们现在在产品页里边，产品这边不是我们再做一个啊，再做一个，找到产品页里边来， 产品中心里边来，我从这里边用一下那个全局指令，我在这个地方上边产品里边上面打一个示范标签里边打一个什么呢？ ccccccc， 那么我不用指令的时候就是这样的，现在用全局指令啊，给他做一个他的这个 啊， cccccccb 吧，做一个对象，对象呢有他的宽度值，宽度值是一百二十，高度值是一百，然后 bc 开了，是什么呢？是一个井号， 整号 f 零 f f f f， 然后呢还有一个文字的颜色是这个，然后井号零零零，不说的话呢，我把这个指令所遇到的一些这个 这个直打到这来了，然后呢，我从这绑个指令 a 啊，他们就开了，就等于什么呢？等于我们下边 的 ccb。 好，我们再看一下这里边，哎，这里边有个颜色不对呀，一二三四五六， dj 卡拉卡拉，这地方颜色没出来，哎，出来了，这颜色太淡了啊，给他下深点颜色，零零 f f， 零 f， 看吧，能看见这颜色了吧？不说在产品里边我没有那个做指令吗？但产品里边这个地方也同样可以用到我们自定义指令， 也说在任何的 vivo 页面里边都现在都可以用这个 wc 这个指令了。这个指令呢，我们可以最后在封装的一个 gsv 念里边去啊，封装这个 gsv 里边去，因为你们这打太多的指令有点太乱了 啊，那这是我们怎么把自定义的这个指令呃，做成这个全局指令？

这节课呢，我们将会学习到一个极其重要的知识，就是路由，我们可以看到我们上节课呢，已经布局成了这个样子了，然后呢，我们现在要切换，切换到不同的页面，什么叫页面呢？我们从直观上来讲，我们在这个网站里边切换页面，实际上切换哪个区域啊？是不是就切换这个区域啊？ 你看我们这边啊，左边是不动的，对吧？切换来切换去啊，都是切换那个这块区域啊，你看文章也是切换这块区域，只是这块区域变化。其实呢，你们以后呢，在别的项目里边也会发生类似的事情，比方顶部的导航栏不变，页角不变，就是中间这个区域变化， 或者是呢整个页面全部变完了，都有可能啊，无论是怎么变，总之呢，是有一块区域在变化，这个区域不同的东西呢，就是不同的页面。在我们过去啊，传统的工程里边，一个页面呢，其实就是一个 atm 文件，比方说我们首页可能就是这个页面啊， 然后呢，我们的文章页可能就是 blog atm， 呃，然后呢，我们的关于我们呢就是 aboves atm， 对吧？但是呢，现在我们用 view 做开发，我们要做的是什么呢？单页应用程序，什么叫单页呢？只有一个页面，从头到尾都只有这个页面啊？你看我们的网网页原代码啊， 一个 d i v 里边啥都没有，全靠 g s 在这个 d i v 里面构建。但是呢，抽象来讲啊，概念上呢，我们也把它叫做页面，只不过呢，这个页面呢，不再是我们传统的 atm 页面了。那这个区域到底是啥呢？其实 就是一个主见，我们在 view 里边切换页面，实际上是切换什么呢？切换的就是一个主见，就这么简单。那么也就是说我们这一块区域啊，中间这一块区域， 实际上它它代表着不同的页面，实际上呢，每个页面呢就是一个组件，因此呢，我们在我们的工程结构里边呢，可以在 s r c 里边新建一个文件夹，我们给它取个名字叫 view， 加个意思吧， views 表示的是啊，我这里呢 view 呢，以 view， 这就是一个试图啊，一个试图就是个页面，当然你也可以把它命名为配几式，也可以啊，无所谓的，看你们公司的约定吧，我们无忧里面通常的就是写的是无忧子好，然后呢，我们新建个文件啊，比方说我们首页的话，我们可以建一个 home 第二 view 文件，那么这就是一个首页的页面。当然呢，你也可以按照我们以刚之前的做法啊，新建个文件夹， home 表示首页，首页里面新建一个 index 点 view， 对吧？因为读这个文件夹的话，默认就读的是它。也可以啊，无所谓，看你们公司吧，因为这是我个人比较喜欢的一种做法啊，一个文件夹里边新建一个 index 点 view， 那表示的是我们首页啊，来写一个，随便写一个啊，就首页 好。然后呢，同样道理呢，我们可以建立一些其他的页面啊，比方说我们建立一个关于 about， 关于我好首页，关于还有什么呢？呃，还有文章，项目 效果和留言版，我们把这各种页面的组件都建起来了。那么现在问题来了，在我们的这个区域，这个区在哪里写的？是不是在 ap 里边写的呀？在这里边写的。那么这里涉及到一个问题，这里要渲染哪个组件呢？我到底是把 home 组件放这，还是把这个 blog 组件放这，还是把 mac 的组件放这？到底把哪个组件放这呢？ 逻辑是什么呢？我们希望根据页面不同的地址，就你访问的是什么地址，你无论访问什么地址，我都是同一个页面，对吧？只有一个页面应这个是叫 at， 没有 我就用 t s 给你渲染出不同的主见放到这个区域，对不对？比方你访问这个地址，我就给你渲染博客主见，你访问一个斜杠，那我就反宣渲染首页啊，就这么个意思。因此呢，我们这里就会产生三个问题，一个来，第一个问题，如何来？根据地址，不同的地址地址不一样，我就渲染不同的主见，这个该怎么去做？第二个 问题，比方说根据这个地址找到这个主线了，那我把这个主线放到哪个区域？放到这呢？还是覆盖整个区域呢？目前看得清楚啊，应该放到这，那代码上怎么来表达呢？怎么让程序知道你要放到这个区域呢？对吧？这是第二个问题，你要告诉程序啊。第三个问题， 如何无刷新的切换主线？比方说我们点这个导航点了过后，哎，这个区就变了，并且呢，页面不要刷新，因为一刷新的话，没有必要你又全部去重新请求这个 atm， 又全部重新请求 gs， 然后呢？又重新全部运行，是 gs 啊，因为页面一刷新，全部要重来一次，从这里开始 全部要重新运行时，没有必要，我们只需要切换这个这个区就行了，能够更好的提高效率，这些都是我们这节课要解决的问题。有这节课呢，代码没几行，大道理一大堆，不然的话，我只只是把代码告诉你们，你们也不知道什么意思。而且将来呢，如果说稍微变一下，你不又不知道，怎么不知道怎么办呢？所以一定要把原理理解清楚。那么要解决这些问 问题呢，我们自己可不可以手写代码？可以啊，将来呢，我给大家讲一讲啊，我们自己手写应该怎么做来做。但是呢，我们更多的时候在工程里边往往是使用的是别人已经写好的一个无 u 插件。哎，无 u 是可以安装插件的啊，我们之前都没有用过插件，那么这以后我们会用到第一个无 u 插件就是路由插件。 路由的根本意思是什么意思呢？其实就是根据不同的地址，不同的路径，然后得到不同的东西，那么这里呢，就是得到不同的主见 啊，这就是路由的本质意识。关注都已剪辑号的同学打断一下啊，我是袁老师，总听我讲短视频，这回呢，来听听我讲的大课，我给大伙呢专门录制了一套大吃课，现在呢，免费送给你们， 不管你手上现在看的是什么样的资料，都应该先停下来，先来看一看我这套大师课。一方面呢，这套课程里边的内容都是前端最核心的知识，其他的知识都是在这个基础上生长出来的， 你先掌握好了这个，再学啥都事半功倍。而且呢，自此以后你对前端技术的理解不会存在任何的障碍， 另一方面呢，这套课还能够提升你的眼光，让你具备分辨好坏的能力。看过大师课之后啊，有一些不入流的资料，课程博客论坛你就看不上眼了，这种能分辨好坏的能力也能够为你将来的学习省下不少的时间。 所以呢，还没有领到课程的同学，赶快抓住免费领取的机会，进评论区第一条，加入粉丝群，然后根据提示领取就可以了。好，那么要使用这个插件呢，我们首先要安装它，呃，找到我们的工程啊，把它停止 好，首先呢我们安装一下路由，名字叫做 view rotor， 安装好了这个音耐过后呢，它有没有效果了？没有效果对吧？你并没有用它啊，所以说 啊，效果呢，还是没变，那么接下来我们一步步来啊，首先呢我们怎么来用这个路由呢？启动文件里边，我们在创建无忧实力之前，我们就首先要应用这个插件，怎么应用呢？就是使用这个无忧的构造函数里边提供那个静态方法 叫 use。 这 use 什么意思啊？就是使用插件啊，使用一个 view 插件，那么这个插件里边传的是一个插件对象，那插件对象是啥呢？其实就是那个 view rotor 啊，我们把 view rotor 导入进来。 view rotor， 五九 rotar 啊，导入进来就把这个东西传进去就 ok 了哈，这就是使用一个五九插件，这个东西呢实际上是一个构造函数，我们通过六来创建一个五九 rotor 的构造函数， 那么这里边要填一个，填一些配置啊，我们先暂时不不写配置，这里写的是配置，我们先暂时不写啊，那么会得到一个 rotor 的实力， 路由的实力，我们需要把这个路由的实力呢配置到无忧里边去。哎，现在是不是无忧里边多了一个配置啊，叫做 rotor 啊，使用了插件，然后呢把路由配置了进去啊，按照这个写就 ok。 无忧点意思啊无忧点意思啊，我说怎么回事啊？

屏幕天天看，年薪到十万！大家好，欢迎收看前端面试题分享。今天呢，咱们还是分享一道微友当中非常常见的面试题，说如果给微友中的一个对象增加一个新的属性的话，那么他的仕途是否会跟随更新，以及为什么会出现下方这个情况呢？ 大家来看一下。现在咱们在这写了一个非常基本的案例，创建了一个 vo 对象，里面有一个 obg， 对， obg 对吧？一个对象属性，然后里边有一个 out property， 一个旧属性做了一个循环，便利进行了一个属性的输出。现在咱们刷新页面可以看到默认是一个旧属性。 好，那么咱们底下写了一个巴特按钮，点击时给当前的对象动态的增加一个新的属性，咱们来测试一下，当点击巴特时，咱们的 仕途会更新吗？来点击，大家可以看到仕途并没有更新，但是呢，咱们通过输出咱们 obg 的话，咱们发现他这个新属性实际上是加到的， 那么这个原因是什么？这道题呢，主要考察的是大家对于未有二点零的他本身的一个圆码的一个讲解，他实际上在未有当中啊， 他使用的是什么呢？使用的 apojatic define property， 是不是使用的一个这样的一个 api 做的双向数据的绑定和数据监听啊？那咱们也就举个例子，假设这个位置有一个 object nine， 等于谁呢？等于王一， 然后呢咱们想也去监听这个内幕，当内幕发生变化时或者获取时，都有一些事件的发生，咱们是可以用刚才这个 oppojipetypepipeopty 是不是可以用这一个 api 来实现相关的内容，对吧？实现相关的内容，首先第一个参数，咱们监听的是 obg， 第二个参数，监听它的内幕属性，逗号和开进行一些定的选项，在选项中呢，分别有两个方法，一个是盖的方法，是不是当你获取时想要实现什么样的康搜点儿 log 啊，正在获取呢， 好，然后还有一个方法呢，是赛的方法，逗号，还有一个赛的方法，这个赛的方法呢，将来必然会传入一个新的值，这是什么？是不是将来康收点儿 logo 要设置咱们的内幕，然后设置的值是谁呢？是咱们的牛 l 啊，是不是这样一个意思，所以咱们先做个简单的测试，大家看啊， comso 点 log 这个 obg 点内幕的话，咱们先做一个输出，输出的时候，并且把 obg 点内幕设置成王二保存 等一下，大家注意看现在一刷新是不是 get 和这个 post 都会实现，但是有多少是这个盖的？为什么是昂迪范的呢？因为咱们现在啊，如果使用了这个抵饭力 property 的话，他有一个问题是 将来你获取时，他不会获取这个值了，而是获取什么呢？获取盖子的返回结果，比方咱们在这个地方 like 一个 emit name， 然后等于谁呢？等于王一，然后将来在这儿呢，咱们可以直接锐退这个隐 meat name 啊，注意不要屡吞他自己本身，否则的话会出现一个无限循环啊。所以大家看，现在一刷新是不是也是王一啊，那么设置的时候，咱们完全可以让这个引力的内幕等于谁呢？等于这个，这样吧，咱们可以先做一个判定，就是如果不等于不等于这个 newmail 的时候，咱们做一个 复制运算，如果等于的话，那就不要去复制了，对吧？就不要去复制了，做一个复制运算。好，那么大家来看，现在再来一遍呢，来保存一下，刷新一下页面，大家看是没有任何问题的， 所以说在未有他本身啊使用的是这样的一种监听语法，所以咱们看现在如果咱们动态的，比方说加了一个 h 等于二十一的话，咱们看他会有什么事件的发生吗？是不会的，原因是因为新属性并没有加上监听。 好了，那么这道题目重点考察的是对于维优义元马的一个理解。第三，你 property 他的一个基本使用，如果大家觉得对你有所帮助的话，大家记得点赞收藏加评论，谢谢大家。

随着 right 的飞速发展， right 相关的各种插件也油然而生。除了官方推出的插件 right 社区的各种插件更是眼花缭乱。今天给大家推荐一个比 view deaf tours 更强大 并且与 white 生态相关的插件。 right plug in view dev tools 其实就是 white 加 view dev tools white 插件。 view dev tools 是一个旨在增强 view 开发人员体验的 white 插件。使用该插件的前提是 view 版本必须大于或等于三点零。 可使用 npm 进行安装，请在开发模式下可用。接着就可以在配置文件中导入并引用。该插件可能并不适合每一个人，大家可根据习惯来使用。运行项目后， 底部会多出一个图标。 overview 选项页面记录了应用程序的快速概览、扩展应用正在使用的 view 版本页面和组建数量。 pages 展示了当前注册的路由，并且提供了一个快捷的方式进行路由导航。 对于动态路由，他还提供了一个表单来交互式的填写每个参数。 components 展示了你在应用程序使用的组件和他们的层级关系，其实就相当于 build up tools。 assets 展示了你的静态资源列表， 作用并不大。 timeline 分为三个分类，左侧为性能部分，中间是路由跳转的信息，右侧则是 pinia 的相关数据。接着你可以按 pm 模块中搜索并安装各种插件，提供了可选择的历史版本列表。 inspect 集成了 vit plugin in spect， 允许你检查 fight 的转换步骤，了解每个插件如何转换你的代码并发现潜在问题是很有帮助的。最后则是项目的路由组建之间的层级结构图，虽然说不上有什么用，但是。

什么叫动态组件呢？比如说咱做一个手机端的页面，我先说一下咱要实现什么功能啊？咱画一下啊。那刚才咱说了，就是比如说一个手机页面啊，一个手机端的页面的话，他可能分成几部分，分别是什么呢？分别是一个 top 啊，一个单宁， 一个堪称点和一个服帖啊。那这个咱写一下，这个就叫 top 组，这个叫班的组件， 这个叫天天的主角，这个叫福特主角。那，那假如说啊，比如说我，我现在是一个会员啊，那你中间搬，那是一个广告，对吧？那我会员的话，你，你不能老让我看广告啊，所以说我是一个超级尊敬的 vip 啊，那你怎么办呢？你把广告给我去掉，我 打开这个 apple 的时候，我看不到广告，我只能看到这三个。然后如果说你是一个普通的用户啊，你是普通的用户的话，那你不交钱没办法，你只能看广 广告，那你看广告怎么办呢？你呢？就能看到这个版本，所以同样的代码，同样的 apple， 我看的时候就没广告，你看的时候就有广告，甚至可能我看的时候这个富态在上面，他不在下面，反正我开心，对吧？我开心，我是，我是 ip， 我想怎么布局就怎么布局，而你呢？只能看斑点哈，所以说是一个这个功能，那这个功能如果说放到 w 里面去怎么实现呢？ 首先第一点就是说我需要让这个页面他是根据数据自动生成的，而不是说写死的，写死的页面，对吧？啊？是根据数据生成的，他数据可能是这样的，比如说我现在，哎，有一个，有一个，这个，呃 呃，叫利斯特，一个列表，这个列表上显示你的页面啊，第一个页面呢叫叫卖 top 吧，卖 top。 第二个呢叫卖班女啊，第三个页面 叫这个卖干净点，第四个页面呢？我得换个，行啊，看着可能舒服一些。第四个页面呢叫迈夫特，咱用实验这个功能啊，也就说数据是这样的，那你就给我这么的演示，假如说我是 vip， 我没有版本，我就看不到版本 啊，那你那我 vip， 我可能，我我我想看两个套吧，对吧？我心情好，我就是 vip， 我牛，我看两套吧，那你就得给我展示两个套吧。那这个怎么办？这个怎么办啊？ 那我就可以用动态组件来实现这个问题了，实现这功能了啊，那，那怎么写呢？首先我肯定是需需要把这些都引进来，对吧？那这个是没跑了啊，我需要引一个卖套啊，是这个卖套 买斑点，是这个买斑点，买 cant， 那是这个买 cn 点，卖 top。 哎，这这这个不用给了， top 斑点买福特抖音引进来之后我还需要注册， 注册，那我现在注册也注册了，引入也引入了，对吧？啊？然后是卖套盒，买班证，买，看，这还买福字啊，四个，那四个，那我接下来呢？接下来要干什么呢？就是用动态组件康复的标签啊，来实现显示刚才的那些 组件啊。那科目呢？是他有一个属性叫 e 字，对吧？ e 字，比如说我这个 e 字等于 mate， 咱看一下现在的效果啊，这是咱那个 mate 没写东西呢，是吧？ sunprahe， 这个叫 mate， 然后写个 stele， ste， 这个是包墩一片手里的 rap， 呃，写个灰色的黑色啊，然后再写一个，呃，高度是一百 像素，然后看一下现在效果啊，哎，换成手机效果，卖 top 有了啊，对吧？卖 top 有了，然后呢？我现在，我现在在回到这个 app 啊，比如说我现在想显示卖 top， 买单的，然后买强劲的，然后买福气 啊，那这个组件 come on 的呢？他可以写个义字，义字等于谁呢？等于咱们那个想要的组件 come on 的，买套房，买 单点，买康定点，还买福卷，哎，咱们现在都有了，但是咱现在想实现什么功能呢？刚才说了，我希望通过这个数据数据来实现，所以说我刚才那个代码是写死的，那我就可以用这个利是他来实现一个便利，便利之后呢？把利是他里的数据呢？给他显示出来。好，那咱再回来 就写一个康不能陈，写个康不能陈，然后呢？我这里写一个为父，便利谁呢？便利这个 立死他，对吧？艾特姆因立死他，然后这个艾特姆呢？就是咱想要的组件了，弄一些艾特姆，然后这里写一个绑定属性啊，然后保存，然后看一下现在的效果啊， top， 斑点抗性的服务题 top， 对吧？然后我现在只需要改变数据，比如说我现在数据变了啊，我是 vip， 我不想看斑点 删掉，而且我只想看两个套盘，我喜欢看两个套盘，然后回来斑点没了，对吧？然后我想看一个套法在上面啊，一个福特也在上面，对吧？咱 vip 嘛，就个性嘛，我想咋设置怎么设置 啊？福特在上面啊，两个套吧，没有斑点，然后一看福特在上面啊，那通过这种方式的话，我们只要到后台去把数据拿过来，就可以自己去组装咱们想要的页面效果，这个就是动态组件的一个共功能了，用数据来驱动视图。

给大家分享一个做前端开发必须要装的没有一插件，就是这个插件，在这里面搜索就可以安装，安装完了之后呢，里面有好多这种强大的功能，能提高我们的研发效率。比如说这个是我创建的一个没有一文件，对吧？他现在合适其实是乱的，我们可以右键这里面有一个合适化这个文档 呀，他能瞬间给你把代码搁的话，好，还有一些其他的功能，比如说我，那么我点空格，他其实能出来好多种提示，也就说我这个八点上这些属性我其实是都可以用的。还有一个插件也必须要安装的，就是这个 eas， 另一层 就这个插件检测我们的代码的规范。还有一个必须安装的就是美化的没代码格式化的工具，就是这个这个插件，这样的话比如说我在这里面写代码，是吧？我可以我可以把它的格式 调的乱一些，对吧？调乱了之后，那我点保存的时候，他会自动的帮我们更换代码，这样的话能提高咱们的研发的效率。大家还有没有什么好用的插件，欢迎评论区留言。

ui 的表单组件里有一个重置功能，他可以重置成这个表单最初的样子，但是呢，我发现他有个问题，就是假如我这是一个修改界面，我在页面加载的时候就会触手啊一些值上来，像这样， 然后呢如果在页面上修改一些东西，这时候再点重置，是希望他回到修改最初的那个样子，但是大家看他就恢复成空值了，具体的原因一会带大家分析哈。先给大家分享这个解决方案，就是这个插件类似于补丁的插件，有五十多行代码吧， 然后呢我们把这个插件放到本地项目里，再慢点 gs 里呢，把这个插件安装一下，这样的话呢，我们在这页面上如果想在这，比如说我们触手画的这个值了，我们想在这把这些值作为他以后点重值的时候恢复的值，怎么办呢？我们调这 让他们就是我们找到这个 form 的 r， e， f， 然后呢调这个 reni 首 reset y 六，这个方法就是我们通过补丁文件加进去的，然后我们再来分析他原声这个组件不行的原因。首先呢我们正常点 reset， 他是调这个 reset field， 这是原声的重置方法， 所以我们先来看一下这 reset fields 是怎么写的，我们先去找到这个 fom e r fom， 然后呢我们在这里搜 reset field， 在这里 大家看他是循环这个表单里所有的字段，然后呢让每一个字段调用他的 reset feel 方法，这个 feel 的字段是什么呢？其实就是我们常写的这个 form item， 我们打开 form item 之后啊，还是搜索 reset， 大家看在这里 reset feel， 然后呢其他的代码不重要，最重要的是在这在复制，就是你点那个重置之后啊，他让每一个贩卖他们的值 等于他这个引力数外流，注意这里数组他做了一个克隆的操作，至于为什么这样克隆一份留给大家思考哈，我们就说他这引力数外流是怎么来的，我们再搜这个引力数外流， 在这里大家看在每一个 formite 他们的 mountain 的里边儿，他去取这个属性值，然后呢还是如果是数组做了一下克隆， 然后注意，这最重要的是，这他声明了一个止毒的一米是外流属性，在这里这样声明的属性值是止毒的，同时因为他在这里没有加这个 configurable， 所以呢，他这个属性也是没法吃 删掉和重新设置的，所以他做的比较绝。那怎么办呢？其实我们最终的目标首先就需要在这加一个 configure rebo 等于处，这样的话呢，这个属性是可以重新设置的。第二的话呢，我们再去重新 去设置这个你数 y 六的这个 y 六值就可以了。所以啊，我们可以写一个小插件，像这样准备一个新的文件，这里边先把他原声的 fom 导进来，为什么导 fom 你一会再说哈，我们先说 fom 导进来之后，我们把它的这个 monta 的删掉，然后呢，我们自己写一个组件，继承原来这个方麦特么，然后我们做两件事，第一个呢，我们在 mont 的里边原封不动，拿过来代码加一个 config rebo 等于处，这样的话呢， 这个属性后期就可以被重新去设置了，然后我们就可以增加一个方法，就要去重新 新设置这个引力手的这个 y 六。好，有了这个方法之后，这个表单里的每一个元素是可以被重新设置这个初始化的值的，对吧？但是我们不能一个一个去设置吗？所以我们还需要把放母导进来，给放母增加一个 瑞尼手外流，我们在这放木里边循环去修改所有的字段的这个值。最终呢，我们写一个安装插件的入口在这里吗？把原来的这个放麦他们和放木覆盖掉，用我们新写的这个组架， 然后我们在使用的时候就简单了，只要找到这个 form 组件，直接调我们新写的这个方法他就可以了。那我们了解了他之前不行的原因之后，有同学可能会想到，既然他之前这个引力数 y 六啊，是在这个 monte 的里边写的，那是不是我们在 mont 的之前把这 这个 feel 的 y 六附上值就可以了呢？没错，我们来试一下啊，我们在这引力说法，我先把这个方法注掉，我们不去掉这个。然后呢，原来我是在 monte 里设置的这个引力的 y 六，这回呢，我们把它改成 before mont， 我们来试一下啊， 刷新一下看看，我随便改两个重置他也可以。但是呢，这个方案还是有一些局限性的，为什么呢？因为我现在是为了演示啊，这些负值的代码都是写死的，大多数情况下，我们在这是需阿加克斯查询，然后一步写进来， 如果是异步的话呢，代码是不等的，你这还没付上值呢，这边 mont 就走了。好，最后呢，还是老规矩，这个补丁文件的代码呢？我还是放到 gap 上，然后这个入口呢？我也会放到幺零二四 box 里面。

当你在开发当中遇到这样一个错误的时候，一定要引起高度的重视，因为这个错误在提示你，你的代码有严重的质量问题，那么这个错误是怎么发生的呢？他在提示我们什么呢？咱们来调试一下，好刷新。组件结构非常的简单，就一个 app 组件，里边套了一个星级评分， starrate， 也就是这一部分。 目前呢，这个是大瑞士组件啊，他有两个属性，最大的星星数量，最终选择的平分值，以及呢当前显示的平分值，这个玩意是自己的数据，这两个玩意是属性外边传过来的。 好，咱们来看一下到底发生了什么事，注意看，当我的鼠标在上面移动的时候，看下边啊，这个修 value 的值是不是在变化，对吧？他表示当前显示的，当我们鼠标移开的时候呢，你看他又恢复到这个 value 的值，他把 value 的值重新复制给修 value 又恢复 过去了，目前没有发生任何的错误，因为自始至终我都是改的他没有问题的，咱们继续看。现在呢，我们继续移动鼠标，比方说移动到这个地方，接下来我进行一次鼠标点击，点击好，这个时候 你会发现这个 y 六的值啊，发生了更改。为什么会发生更改呢？是因为我写了这么一段代码，在 starrate 组建里边呢，我注册了一个点击事件，当点击的时候，我看一下你点击的是第几个星星，然后呢，把 y 六的值重新复制，就做了这么件事。于是呢，他就给我们报了一个错误， 这个错误他就在提示你，你在组件里边千万不能直接修改属性，你修改自己的数据没有问题，但是呢，你不能去直接修改属性，那么他为什么会有这样的一个规定呢？咱们来看一张图，这是我们目前的组件结构，本来 是好好的，在 app 主界里边有两个数据，一个是最大的满意度，一个是当前选择的满意度，你看代码，你看是不是两个数据， 而这两个数据呢，是作为属性给子组件传递进去了，于是呢，在图里边就表现为这种形式，最大的平分值传递给了子组件的 max， 当前的满意度传递给了子组件的 y 六。数据是这样流动的，那么子组件呢，就可以正常渲染， 可以想象的到将来呢？如果说副组件因为某一些原因，这个玩意变动了，这个玩意变动了，我们知道无用，是带数据享用式的，所以说他一变动吧，他就会重新渲染，这一重新渲染吧，他就会重新给植主件传递新的数据，重新传递新的数据。 而植树件的数据编了植树件，它也会自然的重新渲染，这是一个正逻辑，没问题。那为什么现在要爆出 呢？就是因为你在值主线里边监听了用户的点击事件，这个监听是没问题的，但是你在监听的时候，你直接改动了这个属性 y 六的值，这样一来就会导致这个属性 y 六的值啊，不仅仅是来源于这一块了，他可能还来源于别的地方了。 那么最直观的问题在哪呢？就是这个值现在变得和副组件这个赛季示范他不一样了。咱们马上来看一下，你在直组件里面改了这个八六值，然后你会发现在副组件里边， 这个 satisfi 仍然是八，你看这个值，它显示到这的时候还是八，是不是数据不一致了？这个问题是很严重的哦，你这只是一个非常简单的星级评分，那么将来我们在页面上可能有几十个上百个组件，如果说你到处的组件都充斥着这样的一个问题的话，整个页面的数 倒数是不一致的，那么到时候你调试是极其困难的。其实这都还是问题的表象，问题的根源在哪呢？是无用框架也好， rex 框架也好，都有一个原则。什么原则呢？就是只有数据的拥有者才有资格修改数据， 说这个数据是属于谁的，谁才有资格修改你，其他人不能乱修改的，不然的话，有一天这个数据出了问题，你会发现有一百个主角都在改这个数据，到底是谁弄的问题？找不到责任人了，你就没有办法调试了。 那么在这个场景里边，你看这个图，这个白酒的数据哪来的？哪来的？来自于副组件的这个数据，那么这个数据是属于谁的？是属于 app 的，那不好意思，只有 app 组件才有资格来修改这个数据，其他任何人不得修改。同样道理，像这个数据是属于谁的？是 starrate 的，那么只有 starrate 才能有资格 修改这个数据，其他任何人都不能修改这个东西。这样就保证了每一个数据的变化，只有唯一的一个责任人就是数据的拥有者。将来要调试的时候，数据出了问题，我就问你，对啊，这个数据是你的，那我就在观察你到底是怎么改这个数据的，是哪一部改的时候出了问题， 我就不用东找西找每个组件去看一遍了。这些原则都是在实际开发当中出了无数次掉头发的问题才总结出来的原则，你千万不要打破啊。 但是我发现了，很多公司的前端开发者根本就不注重这一点，有的时候为了图方便，就直接去改他的属性，改了，当时好像没有什么问题，但是呢，这一改，你的代码很快就会变成十三， 快的速度远远超乎你的想象，可能不是今天，可能是明天，可能是下周，直到这个代码没有办法维护，然后你就辞职了。之。这都是无数次 发生的真实故事，所以正确的做法应该是什么？你不能去修改这个白六，这个白六的值来自于副组件的数据，这个数据是属于副组件的，所以要改变这个值，永远是副组件变了，然后副组件刷新，然后几年导致 直组件跟着刷新。在属性的数据上，数据的流动永远是从副组件流动到直组件的，直组件没有权利去修改副组件的数据，这叫做单向数据流。无论你学的是 view 还是 raise， 单项数据流这个概念和原则都是极其重要的，千万不要去打破它。那么我现在问题就来了，我这里不能去修改 vio 了，那我这里代码写啥呀？当用户点击的时候，我到底要做啥呀？哎，这就会涉及到主见的一个非常重要的新知识，这个知识呢，我们留在下节课来进行讲解。

推荐一个写 cs 样式的神器，让你爽到飞起。首先我们打开我们的 vitcod 选择插件市场，在这里面去搜索这个关键字，能看到 是这个插件，这个插件虽然安装量不是特别多，那么它是干嘛的呢？它可以根据 v e 文件的 temperin 结构自动的生成你的 c s， 不管是萨斯还是 les 都可以。安装完了之后 给大家做一个演示，比如说这个是我一个 voe 的项目，那么这个是他模板里面的这个元素，如果我们项目里面这个模板里面的克拉斯这种层级欠套是非常深的，写代码的时候我们可能会一个一个的去写， 这样写效率是非常低的。你可以刚才安装那个插件，他可以派到用场了。右键右键之后他这里面有一个菜针，就是刚才安装这个 插件的拆车看，我们选中它就可以自动的给我们生成 cs， 我们没有必要把时间花费在这个 cs 成叠样式的这个选择器上，这地方可以是 nice， 也可以是萨斯，都可以，比如说我改成萨斯让我生成一下， 这地方是 c i s， 那也是可以的。那么这是一款非常好用的插件，能够一键生成我们 c i s 样式的成绩大大的提高我们的工作效率， 有需要的话可以按照我刚才这种步骤去安装一下。如果大家有什么好用的插件，可以评论区留言一块分享一下。