vue3如何兼容IE6

浏览器的兼容性试图是怎么回事？以及如何设置？需要认清事实的是，在浏览器里设置兼容器试图只针对癌症浏览器，其他的浏览器都没有这个说法。为啥癌症有一个兼容性试图呢？大家都知道癌症有六七八九十十一六个大版本， 但是吧，由于各个版本之间多多少少有点不一样，所以就整了这样的一个功能出来，使 ie 高版本能够正常的显示网页网站，而不至于兼容性出错。对于一些需要使用 ie 插件的，或者还在使用 ie 浏览器跑网页系统的单位啊，企业啊， 还是需要使用 i e 的，那怎么设置呢？在 i e 十一里边，点击齿轮的这个图标，点选兼容信师图，设置在添加此网站下面，输入要使用兼容信师图的网站网址，如果已经打 拍的网站呢，会自动显示在这里，点击添加，添加到下面的列表里，在这个列表里添加的可以是网站的 ip 地址，也可以是网站的域名 i。 一在打开网站的时候，对于列表里的网站 会自动的使用兼容信试图的模式，但是呢，以前 i e 还有个选项在兼容信试图中显示所有网站，这个呢，建议大家不要选中，因为在现在非挨议浏览器横行的时代， 如果使用这个选项，很容易造成大量的网站应用显示不正常的，这个我们要斟酌的来使用。

quizar 以外是一个不被大众熟知的框架，目前 github 已有二十三点八 k star 基于 mit 开源协议在 github 上开源， 任何人都可以免费下载，免费用于个人或商业项目。至于为什么选择 kiss 二，官方给出的答案是开箱即用的。对桌面和移动浏览器，包括 ios， safari 的最佳支持。 通过与我们自己的颗粒紧密集成，对每种构建模式， spa s s r p y。 移动应用程序、桌面应用程序和浏览器扩展提供了一流的支持，并提供了最佳的开发人员体验，还有包括性能在内的一系列优点。他还提供了一些指令来调用 api， 以及内置了一些插件和组合式函数。 z n t y 是有赞前端团队开源的移动端 view 组建库，适用于手机端 h 五页面。个人认为 z n t 的整体风格算不上太出众，但它的组建和功能却非常实用且稳定，七十多个高质量组建覆盖移动端主流场景。 另外，不依赖不依赖三方 n p m 包支持 type script 和 s s r。 提供了 view 二版本、 view 三版本和微信小程序版本，并由社区团队维护。 react 版本和支付宝小程序版本 相对于 element plus 大家就再熟悉不过了，由饿了么前端团队开发和维护的，目前还处于不断更新迭代的状态中。 element plus 已经把 view 的版本锁定了三点零级以上。由于 view 三不再支持 i 十 一， element plus 也不再支持二亿浏览器，相信大家应该都有使用过该 ui 库，这里就不过多介绍使用过程遇到的问题可在评论区聊聊。 相比于 element plus， ant design 在组建方面有着非常大的优势，不过使用稍微复杂了点，但是换来更大的便利。 两个框架都是目前较为主流的 ui 框架，各有优劣，可根据项目具体需求选择。官方文档提供了 type script 和 javascript 两种使用方式， 还提供了进阶版的表格和表单。组件里面的功能还是蛮强大的，并且对各功能都进行了单独的导航。 nae viewe 是一个仅支持 view 三的库，有超过八十个组件，希望能 帮你少写点代码。该库曾得到了 view 作者尤大的极力推荐，属于新生代的 ui 组建库。官方提供主题编辑器，不用繁琐的 s s s c s s 变量，也不用 web pack 的 loaders， 使用的是由 typescript 构建的先进的类型安全主题系统，运行快，小巧清亮，专门针对样式优化，不需要导入任何 css 就能让组建正常工作。至于缺点，自己去体验吧。

在我们的工程目录里边，有一个文件叫做 babyconfig ds， 当你使用唯有脚手架搭建工程之后，就会生成这么一个文件。这个文件到底是干嘛用的呢？它其实是 baby 的配置文件， 这个工具啊，它不仅仅是可以用在 vivo 里边，像瑞 x 啊，或者是一些传统的开发项目。比方说起华为这种，也可以使用 babobabo， 它的名字呢，来自于巴别塔，象征着语言的统一。在我们前端开发里边，兼容性始终是一个绕不开的话题， 每个浏览器他能够识别的语言版本是不一样的。这种不统一的语言造成了开发者在开发过程中不得不去考虑代码兼容的问题，造成了很多的心智负担。有了这个工具之后啊，他就能够帮我们把任意版本的介石进行编译转换，转换成为你想要版本的代码。比方说你 写了一个 e s 二零二二年的代码，他可以把它转换到 e s 六或者是 e s 五甚至更低的版本。因此在官网的第一句话就告诉你了， baber， 它是一个加 boss crypt 的编译器，我们可以快速的来浏览一下它的作用。比方说左边呢，我写了一个 e s 六的 class， 结果呢，他把它编译成了右边这个样子。 所以啊，北宝对于我们来说，他不仅仅是可以作为一个工具来解决兼容性的问题。在学习前段的期间， 我们也可以利用这个微博的编译器啊，来观察他编译过后的结果，从而来学习某一些语法， 托罗斯某一些 api。 他的实现思路从我们面试里边经常考到如何把 es 六的 class 转换成 es 五的语法，那么微博呢，就是一个非常好的参考。再比方说，我们在一些框架里边可能会使用一些特殊的语法，比方说 rex 里边，我们可能会使用这样的一个语法，这个玩意叫做 gsx， 那么你只要给 babo 一个相应的插件 babo， 它就能识别这样的语法，从而把它转换成更加符合 gs 代码的格式。又或者我们使用了 esc 的而 sink 和而位置，如果说你要兼容更老版本的浏览器的话，那么你可以使用 babo 来进行转换，做一些相应的配置， 他就会去掉这些新版本的关键词，转而使用普通的代码结构来实现。在我们面试里边也经常会问到啊，而甚可和和位置他到底是如何实现的？那么微博呢，也是一个非常好的参考， 在整个工程化里边遇到了问题，非常非常之毒，兼容性只是其中一个问题，这个问题呢，已经完整的被 babo 解决掉了，所以将来在我们开发的时候啊，我们再也不会为兼容性的问题过多的去操心了，交给 babo 做一些相应的配置。 当我们可以把更多的精力放在业务上，背部是整个前端工具链中的重要一环，当然前端工具链上还有很多很多东西，接下来我会慢慢的为大家介绍。

好嘞，这节课呢，我们再来学习一个新的东西啊，它叫 pina， 那首先确定一点， pina 呢也是 view 中的状态管理，那么上节课呢，咱们正好学了 view x， 而且呢，我们在 view 二的时候呢，都是用 view x 来做状态管理的， 现在又有一个 pina， 他也是做状态管理的，那到底我要用哪一个状态管理呢啊，这个呢，是根据你的业务， 你的场景，你公司所处的环境进行选择的。那我们先不说这些东西，我们先来说一下 v o x 和 pina 具体的区别， 当你了解了 vox， 当你在了解了 pina， 然后再知道他们区别的情况下，根据你的自身情况和你公司的环境情况进行选择，到底使用哪一种这样的状态管理的一些工具。好吧，那下面呢，我就废话不多说了，来看一下 vox 和 pina 具体一些区别啊，那这样呢， 写了一个文章，大体的给大家总结了一下。好，我们来看一看啊，那首先呢，这有一个参考的一个网址，那在这个网址中呢，官方已经说的非常非常详细了啊，就在这，我把这网址呢也列出来了，大家呢下去可以点下去看一下啊，我把这个参考网址也放到我们笔记中吧， 这是 view x 和 p 两的区别。 好，这是一个参考的网址，那下面呢，我给大家大致的整理了一下他们的一些区别啊。首先呢，这个 pina 呢，它也支持选项是 a p i 和组合式 a p i 的写法啊，这个呢和 v x 一样， v x 也是支持的对吧？好，然后其次呢，就是 pin 呢，它是没有没有贴身子的 好，注意，我们的 view x 呢，是有 mutation 和 action， 它里边可以写方法对吧？并且 action 是提交 mutation 的。好注意，在 pina 中呢，是没有 mutation。 真的啊，只有 skate， gets 和 actions。 好，只有这么三个东西。然后拼价呢，他也不需要通过 models 来分模块。我们之前呢，使用 v u x 是不是要通过 models 来分什么 store 模块呀？呃，就是分这个 user 模块呀，或者说购物车模块等等这样一系列模块啊，在拼价中呢，是不需要去进行模块的划分的 好，然后呢， pina 呢，也有 typescript 很好的一些支持啊，然后呢，它会自动化的这个代码拆分。然 pina 呢，它的一个体积更小，也说它的一个性能会更好。好，下面呢，我们把这个大致的一些内容呢给它放到这啊， 呃，那我就给大家列举这么几个比较重要东西吧，它是没有 mutation 的啊，然后是不需要分模块的啊，然后其次呢，就是它的体积更小啊，我把这三个内容呢给大家罗列到这啊， 这是三好，我把这两项就删了啊，那大家呢，主要知道这三点就可以。 ok， 那这是他们具体的一些区别。 好，那我们知道他区别完事以后呢，下边，哎，我们来说一下他到底该怎么去用啊？其实呢，如果说你会这个 vivo x 啊，那这个 pina 呢，你的学习成本并不高。然后呢，这我还要强调一点啊， 不是说所有项目都要用到 pina 啊，不是所有项目都要用到 view x 也说 pina 呢，根据你的情况去进行选择去用， 千万不要把这东西学完以后捆绑好吧说，哎，我这项目必须要用拼讲，你要了解他们的区，这个区别就是优点跟缺点，然后进行选择。还有刚才我说到了跟你的业务来，是吧？这个东西太卷了啊，就是又出个 vox， 刚弄明白了，又出了个拼讲，知道吧，然后又学拼讲， 而且很多大厂呢，其实有些东西他不 care， 就是说这东西呢，在我的开发阶段呢，能给我提升很多，但生产阶段能不能提升很多，这个就不确定了。所以说呢，这个就是仁者见仁智者见智啊， 别让这个培训机构或者说一些营销人所影响你的思维啊。好，那我这呢需要给大家声明一点啊。行，那下面呢我们就具体来看一下拼价的一个使用啊。来使用， 那刚说了，它里边呢有 state getters 和 actions， 对吧？ state getters， actions。 好，我把这三个呢都给大家去说一说哈。 来，首先呢，这个 pina 呢，我们需要去安装啊，那我先把咱们之前那个项目的内容呢都给他打开，然后把这里边的东西呢稍微删一删啊，这有一个 a 组件，这里边的数据呢，我就全不要了，写的内容我就都不要了，全不要了啊，然后呢，这有一个 b 组件，我给他删了吧。 呃，然后这里边有一个 home 啊， home 中呢，我把这些东西都给他删了，都不要了，引入了一个 a 组件。好嘞，基本上这么个情况，然后这儿有个 store， store 内容呢，我也都不要了， 这个 index ts 先留着。好吧，那然后下面呢，我们就来说 pina 的一个具体的使用啊。好，我这呢也写了一个文档啊，提前写的，咱们来看一下。当然 pina 呢有它的一个官方的一个文档啊，官方的一个这个内容啊，我这呢也给大家放到这，这是官方网址。 好，更多内容呢，大家可以看他的官方网址，然后在这呢有一些基础的使用啊，那我们可以点击到这个地方啊，然后看一下，这呢你需要去安装啊，然后呢进行一系列的配置，然后就可以去用了。当然呢，我这呢做了一个总结，大家就可以直接看我这了啊，我就按照我这去说了， 首先第一步呢我们要去安装它，比如说一二的或者 n t m 都可以哈，那下面呢我就先去安装它来啊，这是我们的第一步安装。 ok， 那第二步呢就在 mate g s 中进行引入， 嗯，我把这个项目启动起来，然后看一下啊，这呢我也都写的比较详细了，算了，我把我这个网址一会给大家复制粘贴过来吧，我就不在这去写这些内容啊。嗯，具体使用。 好，那就大时候大家看这个地方就可以了啊。好了，我们来看一下具体一个使用啊，那在 mergs 中呢，我们需要去引入啊，那我们现在呢跑到这个 mergs， 好，那现在呢 store 就不用了，对不对？那我就把 store 呢给它删掉 啊，这呢有个 store， you store 我也删掉了哈，然后这呢我们先得引 part 引入进来，然后呢我们在 yos 一下啊，他是这种写法，那我们就直接这么去写就好了。好，那我们这呢也就引入过来了。 ok， 那引入过来以后呢，我的这个网页就不应该报错是吧？嗯，刚才呢会出现一些错误啊。 ok， 好了，下面呢我们再继续看。那怎么样去用呢啊？也是一样，在这个 store 目录下不是有一个 index g s 吗？对吧？这里边呢我们会写很多内容。呃，首先呢要按照它的格式 input 啊， define the store 啊，然后 from 啊，这有一个啊，呃， p 呢，是吧？然后呢再往下 啊，这呢有一个 asport const 啊，叫 you store。 然后这个地方呢是一个 id 啊，这个 id 呢必须是唯一的啊，所以说呢，你要写到这儿，然后你看这个地方啊，就会定义 state 呀， getters 呀， actions 呀。 好，那我们就先来看 state 啊， state 呢，这个地方和原来不同，我们的 v o x 呢，哎，这个 state 是一个这样对象，对不对？他这呢是一个箭头函数，然后 return， 哎，这里边写一些内容。好，那这样吧，我这就写一个 n y m 吧，它值为零， 当然你可以写很多，比如内幕呢，为张三啊，都行啊，随便。然后 a 制呢，为一个十八。无所谓啊，我就写两个吧，别写太多了。好吧，那这是我定义的这个数据，好定义的数据，我现在要在 a 点 b 中，怎么去用呢？啊，那这呢，我们要写成 set up 这种形式啊， 好，来看文档，那在这呢要使用的话，你就得 inpult 一下啊，其实和 v o x 呢差不多，你看啊，我们的 v o x 呢是 inpult， 然后这儿有一个什么 use store， 然后这儿是 promo v o x， 对不对？然后这儿是 const store， 等于 然后呢他加一括号，这样去用，你看这个 pinia 是不是一样的，几乎是一样的。好了，到这呢我们就可以 ctrl 点 log 打一下这个 store 啊，看一下这个 pinia 里边那些内容啊。来到这， 好，他这呢是一个 pro c， 然后这里边呢有很多的他的一些 api， 比如说 id， 你看这个 id 呢，就是刚才我们定义的 id 啊，就在这个地方， 在这。好，然后接着我们再看啊，然后这里边呢还有什么瑞赛特是他的 api 啊，这是重置啊，然后这个呢就和那个监听是差不多的。呃，然后呢我们再来看这里边的这些数据啊，那他的数据呢是在这啊，大家看 是吧？内幕以及 am。 好，那现在呢我要呃去用到这个内幕以及 am 该怎么办呢？你可以再让他进行一个呃这样的复值，或者说结构都可以。那我们先可以直接 store 点 am 啊，或者说我们 store 点儿呃，这个内，那这样的话呢，它就会在页面中呢进行展示，大家也看到了啊， 在这是吧，这个零和张三呢已经进来了，不过一般来说我们不会这么做啊，因为这样呢前面都加个 store 也太乏了，是吧？我们可能呢会结构啊，比如这有一个 name， 这有一个 a o m， 等于这个 store 等于这个 store， 然后这儿的话呢就写 n m 以及 name 就可以了。好，我们再来看，首先 啊，这个地方的一个零以及张三，他完全没有问题啊，也可以展示到页面上，但是呢这其实是有问题的啊，就是说你如果说单纯的展示啊，没问题， 但是呢你要这在这个本这呢进行修改，他是不能修改啊。对了，咱们这个笔记中呢，还少了一项啊，少了一项就是， 呃，这个 pina 呢，它可以直接修改 state 数据，就是我们的 vivo x 呢，它是修改一个数据，需要通过 mutations 啊进行提交去修改这儿的这个内幕，或者说 a y m， 对吧？就修改这个 state 数据， 但是我们的批量呢，他是可以直接进行修改的啊，直接进行修改的。好，下面我们来试一试啊，比如说我这有一个修改名称，好，然后这呢有一个，呃，叫称职这个内容吧，好吧，或者就啊算了，就称吧，然后我们这呢来进行一个修改，看一下能不能改啊， 那我们就把这的一个内幕原来是什么张三，我给你改成李四啊，那这样的话呢，他是不能进行修改的，或者修改他也是有问题的啊，咱们来看啊，他不能进行修改。好，那有人就说了，你不是一个 property 吗？你要加 好来刷新。好，那这时候呢，我们再去点一下，你看他就会出现错误，什么意思呢？就是如果你这样去结构的话呢，这个数据呢，他不是一个响应式数据啊，所以说呢，我们要啊结构的时候需要做一个另外操作。好，大家来看， 我们在下边，嗯，给大家找一下，在这个地方啊，要通过它的一个 a p i 叫 store two r e f s。 啊，这个呢其实在它的文档中呢也有说明啊，我们可以去看一下， 在它的下边这儿有个 store two ifs 啊，在这个地方。好，那这个框该怎么去用呢？好，大家来看啊，我们这儿呢需要去引入啊，需要去引入 store two ifs， 然后拼拧好，然后呢这个结构的话 呢，我们需要这么阔起来，就跟那个我们那个 two r e f s 是一样的，就是引 pro， 然后 to r e r e f s， 对吧？然后什么 promo biu 啊，这是一模一样的，就是我要通过这个东西呢进行结构，那这样情况下呢，就可以修改了。好，来，我们试一下，回到我们页面中刷新一下。 好，稍等啊，然后点，你看，这就改了啊，这就改了，大家要注意，在我们的 view x 中，你不可以在组建中直接修改 style 的数据，不可以的哈，我们通过 mutation 进行提交才能进行修改啊，但是在 pniar 中呢，我们可以直接进行修改。 好，这就是不同的一点，对不对啊？这就是不同的一点。呃，然后再往下呢，就是，哎，现在呢，我可以去改这个地方的一些内容，对吧？哎， 改他，那当然有的企业朋友就会说到了，我能不能借方法提交呀？啊？方法先修改呢，也是可以的。那后面我会说 actions。 好吧，那到这呢，我还要给大家说一个需求啊，就是说我们可能会改两个值，比如我们这呢会改一个内幕啊，他为呃这个 a m 吧 点 value 啊，然后它为一个零，现在呢，我要改成一个十，是吧？刷新， 好，稍微等一下点，哎，这俩就都改，对不对啊？这俩就都改好，那我们在做一些业务上呢，可能，呃，比如说这用户登录了，我们会要把他的状态为处，要修改他的 user in four， 或者说会批量的进行修改这样的一些数据等等这样一些内容。那除了这种批量修改方式呢，其实还有批量修改方式啊，就是刚才我们看到 一个 a p i， 它 a p i 里边呢，是有一个这样的方法的，在这有一个批量更新的一个操作，我们可以把这个呢给它干掉啊。 好，大家看，我们用到了 store 啊，这个东西有一个 patch 看到了吧，然后这儿呢就可以批量修改，什么意思呢？呃，就好比说我现在呢要改你这个地方的一个内幕和 n m 了，那我就可以这么去写啊。看到啊，这儿呢就是 n m 哎， 我加加呗。好，然后这样内幕呢我就改成一个赵四是吧，或者炸雷随便。好，这样呢也可以实现一个批量的一个更新啊，修改好了我们回到这个项目里边啊，刷新一下 啊。点，你看这也就改啊，点点点点点是吧。这个一直在进行修改一直在进行修改啊。所以说呢，你批量更新的话呢，你可以 用他的 api 也可以说直接这么去写，这个就随便大家了啊，这叫两种形式哈。两种形式。好了，到这呢我们就先总结一下这个 state 吧，和 view x 不同点是什么 啊？除了写法以外啊，它的写法这儿是个箭头函数对吧？ v x 呢是一个对象。除了写法以外我们的 pina 是不是可以直接修改 s date 的数据啊， 对吧？但是我们的 vivo x 呢是不可以直接修改 state 的数据的啊，需要通过每个 titchen 提交才可以哈，这是一个不同点。好，我们了解了这个 state 啊，这个 state 无非就是定义我的数据嘛，对吧？好，然后再往下呢，我们要说的是这个 gettas 了，来看一下我们的文档 gettas get 四呢，它作为一个计算属性，我们知道 get 四呢它有缓存对吧？好，在这呢我们就来写一下这 get 四啊。这个呢就和 view x 是几乎一模一样啊，比如说我叫他称之 a o m 吧，好吧，称之 a o m 或者我叫呃呃，就是称之 a o m 吧， 来我看看这个地方啊，这是称 name 啊，没问题，称至 a o m。 好，然后呢我在这 return 一个。呃，我每次 我让他直接改一个值吧，就是说这有一个 nm， 对吧？然后我直接的给他加一个一千啊，随便。 好，然后在这呢我再给它 console 点 log 打一个 gets， 我为了证明它是有缓存的哈，它是有缓存的。 好了，现在呢要用这 gets， 因为它是一个计算属性啊，所以说呢，我们这儿也得给它结构一下啊，也得给它结构一下，然后呢把这个趁着 a m 就这 gets 给它放过来。那是不是它展示结果是一个一千啊？来看一下， 稍息。好，咱们稍微等一下啊。好，这有一个一千，这有个一千，这有一千。那在我的控制台里边呢，只会打一个 get 四，因为这个东西呢它是有缓存的机制的啊，所以说 get 四呢，几乎没啥可介绍的啊，和我们的 vivo x 呢 啊，几乎一样。好，然后下面呢我们再来说一下这个地方的一个 actions 啊， actions， 我觉得 up l m 版 actions 呢是写方法的，他同时支持同步以及异步。好吧，那在这呢我们可以做一个这样事，比如说我要给他进行一个加值，行吧，那就加等于一个百六吧，然后我这呢传一个值， 这个呢几乎也是和我们之前一模一样的啊，只是说参数的形式可不同啊啊，但是呢这个也比较好理解，或者说也比较好用， 因为我们了解了 vivox 里边的什么没有天线 action。 那这个东西方便啊，就是传那个值嘛，对吧，这个传是什么？然后他又会加等多少嘛？ ok， 好，到这呢，我们就来一个 button， 我说，呃，这是加等操作吧。好，我们这样呢，来一个 click， 就叫 b t n 吧，好，往下走， const b t n 等于 好。然后呢，我们在这呢，需要用到什么呢？用到刚才那个方法，那个方法呢，就叫 up n m 啊，好，传什么值呢？我传一个二百吧，随便举个例子啊，传个二百， 好，当我点击的时候呢，就会执行这个 up a m 啊，来，我们看一眼，刷新。好，大家一定要注意，我们的 其实值他是为零，当我点一下，那他就加等是吧，每次加等二百，哎，他会不断的更新，不断的更新啊，当然你传的值是多少，他就会进行 y 六啊，这 y 六呢，就是那二百不断加等 啊。所以说呢，我们这样总结一下，就是这个 gettas 呢，没什么变化，几乎是吧， actions 呢，也没有什么太多的变化，无非就是传值嘛，啊，参数不同而已啊，和 view x 进行对比的话是吧。然后呢，这个拼压里边呢，它是没有没有切线的啊，只有一个 action action 呢，同时支持 e 步以及同步的操作 好，然后呢， state 是有变化的，就是说我们要在组建中修改 stat 数据，可以直接改，不用通过 mutation 啊，这样提交方式进行修改。好，这就是 pina 和 v o x 具体的一些小小区别。好，那么希望大家呢，对于 pina 呢有一个简单认识和了解， 大家下去呢也去玩一玩啊。当然啊，我们还没有介绍东西有哪些呢，就是 api 里边呢，怎么样去分模块啊，是吧啊，怎么样去做持续化存储呀啊，它里边 api 具有哪些呢？啊，那这样呢，我先给大家去说一下 api 这个事情吧， api 里边东西呢？呃，挺多的， 也还好吧，不是特别多啊，我们可以看一下。好，到这我们就打开这个控台来看一眼啊， 在这呢，其实刚才我们接触过一个这个玩意，他不是批量更新的吗？这有个 reset 是重置的，就是说我只要调用这 reset， 那你就是加等到这个六八百了，对吧？一点重置 就用这个方法，那他就回到稀释位置啊，就回到零了，我们可以测试一下啊。呃，在这呢，我就给他来叫 reset 吧， reset。 好，咱们就使用一下这个方法，不过这些 api 呢，使用的场景不是特别的多啊，我就给大家一带而过了。 reset 好，来我们试一下，你看啊，我不但加加加，加到一个两千四，对吧？咔回去了， 这是重置的，然后呢这个东西呢大概意思呢是做一个你你可以理解成就是个监听处理的啊，监听处理的像其他其他的一些 api 呢，使用的情况来说呢，并不是特别特别多了啊，那这样呢，我就 不做不做这个过多介绍了。大家呢可以去看到 a p a 这块啊，去看 a p a 这块，那我们正常的使用话来说呢，就是它的一个啊，正常的使用对吧？怎么安装，然后这 st 怎么用？然后 action 怎么用啊？改点词怎么用啊？就玩这些东西。好，那么下一课呢， 我们再来说怎么去分模块吧。好，这节课有关于我们这儿所说的 pina， 一个简单的认识和 vs 区别和基础使用，我们就先说到这里。

element plus 是基于 vivo 三的组合式代码风格进行开发的，所以我们几乎没办法通过继承来修改或者定制化它的组件， 所以呢这种情况我们就只剩下一条路，就是我们基于他官方的原代码进行二次开发，顶多呢就是我们定期的合并他官方的发行版。其实很简单，首先呢我们先把他的原代码克隆下来，这块我已经克隆好了，在这里哈。然后呢我们先做一件事，就是我们创建一个分支，我这里叫 my 二点三，为什么呢？ 因为大家看他现在的最新发行版是二点三点一四，我们呢就不要最后这个小版本了，我们直接到二点三以后的话呢，我们定期合并他这个小分值，比如他二点三点一五发布了，我们还把他的二点三点一五合并到我们这个二点三的分值里，然后就简单了，我们就任意的改他的原代码就好。 好了，改完之后怎么办呢？我们用 p n p m， 注意它用的是 p n p m， 包括你意思带有的时候，然后 p n p m build， build 完之后呢，我这已经 build 好了，他会生成一个 distant 目录，目录里有一个这个 element plus 目录，这个目录就是未来我们项目需要引用的那个 element plus， 怎么把它引用到项目里呢？我给大家分享三种方式，大家根据自己的情况去选择。第一种呢就是我们把整个这个目录啊 放到我们的项目里边，我这块呢已经放过来了，我建了一个叫 depth 的目录，把刚才那个目录拷 pit 过来，我这已经拷 pit 好了哈，下边这个先不管他， 然后怎么做呢？大家看，我现在用的是一个普通的 button， 就这儿一个普通的 button， 然后呢，大家看啊，我把它原码里稍 稍微做了修改，在这加了三个等号，就是在这个文字前面， slot 前面。然后呢，我现在重新安装一下爱了们的 plus， 用，我打包过来这个安装。首先呢，大家看啊，这块引用的是 官方的 element plus， 我先把它卸载掉 instyle 好没有了，对吧？然后呢，重新 instyle i element plus， 注意后边加空格，点 depth， 然后 ilement plus， 这样就可以了，指向这个目录哈，我们回车， ok， 大家看，这块的路径就变成这样的了，我们再来试一下 mpm 软， 刷新一下，大家看他前面就有那三个灯号了，说明现在用的这个 button 就是我们刚才改过原码的那个 button 了。 那第二个方法呢，就是大家也看到了，我们需要把刚才这个 element plus 目录打包成踏点儿 gz 文件，怎么做呢？就是踏儿 z c v f， 然后呢起个名，然后注意有一个杠大写的 c， 然后呢选中了刚才这个目录，最后有个点注意这个杠 c 很重要，这样的话他生成的这个压缩包中不会有这个 element plus 这个目录，否则的话你在 npm 安装的时候总会爆，找不到 package。 好，这样打包完之后呢，他就有这个文件了哈，我们把这 这个文件放到我们其他的项目里，像这样代不死，然后点踏点 g z， 然后这会我们把这个文件先删掉哈，我们为了测试停一下，然后还是我们先把这个 nstyle 一下，卸载一下 pm， 好，我们重新安装 i element plus， 这回我们点 tar， 点 g z 好，安装好了 m p m run， 我们再来试一下，刷新一下，大家看也是一样的效果。那这个方法相比直接复制目录过来有两个好处，第一就是磁盘空间，我试了一下，他大概节省了十倍的磁盘空间。第二个呢， 就是这种压缩包，我们可以避免不小心修改到里边的代码。第三种方法就是我们直接把这个目录放到公司的 get 私服上面，或者 get up 上面，我这里边拿 get up 举例哈， 我在我的 github 上创建了一个 my element plus， 然后呢，把这个目录直接放上来了，而且我们放上来的时候注意我们还可以 打太个，比如这是二点三点一四，我又加了个点幺，未来我再改就是点二。然后呢，我们还是在其他项目做安装的时候这么做，我还是先摁一下， 然后呢，我们复制 dtap 这个目录， h t t p 的就可以哈， n p m i element plus， 然后把刚才那个链接直接粘过来就可以了，如果你想带版本就加， 加上井号，二点三点一四点幺回车。 ok， 安装好了，大家看格式就自动变成这种 get up 冒号了，大家注意这是 no 的，十六版本以后会是这样，十四版本的话他就不是这样，他就直接是这样，哎，他一直加上一个 tps 冒号 get up 是不是嘛？ 然后呢，我们不管他啊，我们再来 n p m 软一下，我们看下效果刷新啊。对，这个我刚才打包的是两个减号的版本，不是等号哈。

好，这一课呢主要讲内容呢，就是基于 wait 这样的构建工具，在 v u 三的项目中呢，如何去设置代理来解决跨议问题？然后呢咱再顺带角的把 excel 四二次封装以及 a p i 解五呢，都给它顺带一下哈啊，毕竟 excel 四二次封装呢，美公司可能针对于他们需求呢，封装不一样啊，我们这呢就稍微带一下就得。 好，那首先呢，咱们先说第一个事情啊，就是来设置一个代理，那在 wit 中呢，设置代理是比较简单的，我们可以看一下这的一些内容啊，这是我写过的一个文章啊，首先呢我们要找到 wit 点 config 点 g s 这个文件啊，那我把这个参考文章也给大家放到这，这是一个设置代理 啊，解决这个跨域问题，那在公司里边呢，肯定是你要做这个代理，甚至还要做什么这个环境变料，然后以及 xs 工装是肯定的，对吧？ api 结果这些东西是必须的啊，然后这呢就给大家 弄一个参考文章吧。好，那下面呢，我们就按照参考文章呢去设置啊，来，我这样的设置可能是比较简单的，我们就直接去用就行了。那你公司里边呢，可能每一个 api 都不同，对吧？不是，可能是肯定不同的 啊，然后呢，在这呢，你把那个 api 呢给他添加到这就可以了啊，对应的这个网址啊，或者是 ip 啊，那我这添加的是咱们这个学习路线点私人这个网址哈。行，那这样的话就 ok 了，我然后我们把项目呢给大家重启一下，启动完事以后呢，我还会做 xs 二分钟，对吧？那这样呢，我们就新建一个目录啊，是一个工具类。 好在这个工具类里边呢，我新建一个 requested g s 啊。啊，这里边呢就是有关于 x s 二次封装的内容，那我就把这呢整体给拿过来了，那在这呢我强调一下，就是在 v o 三里边呢，它除了新增的什么乱七八糟那 东西啊，那 xs 这块或者 api 这块啊，他并没有一些东西，因为 xs 不是属于 vivo 的，对吧？啊，就是说你在这个上面里边可以去用，你在任何地方都可以用 xs 啊，所以说呢，他没有任何的改变哈，这点大家要切记啊，就是很多小伙伴会问到这一点啊。行，我就把 xs 给他下载一下。 好，下载完以后呢，我们重启一下，那他先下。哎，下载完了哈，那我们这就直接说吧， inpuls， 这不用说对吧？这是创建一个 excel 对象，然后这是一个请求拦截器，我这也没有做一些功能啊，就是大体的一个东西，这是一个架子啊， 然后这是一个响应的拦截器啊，然后你这样呢可能会判断很多的扣的码，那你就自己填就好了，好吧，然后这呢是 response data 啊，返回的一些我们的数据啊，当然你可以按照你的需求 data 点 data 啊，只不过我这样呢是点 data。 好，那么现在呢我们这样呢就，呃把它分装完了，分装完以后呢，在很多公司 里边呢，都会单独再弄 a p m 键，是吧？然后这里边是封装的一些呃，这个请求的具体的东西啊。好，那我这呢随便给大家打开一个接口文档吧，当然我也会添加到我们的课程里边啊，大家到时候直接在课程里边看，在这我给大家演示一下啊。稍等。 呃，我找到咱们这门 real 三的项目啊，在这呢会有一个接口文档，到时候大家点进去就好了啊，我这还没有给大家添加哈。呃，然后呢，我这就随便去找一个测试的就行了，比如说我就拿一个 轮播图吧，好吧，拿这个轮播图吧，因为毕竟他有很多图片啊，然后呢，在这我就新建一个 g s 文件啊， 好，那这就是一个轮播图的一些内容啊，然后把这个整体代码给他拿进去。好，那， 呃，他这个请求的一个 ip 啊，一 api 啊，我给放到这儿啊，然后他的请求方式呢是一个 get， 所以说我们这儿呢就都不需要了，参数什么都不需要啊，然后我把这名换一下， 行，那这样的一下这样的 api 解偶呢，我们就弄完了，然后现在呢，随便的去找一个页面进行一个请求吧。呃，我看一下，在这呢有一个 vivos， 那我就在这个页面吧。啊，咱们跑一下这个网页啊，在这。好， 那你可以通过选项是 a p i 或者 set up 这样去写啊，那我们就直接 set up 了，然后我们要引入的就是这个啊，然后这儿有一个 from， 找到这个路径，第二个要出去，然后是 a p i 下边的。 好，那我们请求的话呢，你可以在很多很多地方，比如说，呃，你是数据一开始要有的，你可以 在 b four 啊， on before mont 里边啊，如果说你是要靠这个第三个插件的，你可以写到 on monty 这里边啊，这个看你具体需求了，那这个呢，就等同于我们在 view 二的时候用那个 before creat 啊，差不多这样的一个内容啊，就是我们到还没有的时候啊， 行，那我们就在这里边去请求吧。啊，那我们先去拿到这个数据啊， is， 好，我们看一眼， 好，在我的控制台里边啊，大家可以看到这里已经有数据，对吧？ i s 点 date 点 list 嘛？ i s 点儿这个 date 点 list 啊，这就是我们的数据啊，一共有六项。行吧，那我们现在就把它选到页面上喽，那这儿来一个 u l l i， 那这里边我就放一个图片儿。 好吧，然后这呢，我们就写一个 steal， 呃，然后这有个 sql 的，那语言我就不写了啊，什么烂萨斯，我就不写了，挺烦的那个版本。然后宽度呢，就百分百，高度呢，咱们就来个二百吧，也别太大了。好，然后这呢，我们就给一会给他写上一个 item， 点什么什么玩意就行了。 行，我现在给他来一个微账号啊，循环一下 item in 一个 list 啊，那我们这呢需要弄一个数据，那这有一个 list， 等于 if 的一个数组。好，然后呢，在这呢给他做一个复值，他的 y 六啊，就等于这个值。 好，那么现在呢，我们这儿呢就可以写 k 了，等于 item 的 id， 是吧？然后这儿呢，就是 items 的什么什么玩意儿？好，我们看一下啊，来，看一下我们这个控台里边儿那个 图片路径是哪个啊？我们找一下啊，这样他有个错误，我先把这个先干掉。 好，此时此刻呢，我们的 l i 肯定会循环很多的。好，我们先看一下我们这儿的这个数据，呃，是 image 幺 l， ok， 那我就直接放到这儿吧。好，那这样的数据呢它就肯定出来了啊，一共有这么几张。 行，那这就是我们这儿呢做的具体的内容。那这儿呢给大家复盘一下啊，总结一下，首先呢我们第一步啊，在这儿呢写了一个 server 是吧？然后呢，这儿有 probacy 啊，设置了一个 a p i， 这是我们的代理。好，那设置完以后呢，我的 a p i 我在这儿呢就可以直接去写了。那当然，这儿呢我们有一个 x s s 工装啊，然后这儿呢会 呃有一个请求拦截器以及响应拦截器啊，那请求拦截器，响应拦截器，这个我就不想了啊，因为，呃，还是那句话，我们课程是从二过渡到没有三啊，必须要二，特别是 游戏啊。行，那在二里边呢，肯定我们要做这个 xss 封装吗？只不过我这就搭了个架，请求和响应来电器里边什么东西都没判断啊。行，然后呢，我们现在再到我的某一个呃文件里边去进行我的请求的接口的这些东西，比如 ul 是吧，可能有参数，你就把它写呗，是吧，没有参数就算了，或者请求方式。 然后呢，在具体的每某一个吧点 vivo 文件里边啊，我们 input， 然后在某一个生命周期里边直接去调用它就可以了。 那么大家可以看出来啊，就是基本上和我们二没有任何变化，对吧？所以说呢，就是请求这一块呢，就还好啊，没有给我们带来太多的一些学习的成本啊。 呃，然后呢，值得说的就是，呃，在这呢大家可以对照着他一些生命周期钩子啊，正常使用，比如说我们要在数据，呃，就是盗墓之前你要用 before mont 是吧？然后你如果要借助了啊，举个例子吧，比如 是吧，你肯定要写到 on monty 的这个生命周期里边啊，所以说呢，你要选对这个生命周期，然后呢，这样呢，有一个 a p i 的参考链接，我也给大家放到这儿吧，省的大家去找哈。 行了，那么有关于师师代理什么乱七八糟这些问题啊，那这节课呢，就先说这么多。

在一些较深层级的组建通信中，如果使用 props 通信，需要多级传递，而 provide 和 inject 则可以一步到位。比如这里的祖辈组建给孙子组建传递数据，可以优先考虑 provide。 inject 通信，先引入 provide。 provide 需要携带两个参数，一个是给后代组建的 key， 一个是传递的值。由于 provide 传递的值是一个对象或返回一个对象的函数，把这里的 value 去掉。后代组建使用 inject 即可接收到祖辈组建传递的数据，同样需要先引入 inject， inject 里的字符对应 provide 的第一个参数。 现在这里的深层级组建就实现了通信，那他是 否能对数据保持响应式呢？在组备组件里，利用 input 来改变传递的值，看一下后代组件接收数据的变化，可以看到是可以实现同时变化的。 不仅如此，在后代组建中也能修改祖辈组建传递过来的职，因为此时他们所指向的是同一个对象。 如果你不希望后代组建修改组组建传递过来的数据，可以在 provide 中加上 red 里表示它是一个指读数据。 在多个参数的情况下，不想使用多个 provide， 使用数组来传餐就能实现替换。 provide 其实还可以实现实践传递，利用实践传递实现后代组建修改组组建的数据。 inject 接收的则是一个数组， 想要全局定义也是支持的，在 men 点 j s 或 a p p 点 vivo 文件中都可以定义。 本期内容就到这吧，记得三连，下期再见。

好嘞，上节课呢，我们讲过了动态组件，然后这节课呢，我们就来说一下这个一步组件啊，那到这呢，很多小伙伴就会思考了，哎，啥叫一步组件？他能给我带来什么样东西，我在什么情况下会用到这一步组件，他到底是干嘛的，对吧？ 那我这样呢，我给大家做一个小小总结吧，首先一步组建呢，不管了，是不是和我们组建是有关系的呀？哎，没错啊，要不然怎么叫一步组建呢？ 然后这一步组建呢，其实呢，总结这么几个字，就是来提升性能的，那我们也知道啊，在面试的过程中呢，这个面试官经常会问到，你在六的项目中做过哪些性能优化，那么这个一步组建呢，可能就是性能提高的其中之一。 好，下面呢，我给大家解释一下，他如何去提升我们的性能啊，那当然有很多方面啊，我们这样就一项项去聊，我先给大家说一个比较简单的成 场景啊，就是我们在做 view 项目过程中呢，经常会有套娃这种情况啊，也不要套娃，就可能一层吧，比如说我现在画这框呢，就是我一个网页，那这个网页呢，它的一个大组件叫 home 点 view 啊， home 点 view 好，我就随便写了划了。 然后在这个页面中呢，会引入 a 组件， b 组件和 c 组件，好，都引进来了。那假如说呢，我这个当前的首屏啊，只会加载 a 和 b， 这个 c 呢，可能在第二屏或者第三屏啊，咱们就假设他在第二屏吧， 那用户进来以后呢，是不是如果没有看到这个 c 组件，这个 c 组件就别加载了呀？如果用户，哎，比如滑动这个窗口，那看到了啊，这个滑动网页哈，看到 c 组件，那么再加载 c， 那这样不就提升性能了吗？是吧？哎，这个有点像暗虚引入 是吧，按照需要把它加载进来，如果没有看到就别加载他了，那这样的话不就提升我的性能了吗？手屏的一个加载对吧？手屏加载一个效率或者说速度。 好，那我们总结一下，就是说他可以带来的其中的性能提升之一，就是这个组件啊，如果说用户没有访问到，或者说没有看到，那么你就别加载，如果看到了，那么再去加载，这样就提升我们性能了。 好，那么下面呢，我们就来看一看，具体他该怎么去用啊？知道了他这个东西到底干嘛了，我们就来试试啊，大家看啊，现在在我的后面六中呢，引入了 a 组件， b 组件， c 组件，我们直接引入的通过引号的形式，那这样的形式呢，大家并不陌生，对吧？ 然后呢在 a， b， c 这三个组件中呢，我稍微做点事情啊，我这儿呢就为了演示，我都给他加一个 高度吧，呃，这高度的话呢，就是四百吧，然后背颜色呢？随便来一个啊，我直接在迪奥这写了哈，然后我看一下啊，这高可能还有点高，那我就来个三百，为了演示这个功能。好，然后呢我把这个 b 组件呢也给他加一上，同样这个样式， 嗯，他的一个变颜色，我来一个 blue， 好，这是手屏的两个组件。好，然后呢这个 c 组件呢？呃，我这里边呢就不做太多东西了，我给他呢去弄一个图片 来，那我的桌面上其实呢已经弄了一个图片，我叫它一点儿拼计吧，好，放到我们的这个 src 目录里边儿放进来。好，那在这儿呢，我就 image 啊，把它引入进来一点儿拼计好了，我们去看一下这网页，咳， ok， 呃， 这是 a 组件， b 组件，然后这哪张图？这个图的话大小我给他规定一下吧。呃，宽度值，哎，宽度值我来个三百，高度值我也来个三百啊，无所谓。 好，那么现在呢，我就来看一下，如果说我不做这个义务组件情况下，是不是 a 组件， b 组件和 c 组件都加载进来的呢？没错，我们可以看看网络啊，证明这个 c 组件是加载进来的。大家看图片啊，在 network 这个地方啊，图片一点拼计他有吧，那就证明一定是加载了， 对不对？好，我们再刷新一下，一点拼技是出来的，那延续刚才我们所说的就是说，如果说我现在还没有滑到这，你就别加载了，对吧？我如果说滑到这你再加载啊，没有滑到这你别加载，那么这个该怎么办呢？好，那我们就来看硬度加 义务组建呢，首先你的引入方式不是直接引 part 了，你要一份的 thinker component 啊，那我们到这个地方就要做一些调整好，把这呢就给他先注掉或者干掉了，那我们就直接的把这块代码给他拿过来。 呃，这个地方写的还是有点问题的，拿这个好，然后呢，这个地方名字我们就改成 c 啊，大写的，然后这个路径呢，我们就替换一下。 好，这个呢就 ok 了，当然这个底范的 sink component 啊，它需要在这个地方呢引入，然后这儿呢有一个 view， 只不过我们用过那个插件儿啊，所以说呢，不需要在这儿这么去写了， 这个大家应该能懂哈，就我们在这呢不是用过那个插件了啊，就不需要去写了。好，那么这样做就可以了吗？我们来试试啊， 回到我们的网页中啊，然后刷新一下，大家看是不是不可以啊，一点 k t 它还出来了吧。啊，确实是这样的， 那你加这个东西以后呢，他不能完成你索要这个功能啊，你还要做一些事情。好，那下面呢，我给大家分享一个这样的算是一个插件东西吧。好，我把这个链接呢也给大家放到这啊，这个叫呃， view use。 好，然后呢这地方呢我们去下载一下他所要的这个包啊，来，我们去下载一下 啊，我下载一下， ok， 然后咱们把项目呢启动起来啊，然后呢你需要按照它的一个使用， 首先呢我们得引 part 把对应的这个功能模块啊要引入进来，好，到我们这个地方，那我就在这上面引入了哈，引入进来完事以后呢，看他下面代码啊，我们把这块呢整个的复制粘贴过来。好，然后我做一些小小调整 啊，首先呢他定一个 tigers 啊，然后呢这儿呢又定一个什么？呃，一个这个 force 啊， force， 这 force 干嘛的呢？其实就是判断的，我们可以在这儿呢先写个 d i v 吧，然后呢这在这儿给他写一个 v 杠 f 等于，然后用到这个值， 那大家可以看这个值呢，它上来是一个 force 对不对？我们先不用看 tike 啊，它是一个 force， 那是 force 的话呢，现在我们再去刷新一下页面吧，刷新好，大家看图片，它们就 没有加进来，为啥呢？是因为你这个组件都没有进来，对不对？是吧？那当然，我可以把这个呢放到这。好，他为 false， 这个组件都没有进来， 那你就别提说那个图片了。好，然后紧接他这做什么事呢？他这有个 tiget， 这个 tiget 是什么呢？就是一个呃，动啊，说白就是动物，我们在这呢可以写 if， 等于 tige 啊，你这样写上就可以了。好，写上以后呢？呃，这个地方的第二参数我们可以不要，我们可以不要。 好，然后在这地方我们去打印一下这个参数， 好，刷新一下，大家看着啊，我们的控制台，它上来的是一个 force， 代表什么意思呢？就是你还没有访问到 c 那个区块上，如果说滑动，滑动，滑动，哎，看到这个 c 了，这时候呢，没处了啊，这是没处了，所以说呢， 在这可以做个判断，判断什么个情况呢？如果说啊，如果说这家值为处，那我干嘛？ 我，我可以这么写，是吧？我这个值边出以后呢？我们直接付给这个值，那这样的话呢，他就变为出了，那这地方没出了，就加在他了，对不对？好，我们来试一下啊，刷新 好，然后现在呢，在我的 network 中，这个图片一点儿拼迹根本就没有出来，当我划划划啊，访问到这个组件，大家看一点儿拼迹，他出来了，然后这个图呢也就出来了，那你看是不是这个地方就提升了我们的性能呢？ 啊，没错，这就是他的使用场景之一。好吧，我们把这呢来给他写一下啊。呃，场景啊，使用场景之一，场景一吧。呃， 组建按需引入 这个过程，就是说啊，当用户滑动到了，滑动啊，到了具体的这个组件或者说访问啊， 我们到了组件啊，再去加载该组件或者此组件。好，那这个时候呢，我们就需要这么去写了，在我们的 tablet 的部分 好，把这块呢都给拿下来，然后在我们的 g s 部分 好，然后把这代码呢都给大家去弄一下。 好，那这是我们的场景一。好，下面呢我们再来看啊，场景二，把这呢给他去做一个一点二，好，哎，这应该是十点一啊，好，这应该十点二，场景二， 那么这个东西，呃，他所给你带来的是什么呢？他给你能带来东西？大家来看我们的网络，现在呢，我们看下这个 gs 部分吧。好吧，来我刷新一下啊，大家看啊， 如果说我们是引泡特直接引入的形式，那么在这个地方啊，一定会加载 c 点位由， 好，那么现在呢，我们因为使用了这个 e 部组件，所以说呢，在这个地方呢根本就没有 c 点六，当我滑动的时候啊，再去加载 c 点六。好，这是不是特别好的一个功能啊？没错， 所以说呢，在一定的程度上呢，他就做到按时引入，是不是啊？他就做到按时引入，那么这个东西还可以，这个一步组件还可以干什么呢？场景二，他还可以分包啊，这个呢，我们一会去讲到，好吧，一会去讲到。好，下面呢，我再给大家看一个功能啊，就是说我们还有一些场景是说， 呃，这个 c 组件呢，可能会做一些请求啊，这个方面呢是比较多的，对吧？我们请求数据来渲染的页面上， 那如果说这个数据还没有返回过来，我这应该显示一个加载中，如果说返回过来了，那就把具体的数据给我展示到页面上， 是吧，并且要做到一点，就是说当我滑动到了，那么再去加载该组件。好，那这时候我们该怎么办呢？也是差不多的一个情况，只不过我们先要做 做一个 low 定啊，就是要给他一定的提醒，是吧，加载中等等这样一些内容。好了，下面呢我们就言归正传啊，来说一下这块的一些内容啊，就乘以二了啊，乘以二，嗯，好，那我这呢就拿这个 a 组件来说吧。好吧，就拿 a 组件来说， 呃， a 组件这儿呢，我就不要这个，不要这个滑块了，不要这个滑块 c 组件直接展示了，那我把 b 组件呢给它加的高度大一点，好吧， 好，然后现在呢再回到 a 组件啊，大家看着啊，现在我 a 组件呢要做这个请求，那我在这呢就要写上对应的请求数据的一些内容了，是吧？这呢是塞大， 嗯，好，然后定一个 list 吧，等于 r， e， f， 它是个空的数组。好，然后呢还要提醒一下大家啊，就是如果我们要选项式 a， p， i 的话， 可能会用到 sync 以及 await， 那这时候呢，我们需要这么写，呃，三下，我这儿会写一个 a sync， 然后这儿呢有一个 is 等于 await excels， 是吧，然后这么去写， 但是呢，你直接用三十二分钟语法堂呢，你可以直接啊 wait 不用 think 啊，因为它这地方呢就是一个啊 think 的。好吧，所以说呢，我们家长可以直接用。好，那到这呢，我就把 excels 呢先给它下载一下，因为我要去紧接口啊，那就 i s 等于 呃，这个 wait， 然后是 excels 点 get 好，我去发送一个气球，然后最后呢 is 的 date 的 date 的 list， 然后附给呃， list 的 value 啊，然后呢我把这个数据呢就展示到我的 a 组件里边，那这是我的 list， 好，那我们就等待他下来， ok， 完事了，那我这 呢就需要引炮他一下 excels from excels 了，是吧？好，然后呢我去拿一下这个接口数据啊，嗯，这个接口数据在这 啊，这样呢直接可以 get， ok， 那到这呢我们就来看一下吧，刷新好了，此时此刻他就出现报错，看到没有 什么样错误呢啊，就是说他需要让你通过这么一个东西呢包裹起来，这也是 vivo 三所提供的系统内置组件，那在他的官方文档中呢，也强调到了啊，我们可以直接用到他，好吧，那么到这呢，我们就需要把它包裹起来， 包括起来以后呢，刚才我说到了，你可能会有两种情况，一个呢是这个东西可以直接进来，另外一种情况就是他在加载中你要提示个信息，所以说呢，我们这可以这么做，就是用这个 插槽形式啊，然后这是成功的，对吧？这是加载完事的啊，如果说，呃，他这个加载中，那我提示一个加载中。哎，加载中。 好，那这时候我们再来看这个页面啊，刷新，大家看到没有，有一个一瞬间的加载中啊，邦出来这个东西， 是吧？所以说呢，我想告诉大家的一个情况就是，呃，这个 e 部组件啊，那当然，我们这样的其实应该要写成 e 部组件的，就是这个 a 啊， a 要写成 e 部组件。 好，那当然若如果说我先不写一部组件，那我们先来看一下吧。啊，在网络中刷新一下，那这个 a 点 view 它肯定会出来，对不对？它肯定会出来。 好，然后呢他这呢有很多的信息。 ok， 呃，我刷新一下吧。 呃，这并不能看出来 a 点 view 啊， think 能看出来是吧？呃，这 a 点 view 它其实怎么说呢它肯定是引不进来的啊，在这个地方。好，这样吧，我还是给它弄成一个异物的吧，好，刷新。 好，那这个时候呢它也是同样出来的，那你这么做有什么样好处呢？哎，不就是做了一个提醒吗？对吧？你有一个加载中啊，我可以把我的网速呢给改一下，改成一个三 g 啊，好，闪现一下啊。这个呢就有点慢了啊， 稍等。嗯，他这个速度太慢了，这可以做到什么呢？ 这个组件它也是溢补的，它可以做到分包的处理，它其实呢也是一个按需引入啊，加载中，大家看到了哈，然后过一会等它加载完事。 咦啊出来了啊，有点慢啊。行吧，我给大家回到。呃我们最好的这种形式啊。好，大家看到这些功能是吧。好，那这样情况下呢你可以结合啊，这个内内置组件可以继续用， 我们把这个先写到这，在我们的 skirt， 然后这有一个塞踏， 因为写到这，那么这个有什么好处呢？首先如果说你的 a 组件本身是 assent wait 啊，就这种翼步的操作或者说 promise 啊这种翼步操作你不加这个内置组件 他都会出现一些警告对不对？而且数据出不来了，所以说你必须要用它。好，那么这个东西能所给你带来的这个功能是什么呢？啊？注意啊，这样你不用的话就会报错了哈，他可以解决，他可以给你分包。 分包？分包什么意思呢？就是我们的一个 home 点六中引入了 a 组件 b 和 c， 对不对？如果说这个这个这个不是一步的，他最后打包完事是一个点 gs 文件， 你如果说这个是一步的，或者这个是一步的啊，或者这俩是一步的，他会单独的给你打一个包，比如说叫 a 点 gs 啊，这个叫 c 点 gs， 他会单独给你分包。那这样的话是不是从你这个大的这个包里边把这个抽理出来了 啊？当用到的时候再加点它，你想啊，如果说我不做一步的，是不是全部都打在这 gs 里边，这个体积又过大， 但是呢，有些代码可能都用不到，但是你会都加载是吧？当我把它抽离出来分成包以后啊，分包了是吧？把你的这个某一个功能啊，某一个这个组件中的 gs 代码，我抽离出来一个单独的包，当用到它再去加载，是不是这样会提升很多呀？啊，所以他在我们打包的时候 会做这样的一些内容啊，包括在他官方里边呢，官网里边也说到啊，我们去看一下。呃，在这他说， 呃，在大型应用中呢，我们可能需要将应用分隔成小的代码块啊，并且呢需要在，并且在需要的时候才能服务器加大一个模块，从而实现这个效果，是吧？你看啊，现在我就给各位去打包啊， 呃， n p m wrong， 好，注意，现在呢，我的 a 组件是不是已经是一部的？我这个 c 组件是不是也是一部的？好，那这时候我们去看。 呃，在我的这个 disk 里边啊，好，大家看， c 和 a 就被单独打出来了，而 b 没有啊， b 没有 b 点 g s， a 和 c 就被单独打出来了，就把它俩抽离出来了，要不然你不抽离全部在这里边。 好，他可以做到一个分包的处理啊他可以做到分包处理，打包分包处理，其实这也是按需的引入啊，这也是按需的引入。呃，这个使用场景我们就写一个十点三吧。 呃，比如说 n p m 让 build 打包完成后， e 部组件有单独的 g s 文件，是从主体 g s。 啊，分分分包出来的，比如说有这个 a 点啥啥点 g s 以及 c 点啥啥点 g s。 好，这是特别好的一点，对不对那？呃，我相信有些小伙伴呢可能还会想到说，哎哎，这个地方我打爆了， 知道，刚才我们的第一个模式啊，就是这个 c 组件，对吧？这个 c 组件，呃，如果说我正常加载，我先把这干掉。正常加载是这张图吗？对吧？正常加载是这张图 啊，如果说他没有加载出来时候，我也显示个加载中，该怎么办啊？也是可以做到的啊，你就把这个包裹起来就可以了。把这个包裹起来，呃，然后这个胎给他放到外边啊，好，呃，然后这个 c 给拿过来，然后把这个放到外边， 这样也是可以的啊，这样也可以啊，插进一下。呃，这个地方是没有我，我写一个这样数据吧，让他进行一个展示，要不然他加的太快了。 嗯，这里边我就写个 c 组件，然后这写一个 list， 这样话让他加点慢一点啊，别太快了。好，稍息。 呃，大家有没有看到？哎呀，有点快啊，高速三 g 吧，好，刷新一下。 嗯，大家看啊， a 组件会有个加载中，然后你看这你看这有个加载中 a park 出来了是吧？这个也是可以做到啊，你可以混着去用，当然，呃这里边布局什么的你也可以去自己去弄是吧？或者说单独引入一个 loading 的组件都是可以的。 ok， 比如说我这有一个什么 呃 loading 的组件也是可以的啊，当然这个 a sink。 呃这个地方的 sink component 啊，它还有很多写法，不过我们在公司要用的话呢， 呃不会说在这里边再去去写，比如说有一个 time out， 这个时间三千毫秒，一般规章啊都是我们通过这样形式去做好吧。啊，因为原因呢，就是让他分包，这样的话会更好，当然，呃我现在如果说不分包不分包，那么我也可以给大家去看一下不分包的情况下就不做 做这个一步组件啊，不做一步组件我们就单独再打一个吧，让大家看到这个效果是吧？嗯，那这个项目就需要。呃这样我把它的 s r c 呢？ 呃复制一下儿吧，这个 a b c 组件我给它 a b c 组件到无所谓。可以可以，不用去修改，我把这后面点 b 我修改一下。好吧。哎。怎么碰到桌面哎。行，那放在桌面，放在桌面。 好，这个放到桌面了，我做了一个备份。啊。好，现在呢我就把 a b c 组件呢不做成异物的。好吧，我们直接就是引炮的这种形式， all。 嗯，然后下边这儿也是一样，这个我就都不要了啊，我只是给大家做一个演示哈，然后这儿有一个 a 啊，当然你那个 a， 哎，算了， a 我就直接这样引吧， c 和我，我也这么这么直接引吧哈，然后到这我们就打一下，好， n p m rom 丢 好，直接打，然后我们去看一下这儿的一个 dist， 好，打开，然后这里边好 a 点 g s 和 c 点 g s， ok， 没问题啊，然后现在我把它呢再给它 呃，返回一下，然后把 home 这啊，然后这个地方给它改成 a， 好，现在呢，我就不做一步组件了啊，不做一步组件了 好，直接就是以 pro 的这种形式来再打走，我们再来看 dista。 好，你看是不是全都打到一一个这个 index 里边了。好，所以说这是一步和不一步的区别啊，如果你单纯的只是把它作为一个一步的，那它就单独的抽离车一个包好，但是没有具体的一些 怎么说呢？没有具体一些按虚的功能， ok， 你要做按虚的功能的话呢，你还要去加代码，但是呢，如果直接用 defin 的 sink ctrl 啊去这样的一步赢这个组件，他确实可以做成分包哈，这点呢，大家要切记，不过一般情况下呢，我们都是 啊，就是，大家记得吧，就是我们在一个项目中呢，哎，没有三种啊，几乎都会直接一步去引入每一个这样的组件，几乎啊，几乎。 呃，然后呢，其次呢，就是因为分装会让他性能会提高嘛啊，然后呢，其次就是你可能第二瓶第三瓶的也会用到刚才我们说的滑动到了以后再去加载，对吧？好，这是我们所说的东西啊。好，那这个是我们的 e 股 啊，到时候大家看这个笔记就可以了啊。行，那有关于一部组件呢？我就给给大家呢，先说到这里。

刚才说加一个登录啊，登录功能，那我怎么给这个加登录功能呢？首先我肯定是需要有一个登录这个组件的，对吧？那就是烙个印，烙个印点 beau， 然后我需要做一个路由的一个配置，我需要得跳转到烙个印。啊，跳转到登录页。啊，那就是 在这老给你的一个路径，然后调整到老给你主驾，我需要把老给你引进来，老给你， 然后这里老给你保存，然后再看看能不能跳转到登录页。啊，这个写杠上，我就写老给你了。啊，那这个页面老给我没写东西呢，是吧？啊？加一个参普的 h 一，这是登录页保存，嗯，好，登录页对吧？啊，那登录页的话我给他加一个表单。登录页加一个表单啊，用户名和密码吗？是吧？啊，那我这里写一下， 嗯，放，然后这里有音铺子，这个这么写 d i v， 然后雷博，雷博是用户名，下面是一个音铺子， 这个输入用户名，下面这个呢？输入密码， 密码，然后这个 tiphone 是帕斯沃的，然后下面还有一个登录的按钮， 登录的按钮，然后咱看一下这登录页啊，哎，用名密码点击登录的时候，我现在实现什么功能呢？点击登录的时候跳转到跳转到刚才的列表页。啊，那我现在写一下点击登录跳转到列表页，怎么写呢？ 首先一个表单提交的事件，对吧？啊？艾特可立刻等于。啊，这个因为是表单提交啊，所以表单提交默认的话他会刷新页面，所以我需要写一个陪伴他实现一个。呃，去掉默认行为，他就不会刷新了。 然后我登录的时候呢，这块写一个烙个印啊，那我下面需要写个烙个印的方法啊， 麦丝，然后写 烙个印这个方法。烙个印这个方法啊，那烙个印的话，呃，正常的话他会有一些权限啊，有一些用户名密码的一些判断，这个判断都是后台进行的， 不是后台进行的，但是咱们现在用前用前端前端来判断了啊，我写一个判断啊，如果说用户名等于什么，密码等于什么，什么，就就可以登录成功，否则登录失败，对吧？那我需要做一个双向数据绑定，获取到用户名输入的用户名和密码啊， rean uzn 等于一个空字母串啊， pass word 等于一个空字母串，然后做一个双向数据绑定， 这里是为毛豆等于用名是悠字内幕，对吧？ 然后是微杠毛豆，这等于帕斯沃的对吧？ 好呢，然后咱做判断了啊，瑞士点优质内蒙，比如说用户等于什么呢？等于额的密，等于额的密的时候，然后密码呢？ 罗志宇啊，这是点，他是 word 密码等于什么呢？等于一二三四五六啊，我就让他登录成功， 调整一下格式，我要是登录成功的话，那就 nice 点 登录成功要干什么？登录成功要跳转到列表页对吧？啊，那就是瑞士点刀乐刀乐撸圈啊，撸圈。有一个方法叫铺式，铺式，我们写一个地址就可以直接直接实现一面跳转写杠上列表页啊，那就是首页，首页就列表页，对吧？铺式首页啊，那就是登录成功啊，那如 如果登录失败呢？我就写个 nlat 啊， nlatanlat， 然后呢？我写用户名或密码处 用户名密码错误啊，咱看一下现在的效果啊，哎，报了个错误是吧， 看看这老天爷的小隔壁，哎， 这现在是哪里写错了吗？ 看我看怎么点击 啊，不是可厉害啊，可这是 supermets 本 met 啊，是表单提交的时候执行烙个印啊，然后 刷新啊，然后输入用户名，比如说我输个一二三啊，密码呢？四五六点登录，他会提示用户名或密码错误，对吧？啊，然后用户名呢？如果说写的密，然后密码呢，是一二三四五六，这就是正确的，然后点击登录，他就会跳到列表页，这样呢就实现了一个登录的功能。

好了，各位，那今天的话，我们来讲一下 v 三点三新增的一些编译红。好，那首先第一件事情呢，你需要先 check 一下你的 v 一版本是否是三点三及三点三以上的版本。好， 那这边的话，我是使用 a p p 的 view 呢，来充当副组件，然后 child 呢是子组件。好，那我们先演示第一个 defam props。 好，那这边的话，我们就简单的呢，去传入一个参数，比如说叫 name， 它是一个 stream 类型的一个数组，比如说叫小满。好，那子组件呢，怎么去接收呢？使用这个普通的方式去接收。 好，我们就通过底饭 props， 对，直接呢去接受一下这个 name 即可，但是我们传过来 是一个 string 类型的一个数组，但是这个普通的方式呢，他是没有办法去接收这个范型的，所以说这样的话，我们只能把它变成一个呃 re 了。哦，但是这样的话，他又会缺少这个类型提示啊，比如说我们 cons 这一个 props。 好，然后呢我们去点一下这个 name， 哎，你会发现这个 name 呢，它是一个 unknown 类型的一个数组。 对，因为这种方式呢，它没有办法去确定里边具体的一个类型啊，所以说为了解决这个问题呢， b b 也是帮我去提供了一个工具函数啊，我们来引 polt 一下。 好，那这个工具呢，叫 prop type， 对，就是这个东西，然后呢，你就可以去把它断言成一个你想要的一个类型， 比如说他是一个什么死追音类型的一个数组。哎，这时候你再看呢，他的类型呢，就已经被纠正过来了。那这个的话，就是的话， props 的一个基本用法去接收副组件呢，传过来的一个内幕，然后呢并且去给他定义这个类型。 当然你如果使用这个 t s 范型自命量模式的话呢，就不需要去使用这个东西了，所以说你如果对 t s 比较了解，那这个东西的话，你就基本是用不到了。好，这儿的话我们来换一下啊，把它换成这个 t s 的模式。好，这儿的话我们就使用 define props。 好，然后接收一个范型字面量，对，他是这么写的，然后在这个范型字面量里边呢去定音 name， 然后 string 类型的一个数组。哎，是不是也是非常简单？好，然后再接收一下这个 props 啊， 好，注意看。哎，这个类型呢也是正确的，所以说你使用这种方法呢，就不用再去上面这么麻烦的去定这个啊类型的啊，但是呢，这个不是 v 三点三新增的，这个是之前就有的方式。 好，那 vue 三点三对底饭 props 有什么更改呢？哎，有他呢，支持这个底饭 props， 可以接收一个范型，比如说这的话，我们可以增加一个属性啊，这个属性就是 generic， 然后呢可以接收一个范型，那这个范型呢，可以有多个，比如说一个 k， 然后呢他还可以进行这个约束，通过 extent， 比如说约束一个引用类型，跟你在 ts 里面的这个用法是一模一样的。好，那这个有什么好处呢？比如说啊，我们传过来的呢，是一个 遵义类型的一个数组，但是一会可能会变，比如说变成一个什么数字类型的一个数组，还有可能变成一个什么这个波尔值类型的一个数组，那里边的话我们要一直跟着改吗？那很烦，所以说你可以接受一个这个范性，就是变成这个动态类型的，就是不用一直在跟着变了。 好，我们来写一下它的写法啊，就是通过抵犯 props， 然后去接收一下这个 name， 然后它就是 t 一个动态类型的一个数组。哎，其实这样的话就已经是完成了，然后我们把这个 name 呢在页面上展示一下，对，一点问题呢都没有。好，我们来看一下。哦，这儿没保存 哎，你会发现这个 force 呢，就已经是打印出来了，所以说 v 三点三呢？对，这个底饭 props 呢，是新增的这个范 的支持啊， 对这个底饭 props 的改进啊，新增的这个饭型的一个支持。 这需要在这个 script 上需要增加一个属性，加上一个这个 generic， 然后加上一个发型。好，那这个话就是一个 define props 的一个改进呀。哦，我们再来演示一下这个 define image。 好，这儿的话我们来加个按钮吧， 叫什么叫派发好，然后给它去加一个事件啊，比如说 at click 叫 send 的 接收一个 image 通过的，换 amix， 然后最简单的方式，他是他可以接受一个数组，然后呢去定这个事件的一个名称啊，这是一个最简单的方式，就是普通的写法 就定一个数组。好，那这样的话其实也是可以派出去的。那这儿的话，我们来接受一下这个方法，叫说 attent gate name 吧。 好，我们来 log 一下。 哎，也是没有什么问题啊。那这个的话就是一个 米饭 amy 的一个普通的写法，就是定一个数组呢，然后定一这个派发事件的一个名称啊，当然它也支持这个 t s 的写法， t s 写法， t s 写法呢，对这个类型呢是更加的友好啊，我们还是 const 一个 image， 就是抵犯 image， 对，就是使用 t s 的写法。首先它是一个什么呢？它是一个函数，所以说这儿的话，我们来个小括号 哦。然后第一个参数是什么呢？第一个参数呢，就是这个世界的名称啊，这个名字你可以随便写，比如说叫疑问尺， 嗯，它是一个 string 哦，那第二是什么？第二它它的参数，比如说是一个什么 name， 然后它也是一个 string， 然后它没有返回值，就来一个 word， 哎，其实这样的话也是可以的哦，我们来看一下刷新 点击派发哎，也是没有问题的，并且呢还能有这个类型提示，其实我们可以滑到这个函数上面，对这个内是一个 stream， 他就已经帮我们去这个标注好了。好，那 v 三点三呢？对他有什么改进呢？其实也是有的，就是比这个方法呢又更简单了。 呃， v u e 三点三改进好，我们把它粘一下啊，这就是写法上呢，又更精简了， 对它呢就不用写这么一大长串了。首先呢去定一下这个事件的名称啊，比如说叫 scent， 然后呢，它的参数直接在数组里边去定就可以了， 比如说这个叫什么？这个是一个类，那个它类型是一个 string。 哎，哎，这样的话就完成了，这就是 v 三点三的改进啊，就是更加的精简。好，然后我们再来点击一下啊，哎，其实也是一点问题都没有啊，那这个话就是一个底饭 amit 三点三的改进啊，我们再来看一下其他两个，其他两个第一个是这个底饭 options。 哦，那这个一篇的话其实我们之前就已经见到过了。呃，这个课程呢，在那个地规组间内记，我们想用它呢去定义我们这个 name， 在 v u 一三点三呢， 就是内置了。 对，内置的底翻 options 就是不需要再去下载插件的。 对，之前我们想使用这个 define options 呢，都是要去下载这个插件才能使用。在三点三呢， viv 呢，直接把这个东西呢去给它内置了。那为什么要叫 define options 呢？就是它里边的属性啊， 对，跟这个 options api 呢， 是一模一样的。 对，他会把我们这些属性呢，都会透传给这个 option， c a p i 那 opt c a p a 里面都有什么呢？比如说 data， 你看他有提示，对，他都是有的，还有什么 methods 对吧？有什么 rounder， 对吧？但是我们常用的什么呢？常用的就是定义这个 name。 对，比如说把我们这个组建名称呢， 改成这个小满。对，这个是一个常用的方法，就是常用的属性。对，常用的属性呢是定义 name。 对，其实就是这么一个定义内容。注意这个 props 跟 inmate 这些呢都是不能定义的，我们可以试一下，比如说 props， 然后你会发现它有一个报错啊，对，你会发现它就进行这个报错了， 它就是说什么意思呢？它就是让我们使用这个抵犯 props 呢，再去定义这个 props， 就是不要在这个抵泛 options 里面呢去定义这个 props， 因为 props 呢，它有自己的这个编译红，其他的也是一样的，比如说 images， 对，它也不能去定义，因为这个 define emits 呢，它也是有的，所以说它还会进行这个报错，对，这个东西也是 有的啊。当然你也可以自定一些这个其他的一些属性，比如说我们刚才说的什么内，还有这个什么英号车 a d t r s， 对，这些的话是没有什么底方案的，一些编译红是没有的，它是可以去正常使用的。 对，就是除了那四个，就是它里面的属性都会去透传给这个 option cpi 的，那这个话就是一个 dift options 的一个用法，常用的就是这个 d 内啊。然后我们再讲一下最后一个，就是这个 dift slote， 好，那注意，这个 dift slote 呢？ 它是只有声明没有实现的。 对，只有声明没有实现。好，我们来定一个 define slot， 注意他也没有什么参数哦，这的话，比如说我们随便放一个东西，然后你会发现他报错了，对，他是没有任何参数的，所以说这个是不允许的啊。注意， 对，没有任何参数，因为他只有声明，就是只能接收 t s 的类型。对，他只能接收类型，因为他是没有任何这个实现的啊，这的话我们就可以接收一个类型了啊，然后我们来这个副组间去给他传点东西吧， 这些都删掉啊，然后 constant list， 比如说来个什么，对，来个 name 跟这个 age 吧。好，然后去传给这个子组建啊， 然后足足地去接收一下这个 data， 通过底翻 props data， 哎，这的话我们就是 t 类型的一个数组，正好就可以用上这个范型了，然后这的话我们来给它一个循环， 好，在这个 l i 里边呢来个 slot。 好，那这时候的话我们就可以去约束我们这个 slot 了。比如说我们想给他定义一下这个参数啊，比如说 item 对回传给呢？这个负极。哦，那这儿的话怎么去定呢？首先这个插槽呢，它是一个匿名插槽，这的话我们就来一个 呃 default， 然后没有什么返回值，然后它里面有什么？它里面有这个 props 啊，好，这的话加一个 props， props 是什么呢？就是这个 item， 那这个 item 是什么呢？就是这个发型那么一项，所以说它的类型呢？就是 这个发型。哎，那这样的话就可以去约束这个 slot 里边东西。比如说我还想加一个参数，比如说加一个 index， 它是一个 number， 哎，你会发现它有一个报错，就是少了一个 index， 那这时候的话它就要去增加 index 这么一个属性了。好，这儿的话来一个 index。 好，那这个的话就是一个抵犯 slot 的作用，其实主要呢就是帮我们去约束这个 slot 的。对，然后并且呢做这个一些类 行提示。好，然后我们在附近里面呢去给他使用一下， 对，我们这个是默认插槽，所以说井号 default 就可以了，然后去把 h 们的解出来，然后去给它渲染一下， 就是 item 点这个什么内好刷新一下，哎，你会发现它呢就已经是渲染出来了，然后还有什么 index， 哎，也是没有问题，那这个的话就是一个底发。 slot 的作用，其实就是把我们去做这个 slot 的一个内心提示的，对，它只有这个生命，并没有任何这个实现 好，那以上的话就是本次新增的一些这个边以后，那接下来的话，我们就来看一下这个他们的原码实现好了，那么继续来 来看一下它的原码，那这个原码怎么去找呢？哎，其实大家可以跟着我的思路去找，首先它是什么呢？它是一个单文件组件，也就是一个 sfc 啊，所以说 肯定是在编译的时候呢，在这个 compire s s a 里边，然后编译什么呢？就是我们这个编译红呢，它都是放在这个 script 里边，所以说我们就去找这个 compare script 就可以了，然后你会发现在这个 script 里边去引入这些编译后，我们比如说 define slots， 它是在这个点杠 squares 里边，所以说你就会去顺着这个思路呢去找到它们的源码所在的一个位置，然后点开这个。哎，你会发现所有的边音红呢都在这里边。 好，那接下来的话，我们就来看一下本次新增的两个编译红，那这个底贩 model 呢？它目前呢是处于这个实 体验性阶段，我们可以看到微的这行注视，有可能呢在未来的版本呢会进行这个删除，所以说我们就先不讲他了，如果他以后纳入这个未来的计划之内，或者是正式上线，我们再去讲这个 define model。 好，那我们先看这个 define slot， 其实它呢也是非常简单， 大部分呢都是做这个判断的，你看是否调用了这个底饭 slot， 有没有这个重复调用，如果重复调用的话，就进行这个报错。好，以上如果都没有出发的话，那么就是这个正常调用，然后呢他就把这个属性呢设置为处代表呢，我们已经去调用了底饭 slot 四， 并且呢它会有这个检查，那这个检查就是我们刚才所演示的，就是这个 define slot。 对，它呢只能够接收这个范 型的模式，他是没有任何参数的，对，他在这呢是有一个判断，对，如果我们这个什么参数不为零，哎，他就帮我们去抛出这个异常，也就是说这的话他是不能接收任何参数的，只能是接收这个字面料模式。对，他这个判断呢就是在这去做一个处理的。 好，如果正常运行的话呢，那会返回一个 id， 那这个是编译的一个 id， 然后呢他就会在我们这个原码的开始位置以及结束的位置呢，去替换一下这个内容，替换成这个 use slots， 哎，此时呢我们就会拥有这个类型检查了， 那这个的话就是一个典范斯洛特斯的一个源码啊，最后的话他会 retar 为处，就是继续会往下这个运行。好，我们来看一下这个 difan options， tfan options 呢，也是进行这个大量的判断，前面的还是一样， 是否调用了 define options， 有没有去重复地调用哦，并且 define options 注意啊，它是不能够接收这个饭型字面量的，它是反过来的，它是不能够接收这个的 底饭 options， 对，他是不能够接收这个泛行自媒量模式的，对，如果接收了，他这会报这个警告的，他只能接收这个普通的就是这种传入参数的一个模式。好，他这儿的话进行了这个判断， 并且底翻 office 呢，它只能去接收这么一个参数。好，那这个话就是如果我们使用的底翻 office 呢，同样会把这个手机呢设置为处， 然后呢去调用这个方法去地规呢去处理里边这个属性，并且去透传给这个 options 的 api。 哦，那接下来的话还是这些判断，这个报错的话，我们刚才已经见到过了，如果在底贩 options 里边去传 传入 props 就是这几个，这他们几个呢都是拥有自己的编译红，就是 define props， define emit， define expose， define slots， 对，如果传入的话会报一个警告，其实这个警告刚才我们就已经见过了，传入这个 props 之后，他会让我们去调用这个 define props 去实现， 不能够在这个抵犯 options 里面去实现。那下面的话就是他四个的一个判断，如果没有问题的话就 retur 为处，就正常的这个运行。好，那以上的话就是他们几个的一个源码。

will 三的响应式数据是面试中常问的一个问题，如果你的回答还只是停留在 will 三使用了 proxy 代理来去实现，而 will 二使用了 define property 来实现的话呢？那你的回答并不能脱颖而出。 w 三的响应式数据实际上分成两个部分，一个是 reactive 方法返回的响应式代理对象，一个是 ref 方法返回的响应式 ref 对象，那这两个都离不开最最核心的内部实现的这个 effect。 以 reactive 方法为例，使用 reactive 方法返回一个对象的响应式代理，那他要接受一个目标对象，接收到目标对象之后，判断这个目标对象是否已经被代理过， 如果已经被代理的话呢，就直接返回缓存下来的值，否则我们就使用 proxy 来对这个目标对象进行代理，然后返回一个代理之后的对象，并且把它缓存起来。那显然是 代理的核心就是这个 get 捕捉期内的依赖收集和 set 捕捉期内的依赖触发依赖收集需要把当前的 effect 以这样的数据结构保存起来，让以目标对象作为键保存在 weak map 结构中，而它的值是一个 map 结构，然后又以属性 key 作为 map 的一个键， 然后它的值呢，就是一个 set 结构里面保存了当前的 effect。 那如此，当触发依赖的时候，就可以通过目标 target 对象和属性 key 层层查找到当前的 effect， 并且执行 effect 的 run 方法。