Vue 接口返回值如何绑定元素

大家好，从今天开始我们讲 vue， 我是 罗海林， 呃，我在读 vue， 这个发音应该是 view， 是 矢图的意思，它是一款用于构建用户界面的 javascript 框架，它基于标准的 html css 和 javascript 构建， 并提供了一套生民式的组件化的编程模型，帮助你高效的开发用户界面。无论是简单的还是复杂的界面， vue 都可以胜任。 有 vue 还衍生出了安了码组件库和 uni app， 开发多种平台前端应用的框架。 这里面大家搞清楚三个事就行，首先 v u e， 它不是语言，它是一个框架。 其次这个框架是由 html、 css 和 javascript 三大语言支持的。第三个它是用来开发用户界面的， 本来这个 v u e 就 非常好了，但是有人说，你写的那个按钮啊，列表啊，不好看，我帮你写吧。那么这样呢，就出来了一个 l m， 当然这个 l m 呢，它不仅仅只写了按钮组件，还有一套完整的组件裤，那么这也不错了。可是有人又出来说， 你看，你开发那个电脑上的程序，需要一个电脑工程师，要开发 app， 那 么又需需要一个 app 的 工程师，要开发小程序，还需要一个微信小程序的工程师。 我把你的这一套代码一次性的翻译成多种平台的前端应用框架，这就又出来了 uni app。 那 么这个课呢，我们从六个方面给大家介绍。首先第一个就是 ve 的 准备，这里面主要讲 我们需要启动 v u e 的 时候需要准备哪些内容。那么一般认为我们需要装四个软件，第一个就是 h b u d x， 第二个阿里巴巴，第三个微信开发者程序，第四个就是 uni app， 那 么第二章呢，我主要介绍 uni app， 那 么为什么把 uni app 要提出来讲呢？在我这堂课程里面， 所有的代码都是在 uni app 这个环境里面来运行的，因为我在前面开发我的成长树的时候，用的就是 uni app， 所以呢，我们先讲一下 uni app 这个环境里面，它的目录结构， 创建意面的一些知识和意面的配置，那么还有它爸就是导航 和启动模式的配置这么多内容，那么第一第二事实上都是在做准备。从第三章开始，我们才真正进入 v u e 的 讲解，那么这里面呢，我们首先讲 html， 我 们前面说了 vue 是 由 html、 css 和 javascript 组成的，所以我们在这一章里面呢，就是详细的介绍一下 html 和 css， javascript 的 一些用法。 第四章我们讲的是 vue 的 语法，那么你说你前面不是在 uni app 里面在运行吗？怎么又回到 veue 语法上来了？因为这个 uni app 啊，它和这个 uni 啊事实上是分不开的，换句话说， uni app 里面运行的就是 veue 的 语法啊。有的老师说，你要学 uni app 必须先去学 veue， 但是我反过来说，当你看了我的 uni a p p 之后，不需要去学维欧 e 了，因为我把维欧 e 的 内容在这个 uni a p p 里面全部介绍了。 那么这里面呢，我主要讲模板的语法，还有条件的渲染，列表的渲染 和世界，还有计算属性。那么第五章呢，我介绍的是组件，这个组件我分两部分介绍，第一部分我就是讲下组件的原理，怎么定义一个组件？怎么去使用一个组件？第二部分我讲 uniapp 的 组件。 换句话说， uniapp 它本身带了一套组件，我们在开发程序的时候，大多数时候 uniapp 提供给我们的这些组件就足够了，我们自己定义的组件其实不是很多。 最后我要讲这个 ipr， 这是个接口，是一个程序和程序之间互相调用的接口，包括网络请求、 终端请求、服务器上数据库。那么还有我们从终端上传一个文件或者图片，或者从服务器上下载一个文件或者图片。

好，这节课呢，我们来说一下 view router 的 安装和配置，那来 c m d 打开 dos 窗口，咱们用 view ui 这个试图界面来配置一下 view router， 进来之后呢，哎，稍微等一下啊， 好，创建在第二章这里边创建项了说我们就叫 will route r o u t e。 好， 把这个关掉，下一步我们自己手动配置一下，下一步那会进入到一个选项，那么这里有 t s router， will x 是 吧？咱们把 will x， 呃， router 打开，还有配置文件。 下一步这里呢可以选择 vivo 三还是 vivo 二，那这里呢选择一个，第三个点击创建项目，创建项目不保存预设，当然你也可以给它起个名字，下次的话你可以直接选择你自己预设的这一套方案。这里呢咱们就不预设了， 让它创建一下。这个过程呢是需要稍微等待一下啊， 咱们耐心等待一下， 它会帮我们去下载依赖，然后去做路由啊，或者说 t s 啊它的一些引入。 ok， 这样的话就创建好了，咱们可以把这个页面关掉，然后把这个也退出，接着来到咱们项目里面，嗯， c m d n p m run start 进来， 咱们项目打开 来看一下。好，那咱们复制地址，打开浏览器粘贴地址， 这样的话它就给我们创建好了一个带有路由的路由三项目了，你看 about this is an about 配置是吧，然后这里呢是 home， 我 们来看啊，配置路由的话，首先你要在命令 gs 当中给它进行一个引入，是吧？引入，然后使用，同时呢在 app 点 view， 这里 你要跳转的页面，第一个是 home， 第二个是 about 页面，同时你要有路由文件，这里面呢就是 写的第一个 hello， 呃， home view， 对 吧？ home view， 那 么首页呢？进入的就是 home view， 然后呢，它还有 about 这个路由，以及它要加载的这个组件。 好，那我们可以来看 comments， 呃，这里面 hello word， 这是首页，对吧？这是咱们的首页，当然你可以把这些内容不需要的都给它删掉说，哎，我是首页保存。嗯，这里呢，也暂时不需要，先给它删掉。好，那我们来到 views 这， 它是不是有 home？ 不 有啊，对吧？就是咱们的首页，这里它引入了 hello world， 那 这个咱们没有传。这里呢，也删一下。这里呢，这个也可以删除一下保存，咱们回来看一眼。嗯， spaces 好，关掉它。刚才是一个 islin 的 报错，那你看我是首页，对吧？ about， 这里是 about 页面，这样的话咱们就配置好了一个带有路由的 view 项目了。 ok。

好，我们现在呢，全部停掉，全部停掉 cd 出去。我们这里呢，给大家直接再引入一个 view 的 项目给大家看一看，因为直播间里面的同学呢，有 react 的， 有 view， 那 还你还可以用 p， react 或者是 solid 都可以啊，比如说我用 view 三，然后这些呢，随便选吧，没有也可以啊，偏偏这个呢？ vt， 然后呢，依然选择 gta， 安装一下，直接用默认模板啊，或者说你用 not ui 也可以，我们就用 not ui 吧，选择 not ui 之后，它会进行安装，当然这个安装的过程也会非常反缓慢啊，我还是 cd 到 tarotview 里面，进去之后我再安装一下，这样 我自己操作的可能会快一点。好，我把 react 折起来，我们来看一下 view 啊，风格接近啊，很类似它们的处理呢，有点点区别，整个目录结构是完全一致的啊，所以我认为啊，它的这个 整个架构啊，还有社区支持这些，我认为相对 uni app 来说，其实我觉得还是更好一些的啊。虽然说 uni app 呢，对于 ios 跟安卓的这个套壳不错，但是你你只要有 webview， 你想尽一切办法都可以去套壳。你像我们一五年一六年在套壳的时候，那会儿大家都没听说过什么 phonegap， 太早的技术了啊， phonegap 这个现在同学们都不知道了，这个 phonegap 都已经属于历史的产物，已经消失在历史的长河中了啊，我们一五一六年那会儿做前端做这个 app 套壳的时候就用这个 phonegap 啊，当然还有什么 eole 啊，还有这个尤里克这些呢，其实都还是比较流行，但是呢，在国国内来说，呃还是差了点啊。所以呢，同学们不用太纠结啊，不用太纠结这些，这个 框架选择上面不用太纠结。好。偏偏装包失败，这么惨吗？我这里成功了啊。你失败那可有可能是因为那个上天在考验你啊。我们在这里呢，直接呃 cd 到哎。我看一下现在在哪啊。 cd 点点出来，然后呢？进去 terro view 好 进到里面，然后偏偏蚂蚁，哦，我刚才安安装过了刚才安装过了，我直接偏偏 dv 同样的动作啊 h 这边呢，同样的动作偏偏，哎呦，太快了，偏偏 dv v v f v f 哇， 给我送了一个大大的惊喜啊哈哈。呃看一下吧 babel 的 app t s 的 跟翻译相关的吧。 翻译相关的问题 app 点 t s 尽量给它凑一堆吧。呃 babel 我 们找一下 babel 相关的在哪里。在这儿 babel preset terra 这属于它的官方的一个失误啊，这个到时候我们可以提一下 这个东西本来应该是属于叫在这个 preset 当中里面的对吧，既然你都是一个预设了，那有些东西呢，其实没包含在这个里面还是有问题的，不能这个让开发者来去做这个事情。如果大家比如说同学们没有来听过我们的背包课，同学们不知道背包的插件和这些用法， 那就完蛋了对吧。那可能这个一下午就就在那儿难受着了，不知道排查这个问题好了，我们直接 cd 到 terro view demo 里面去啊 p n p m 现在到这边我们直接 p n p m d v h 五哦啊这个呢，应该是 到它里面 p n p m d v h 五啊，惊喜哎，还有吗？看一下。 嗯，我刚才是不是没有 p m p m i 重新安装一下，我看下这个版本啊，朋友们看，等一下，七点八点三这个版本呢，应该是正常的啊，七点十八点六吧，七点十八点六，然后呢，我们再 p m p m i。 安装一下，刚才因为我指定了之后没有重新安装 好，现在安装了啊，并且你看这个也是 de 呃 de practice， 所以呢，其实还是整个 tarot 啊，就是有些内容呢，还是相对来说滞后了一点点， 当然这个我们可以展望一下，后面的话有更好的翻译工具。抛开这个背包来说，那还有呢，像比如说 swc， 还有 esbuild 的 等等等等啊，这些其实都可以有非常多的畅想。 好，我们呢直接 dvh 没问题了吧。好，这个就跑起来了，我们再来到这边，在这里呢跑一下。哦哟，这个已经跑跑跑 h 五了，那我在这个地方 p n p m dv v f 一 样的啊，一样的。 好， h 五呢，这边已经跑起来了，我们来看一看它的效果啊，我把这个收起来，我还是在这儿来看刷新一下。 哎，好低跳，我们换路径了。好，这里有个按钮，大家可以看到吧，这个呢，就是用的 not ui 模板放过来的啊， not ui 模板放过来的， 路由跳转是有一些问题啊，是有些问题，这个呢，我们可以后面再想办法来去来去解决这些问题。我们今天不重点去关注这个啊。好，那在这个里面呢，你也可以去做跳转的工作了。那比如说我现在给他做一个基础配置在这里呢，配置一个 pages about the index， 然后我在这边直接出示化一个页面出来，把它叫做 detail about about。 好， 所有的内容呢，就按照这个样子，其他都不用改啊，这里呢，改一下吧，这里呢，首页我们叫呃相亲页。 taro taro ui 它跑不起来，大家被 bug 折得死去活来啊。但是呢，你要想想，这是考验啊，这是种考验，这 taro ui 的 话就不要用了吧， 确实有很多问题啊，你看我现在用的是 turbo 四啊，朋友们， turbo 四点零点六，你跟着我的操作一系列下来，绝对不会有问题的。好，那我们这边呢，再指定一下，指定好了，然后再到这边就可以进行跳转了。怎么跳转呢啊？你对应的位置去做这个跳转。 navigate navigate to 这个呢，我们就自己从里面去导入一下。嗯，从这个对应的内容里面去导入一下。从这个上面吧， 对应的文档呢，大家可以去到这边来看，它针对于 react 和 view 都有对应的文档啊，有入口组建，有页面组建，有 view 三相关的，还有呢 conversation api。 那我们刚才讲的有一些那个获取一些参数的，还有呢封装的一些 hooks 啊，比如说这个 use userroot， 你 看是不是很相近？ react 跟 view 都比较相近啊，就直接用它就够够了。然后对于路由功能的处理呢，你不分这个 view 或者是 react 啊，不分 view 或者是 react， 你 就直接用 把它导进来。从哪里导入导入呢？从这个 taro title 啊，把 title 导进来，然后你在这儿去跳转，那比如说我就康 click 的 地方去跳转吧， title 点 navigate to 是 吧？一样的方法啊，跳到哪儿呢？就跳到这个 page's detail， about about index。 好， 这样来一写，然后我们再来到这边，先看首页这边点按钮，按钮点一下，跳转过去了，没有跳转过去。 about about page 跳转过去了，那我们重启一下啊， 然后呢在这里处理一下，哈哈。呃，或者叫 detail 页面， detail 页面，然后我们在那边呢也重启一下。好，我们再来看一下。刷新， 先来到首页，这首页点按钮跳转过去了，哎，为什么没有跳转过去？这边其实看到跳到 about 了，对吧，我们刚才祁隆重启的这个呢？呃，重启这个微信的啊，这个是 h 五的 啊，他怎么老是喜欢往这里跳。 ok， 现在就可以了啊，返回一下，到这点按钮就过去了。 detail 页面啊， detail 页面返回，然后呢点按钮就到 detail 页面了。好，这是这个 h 五。然后呢，我们同样来看一看微信小程序这边的支持情况啊， 同样呢，直接点到对应的目录下面 view ui 的 啊， disk 里面的内容。刚才呢，其实我们呃这里呢，大家就出现了另外一个坑，什么坑呢？这里没有去做分端打包对吧？这儿 导致我们所有的依赖呢，没有把它按照常规的那个端的内容呢，把它输出出来，我现在这样来一下啊，再重启，这边也重启，这边呢， 也再重启一下。好，两边重启之后我们再来看效果，一个是这边刷新点按钮跳过去了，这个没问题，对吧？我们看这里还有呢，就是我们在呃微信小程序这一端选择完之后，我们再来看一看创建， 再到这边新人兵运行啊。呃，重新出挂一下，哎，首页就进来了，重新刷一下， 重重进一下， 呵，这个按钮不出来，呵，稍等一下，看一个 控台没有错， 放大一点，这是没有错的啊。 呃，我看下这个里面的内容，嗯， face 我 重新把它关一下吧，关一下之后我重新再来一下， 是挺坑的啊，就是同学们如果自己在用这个框架的时候呢，确实要要注意一点，我这个把它选择测试号来啊，这个可能是跟我的微信开发者工具有关。 好，呃 ok， 我 们这样吧，来到这边我们把它处理一下啊，就是在 page 在 这个里面呢，我们把这两个呢先注视一下，好吧，然后呢，我们在这边给一个 button 一 二三来看一下呐， 使用起来，对于跨端的这个我们自己要写对应的 ui 适配啊，它这个其实官方也跟大家说到了，就关于这个 natui 的 使用注意的事项 好了，这个呢，我们简单例子给大家去演示的，去看一看就够了。但是呢，其实同学们，呃看到这个坑虽然比较多啊，但是他确实是一个方案，因为我们有很多产品呢，呃也用的 tarot， 呃，包括 tarot 社区，其实，呃维护还是在维护的啊，这个呢，不能够去 鄙视别人。官方他确实在维护，只是说有时候这种跨端框架大家都能够知道，我待会给他看一下源码和原理之后同学们就知道了，确实比较困难，因为各种版本依赖关系啊，一些特性太难去维护了啊，太难去维护了。好， 这个呢，我们就暂时先给大家看到这啊这个呢，我们暂时先给大家看到这关于 terry 这一部分的，我们等一下来来给大家去讲 terry 的 这个具体原理大致的 使用呢，就是按照这个样子大概看了一遍啊，大概看了一遍，然后其他的核心概念大家可以去看一看我们给大家准备的这个资料啊，因为时间关系呢，我们就不一一的去给大家介绍了，主要是在这个 原理这一部分啊，我们呢要给大家去详细的去说一下，我们待会会在第二部分 多端开发框架的原理跟优劣势这里呢以 tarot 为例给大家去讲一讲啊。这种呢，其实你不管是用 tarot 啊，还是你今后去用其他的多端框架，或者说你自己要去做一些编程相关的内容呢，这个都是非常值得去看去学习的啊。

和前端小组学 view 三元码系列课程在上一章节我们深入研究了 def 算法，我们知道了 view 如何通过 l i s 来最小化 dom 操作，但是有一个更基础更贴近我们日常开发的问题，可能很多同学并没有研究过，当我们在代码里写下 set this 点 count 的 时候， view 到底在 view 做了什么？ 看的明明在定义在 setup 或者 data 里面，为什么 this 能直接访问到？并且 real 三是又是如何保证这种访问速度极快的？而今天我们将去深入探讨 real 三的组建实际化，并且去揭开 this 背后的秘密。 一切的开始还是那个熟悉的 patch 函数，当它遍历虚拟到我们数的时候，会发现一个节点的类型，是组建还是是组建时，它会调用 process component， 而这个是组建生命周期的第一个分叉路口。 process component 的 逻辑其实非常清楚，如果是第一次 就是会走挂载流程，而这里又分为两种情况，就一种是普通的组建，那就是去创建实体，呃，另外一个就是 keepalive 组建，它会去利用缓存跳过创建，呃，如果说是 n 一 存在，那就会走 update 的 一个逻辑流程。 如果是普通组建的挂载，那并会执行 mount component， 那 我会把它称为挂载三部曲，每一步都职责分明。首先第一步就是创建实体， 生成一个包含各种属性的大对象。其次就是设计主键，它就解析 purpose， 处理 stores， 最重要的是解执行 set up 函数并抽象及 state。 而第三步就是 set 建立，副作用就是 set up learner effective， 去安装，去建立响应式连接，一旦数据变化，立即去更新矢图，而这也是下下一章节的重点。 呃，我们去首先会去回到第一步就是 create component instance， 我 们来看一下，在它调试 view 的 时候，经常能看到一个巨大的对象，而这个就是组 建实体 component instance， 那 我们来看一下里面是有什么？首先它有个 u i d 维标识，用来调度排序 we node， 它里面去组建在副组建中的渲染产物，而里面有 plus y 就是 渲染中的访问的技师。然后另外有个非常重要的 access control， 而这里面就后面会说的就是性能优化的关键缓存。 呃，在这里有个面试必问，而且容易比较混淆的概念就是 weot 和 subtree， 它到底是什么？ weot 它其实是一个节点，是一个组建，在副组建中 的样子是什么？就比如说 mycapron， 它是一个组建，那它就是一个组建，而 subtree 就 这个组建它自己渲染出来的实际的样子啊，就比如说这个 subtree， 它自己渲染出来的一个 test 文本。 那么用一句话总结就是组建的挂在本质上就是将 we know 的 转化并展开成 subtree 的 一个过程。组建实力创建好了，接下来就是 set up component 去会出使化状态， 它首它会去做 in need purpose 标准化 purposeful choice in need flows， 将插槽编为函数， set up state for component 执行 set up 核心。而在 set up state for component， 它其实会去做四个非常关键的一个操作，它首先会去创建 空的 access control 对 象，而这个非常重要，待会儿我们会去讲它去会去创建 instance 点 plus y， 它会调用 set up 去传播 purpose 和 contest， 同时它还会去处理 set up 的 返回值，可能是 promise 或者说是一个对象。 大家想一想，渲染其实是一个非常高频的过程，如果每次去访问 system account 的 时候， view 它都要去， 它都要去检查 set up data， 检查 data， 检查 purpose 或者说是检查 context 吗？ 那是答案是不需要的，因为刚刚我们说的的 access control， 他 其实他会去，在你第一次去查找数据的时候， 他会去缓存这个值，那你再下一次再去查找的时候，哎，他就立马的去找到这一个缓存值，而 而这个性能它是整整提升了非常啊，非常多倍的一个性能数据。然后这就是为什么 view 三在运行时性能非常强悍的一个细节所在，它用空间就是一个缓存对象去换取的一个时间。 而在我们之前一个章节去提到的一个就是 instance 点 prose y， 它其实它会去出场一个 new， 它会去出场一个 new purpose 的 一个对象，而且它会去调用 public instance prose y headers 去会去做这么一个动作。而当我们去访问 this 点 counter 的 时候，实际上是在访问这个 prose y， 而 public instance prose y headers 它定义了一套严格的属性查找机制，当 而在其中内部他去，他去会去做这样一个动作，他会去拦截 get 的 一个操作，去统一一个属性的访问， 然后其次他会去优先去查找 access control， 然后， 对，然后它会去在如果没有命中缓存的话，它会去按优先级去进行一个查找，比如说，呃，它会去做一个 set up state， 然后 data 或者是 purpose， 然后然后最后就是到一个呃 contest 和 global， 这样子的话就五五层的一个优先级， 这也是五层的一个优先级，层层递进，然后去进行啊进行一个查找，当一旦查找之后呢，它会去进行设置一个 cache 缓存， 而而而 plus y 它不仅只负责获取，它其实还负责写录。而在 set 拦截器中，其实 view 它构建了当下的数据库的一个防线，它允许修改 setup state 和 data， 因为它们是响应式的去改了， 它会去触发更新，但是它其实它会禁止去修改 purpose， 这就是为什么我们在子组键中去修改 purpose 会报错的一个原因。同时 它会去禁止修改 dollar 开头的属性，就是为了防止你把 dollar item 或者 dollar 给覆盖了，导致系统崩盘。 而我们来这边来讲一个综合的应用场景，就是优先级的时时战中，就是在比如说像这种场景，像在 composition api 与 options api 去混用的情况下，它其实它会会返回一个显示，会返回一个零，这为是为什么呢？ 这是因为 setup 的 优先级，它其实是会比 data 的 更高，因为 get get 哪些器里面它会去检查 has， setup， binding， 然后同时如果 purpose 里面，如果 data 中定义了 purpose 同名的属性，那 data 会进行一个优先。 呃，我们看完这一个章节之后，我们其实会有一些相对于的一些思考，比如说 access catch 是 否是有必要的啊？它，它跟现代浏览器的 inner catch 和 real gs 的 手动缓存是哪个会更优啊？首先需要一点呢，就是浏览器的 inner catch， 它针对的是属性访问模式，而非属性来源判断，而 它没办法去优化动态的 plus y 的 属性查找，所以是 access control 是 必要的。呃，那第二个就是优先级的设计，就在我们刚看到 git 的 访问链路的时候，就 set up a state， 它是优先于 data 的， 其实这在 view 三中它是明确是比较推荐 composite api， 然后同时呃，它会去一些避免意外覆盖，比如说 set up， 它是更新的代码，不应该被旧的 data 覆盖，然后为了保持一致性，就是 set up， 在 data 执行，执行优先级也是更加更高的。 而第三点就是 post 啊 purpose， 它的指读为什么啊？禁止修改，这是因为数据永远是从父流向子调试，它其实只需要向上查找， 而使用 vmodel， vmodel 其实也只是一个语法堂，本质上是应脉的时间双向本定，本质上 non 是 单向流的啊。同时禁呃，与它的禁品 react 相比，它同样禁止直接修改 purpose， 这是现在浏览器的框架的一个共识。而 this 的 一个回到我们 这个主题的一个流程， this 的 本质是什么？它其实它只是一个代理的 contest setup state data purpose 的 一个对象。对 那，嗯，好的，那大致的流程就是按照这个流程， ppt 我 们已经讲解完毕了，那我们开始看一下我们的 mu 的 一个实现原码， 在啊 process com component 里面，它其实是会去走一个 mount component， 一个呃，一个创建，就是它是初次挂载，那初次挂载它其实会走刚刚我们说到的一些流程，就是 创建赋用主机实力处理异步， set up， 然后最终调 set up run 的 effect effect 的 函数。我们先略掉这些啊，略略掉这些第一位的，然后我们会去，它会去创造一个 component instance 的 一个属性， 而这里就是去做一些啊相对应的属性，比如说去继承父祖英的应用，应用上下文跟组建使用 winnote 自带的 a p p contest， 然后它其实还包含局配置，指令组建， mixin 等等，就是 a p p contest 的一些参数，然后同时这里就是一些对应的一些属性，呃，我们来分类来去进行，来划分，其实第一类就是唯一标识与组建关系，然后比如说 u i d 这些着重此类的啊，对，然后第二个就是响应式副作用相关的，呃，待会儿在下一个章节，我们会着重地去讲，呃 effect update job scope， 然后还渲染器相关的，就是 linda browse y， 然后 exposed， 还 expose browse y， 还有 with browse y， 然后是一代着重相关的，呃 providers， 呃，像 provider inject 机制的，呃数据源 i d s 呃 access control 就是 之前属性访问， 呃缓存，那 render control 就是 v one v 杠 once v memory 的 储存储缓存，然后包括主镜与指令注册表，而这个也也会在我们接下来的一个大章我们去详细讲解啊。 prox 和 ems 的 一个配置， 包括它的事件系统啊， persuade 的 一些默认存储 or choose 的 继承，还包括它的组建的一些状态 suspend 相关的 suspend。 后续也会讲生命游戏周期这些周期函数，这些生命周期勾子函数啊，后面的章节会详细的去讲解，对， 然后它就是啊，这里还需要特别注意到的一点就是自定义的行，自定义的一些元素的一些过程，然后它就会去返回这 instance 的 一个实力。 对，这是它的第一个创建 create component 的 一个过程，然后之后就是 we keep alive 去注入渲染器实现的内部实现。 呃，然后这里就是一个 set up component 去创建，去 创建一个 component， 去初步化一个 component， 然后这里它其实会去做一些逻辑操作，比如说，呃，是不是是一个 ssr 的 set up 调用中心？呃， ssr 我 会也会专门去讲解一个 章节去讲解，为了防止这个章节过多，所以就会去拆分去讲解，然后他会去做一个呃 windows 去做 purpose children， 这是 unit purpose， 就 初步化 purpose， 将副组接的 purpose 标准化验证，想啊转成一个响应式的一个变化。 对，大家可以看到 in in it purpose， 它会去创建两个对象，然后去进行处理，然后末根据标准化的，然后去将其进行一个映设，然后去维护维护它的一个响应式的一个属性，然后去，然后返回 那 innit stores， innit stores 就是 一个创建叉槽对象，然后检查是否有叉槽子节点，然后这同时也是有 shopflex 来进行处理，然后是否有进行优化， 然后如果是有优化了，那就不需要标准化，直接赋值。然后如果是不是编辑器的叉槽，就是手写 n 的 函数的话，它就会去进行一个标准化，然后第三步种情况就没有叉槽标记代用此节点，那最一般是，最一般是 default 叉槽内容，这是 对，就是当组建没有使用 stored 但传输子节点的情况，然后它同时也会进行处理，将它进行标准化之后，然后对，然后进行一个执行，然后然后到这里就是一个 set up state for component， 在 这里它会去获取组建定义的对象，然后，呃，这些都是无关主要的细节，那我们看一个核心步骤，核心步骤就是我们刚刚说的 catch control， 就是 创建属性访问 缓存，就是用来缓存 this 点属性查找结果，而而它的不，而它的一个权重就是 set up state， data purpose 和 contest， 然后最后就是一个 global。 对， 然后去他去创建一个公开的 this 代理对象，这代理对象就是模仿和渲染器中访问的 this， 而这里 public instance browse by hand， 就是 实现了查找属性查找的优先级，我们点进进去看一下，嗯，这里代码样式比较多。对， 就是你一个详细的一个 get 和 set 的 一个过程去进行查找。 然后第三步是执行用户的 set up 一个流程啊，首先要注意的是，如果他去执行的话，他就会去暂停渲染器的追踪，因为 set up 执行过程，他的属性 访问，他其实会被嫉妒为依赖的。对，所以他先暂停，然后同时读了声明的第二个参数，那就会创建 set up contest， 包含这些属性， 然后就是按这个流程接下来一步一步地往下走下去去恢复，然后恢复当前的实力。然后需要注意的是，有些异步 setup 或者是 server prefetch， 则用非异步组建包装，然后并且包进行处理， 然后这是一个 is assign setup， 然后这是同步的，然后最后是没有 setup 函数就直接进行处理。 对，这是一个 set up for me 的， 然后对于这些就是有组建状态就执行完整的组建设置流程，然后函数组件就直接返回 onify， 然后最后就直接返回这个最终的一个结果 amend component， 之后他会去执行到下一步，就是如果是 set up 是 异步的，然后去他需要去异步逻辑进行处理，然后最后就是一个这个就 set up learn the effect， 这个是去建立一个渲染和试图更新响应式系统的一个核心的一个逻辑。对，下一章会去详细的讲解，然后讲完这个 mount component， 那 我们来再来讲一下另外一个流程，就是 update component， 其实 update component 它这里有个流程，就是啊设置 update component 就是 判断 它的结果是呃是触发响应式 effect， 还是仅是同步 v， node 和 l 的 一个系列，而这个流程也会将在下一个章节去进行详细的讲解。对， 那我们的源码就大致就是这样子的。呃， 那我们进行全章的一个总结，在整个呃核心流程中，它其实是有些核心的一些啊函数，比如说像 post component 去决定挂载或更新 create component instance 去创建 多属性的一个实力，那 set up component 去出初步化数据，并创建 process y， 而 public instance process handles 去统一了 gist 的 访问啊，其中有一个非常关键点就是 access control， 就 实现了非常属性访问性能的一个量级的一个提升。 呃，对，呃，现在就组建实体创建好了，即使也能访问对象，但是有个最核心的问题没有解决，就是创建后的实体如何驱动重新劝呢？就是当数据变化时，是谁通知的数据更新。我们将深入 set up learn the effective effect 去探索响应式系统与渲染的连接，以及 view 是 如何通过一步调度 schedule 来避免浏览器卡死。请务必关注我的频道前端小组。如果这篇文章对你有帮助，请欢迎大家定点赞、收藏和转发，这对我非常重要，对，我们下期视频再见！

各位学前论的同学，今天我们来介绍一下 view 叉槽的几种高级用法，让你的主键设计更灵活。第一种是作用域叉槽，比如说这里我们有一个子主键叫做 list component， 然后这个 slot 呢，跟我们常见的有点不一样，它通过这种属性绑定呢，把数据传递给了叉槽。 这种写法在 view 的 主键库分章中是比较常见的，但对于没有过主键库设计经验的同学呢，一般都很少见。那在副主键中呢，一般是这么使用的，比如说这是刚刚的 list component， 拿到了这个 user， 并且传给了他，可以看到这里可以通过这种方式使用结构的语法，就接受了主主键传来的数据。然后副主键呢，可以完全自定义每一项的渲染样式，以里面的具体的一些数据啊等等。那我们有说过这种方式一般出现在主监库设计嘛？那我们就来看一下一般的主监库设计中是怎么使用它的。 说这个 table 就是 某个组建库设计的 table 表格，它会有数据列的配置，比如说对于需要自定义的列呢，可以通过上面这种方式呢，去接收它的数据，然后自定义列的展示，这种方式是非常常见的。 而这个 table 的 实现原理中呢，会有类似于这种 slot， 通过这种冒号属性呢，这样子传回去了。第二种高级用法呢，叫做动态插槽，名，使用的场景呢，是根据状态去动态切换要使用的插槽，比如说这是一个子主键，定义了几个句名插槽，比如说 header， body， footer。 那 在父主键中是怎么使用的呢？ 比如说这个是刚刚那个子主键，我们定义了几个按钮，点击的时候呢，会去更新这个 active slot， 然后通过这种 template 的 方式， 只用方括号就包裹变量名，当这个 active store 的 变化的时候呢，就能通过这种方式去自动切换叉槽，这样子的话，这个场景就非常的灵活了。比如说我们可以使用这种方式呢，根据条件去渲染不同的叉槽，也可以根据这种方式呢去实现一个动态表单，非常的灵活实用。最后我们再来看一下叉槽的编辑原理究竟是怎么样的呢？比如说这个子组键，我们 通过这种方式呢去应用了叉槽，那它编辑后是个什么样子呢？这是它编辑后大概的一个渲染函数。对应来看，叉槽呢会被编成一个对象的属性，而叉槽的内容会被编成一个函数，然后对应的这里也有一个接收参数，返回的是一个虚拟洞，对应的是这准的初准。理解了原理之后呢，我们就能知道为什么作用于叉槽能够传递数据了， 在主轴键中调用叉槽时，传递参数这里就可以接收并且使用了。以及为什么多个同名叉槽只有最后一个生效了，比如说你有多个同名叉槽，那在编辑之后呢，可能就是这个样子的，这个就会把前面的覆盖掉。以及为什么动态叉槽名可以工作呢？ 并且来看，比如说我们这里的动态叉槽，它在编辑之后呢，大概就是这样的属性，这样这种动态叉槽名就被转成了对象的函数。更多的细节原理和高级技巧，我也更新到这份实战小技巧中，感兴趣的欢迎免费领取！

这节课呢，我们来学习一下表单处理，在 vivo 三当中呢，你处理表单数据呢，是简单又高效，那么它内置的双向数据绑定和事件监听机制，能够让我们很轻松地去收集到用户输入或者验证数据以及提交表单。 那么在这儿呢，咱们通过这么几个点去说一下。首先呢是双向数据绑定，我们可以通过 vega model 欸这个指令，在表单空间当中，你比如 import text array， 呃 select 和组建实力的属性之间创建双向绑定数据， 那像 import 里面，我们通过 vega model 绑定了 message 是 吧？那么也可以自定义时间。对于 select 呃这个元素呢， vega model 默认监听 change 的 时间，但对于 input text array 可以 监听 input 的 时间， 你也可以自定义监听事件，比如说 vga model message 是 吧？然后艾特 in input on input change， 那 这个呢就是自定义事件了。 另外呢就是表单验证了，它是及时验证，是需要结合 vga model 和事件监听，那么你可以在用户输入时立即验证数据，提供一个实时的反馈。我们在 input 的 当中，通过 vga model 哎绑定了这个 email 这个数据，同时呢也 呃绑定了这个 blur 事件，它呢是 validate email， 对 吧？那么我们在方法当中呢，就可以去调用这个方法 validate email， 然后呢去判断它的这个 this 点页面是否 ok， 是 吧？如果可以的话， 哎，如果不行，如果呃这个页面它不符合我们的规则，那就可以给它提示一个呃错误的信息，否则的话，那就要把这个呃错误的信息呢给它删掉， ok， 这是表单验证，当然我们也可以使用第三方库啊， element plus 提交表单，这里呢第一个就是阻止默认行为，我们可以使用点 prevent 修饰符，在事件处理函数当中呢，去调用 event， 点 prevent default 来阻止表单的默认提交行为， 对吧？那么在 vivo 三里面， vivo 二里面，咱们可以直接在事件的后面直接使用点 prevent， 然后加上咱们的 unsubmit， 那么 unsubmit 呢，就是正常的去请求接口了，好吧，表单控件的话，那就像 check box， radio 对 吧？ vega model， 它这两种呢和 vega model 的 方式，呃，工作方式是有不同的，通常用于数值或者布尔值， 那你比如说 type 等于 check box 是 吧？ vega model select atmos， 那 么它的值呢？就是一个 true 或者 false 了， ok， 总的来说呢， vivo 三里面的表单处理意味着你能构建出响应迅速，用户体验优秀的表单界面，这样的话就可以简单的进行数据收集以及到复杂的表单验证。咱们 vivo 的 vga model 和事件系统提供了这么一个强大的工具，希望大家能够好好的。

兄弟们，昨天咱们那用户系统功能虽然调试通了，可这使用体验真称得上是惨不忍睹。 就说点删除操作吧，列表居然跟瞬移一样，生硬的就跟二十年前的网页似的，哪有一点现代应用的流畅感？要是想给他加点过渡动画呢？手写 css transition 又特别麻烦， 高度、位置都得自己算，简直是让人头大。不过别担心，今天我就来教大家用一行代码，给页面加上物理引擎，让页面动效变得超丝滑。这个神奇的库叫做 autoanimate， 它最大的亮点就是零配置，不管你用的是 mirorek 还是原声 gs， 它都能自动监听 dum 的 变化。只要页面里有元素新增、删除或者移动，它就能自动计算位置，生成平滑的补间动画， 就像有个无形的动画师在背后帮你操作一样。接下来咱们回到 view 代码里实际操作一下。第一步，使用 m p m install and fork kit auto animate 安装依赖。第二步，引入 v auto animate 指令，这一步就相当于请来了一位动画小助手。 第三步，直接在列表的副容器上挂上这个指令，就这么简单没了？是不是不敢相信就这三步就搞定了，现在见证奇迹的时刻到了，再点删除试试看，看看这补位效果 是不是丝滑的，就像在绸缎上滑动一样。更厉害的是，哪怕是复杂的网格布局变化，它也能轻松处理。你完全不用写一行 css 代码， 简直是开发者的福音，如果做独立开发的，时间可都得花在刀刃上。像 autoanimate 这种能让页面体验提升十倍，还不用咱绞尽脑汁的酷，必须得加入收藏家，我是 askcode， 关注我，我会持续带大家挖掘更多实用的知识。

好，这节课呢，我们来说一下事件绑定，那么事件绑定它是实现组建间交互的一个关键啊，它就是允许你轻松地将用户操作和组建方法或生命周期事件呢进行链接。 那这里呢，我们先来说一下基础事件绑定，就是用 at 或者 v 杠 on， 那 么在 view 模板中呢，你就可以使用这两种形式给咱们指指定的元素，给它绑定到这个事件上。 ok， 那 你比如说 add click， 对 吧？ handler click， 另外一个就是要传递事件参数事件，嗯，处理函数呢，可以接收事件对象作为参数，用于访问更多细节。你比如说我们的 handler click 是 吧？它可以接收一个 event 行参，那么我们就可以通过 event 来获取到当前元素的很多细节属性。 ok， 这个呢是基础绑定，那么还有就是事件修饰符，比如说点 stop， 点 prevent， 呃， capture self once， 是 吧？你比如说 stop， 它是来阻止冒泡， prevent 呢，它是来 取消默认事件默认行为，那么你比如说像 a 标签，那么我们一般都会取消它的默认行为，对吧？那有的时候呢，我们可能需要去进行取消冒泡，当然它呢也是可以进行组合的，你可以点 prevent 继续再点 stop 来实现这两种效果。 ok， 那 我们也可以动态绑定事件名使用方括号动态绑定事件名，让事件名可以随数据变化而变化， 那就像这样， on 加上一个 event name， 对 吧？等于还多点 event， ok， 另外呢，就是组建事件，哎，比如说像监听组建事件，哎，你可以在副组件中监听子组件发出的这个事件，通过 at 或者 v 杠啊去进行绑定， 就是艾特 custom event 是 吧？那我们就可以通过 dollar emit 来触发这个事件，同时给它传递一些数据。同时，哎，我们也可以去绑定键盘事件，像 key up， key down， key press 以及 enter tab esc， 哎，都是可以的。 这些呢是事件绑定的一些核心知识以及技巧，哎，你呢，可以通过这些来构建响应用户操作，实现复杂的交互应用。 ok， 希望大家呢能对这个事件绑定呢有所了解。

就是你现在就先看一下，知道先知道你做了一个什么样的东西。我就这个意思，就是你看我们这个页面，这个页面呢，它就是一个后台管理的页面， 你，我给你把那个前台就是你的前端是分为相当于有两个前端，就是一个前端页面呢，是用来管理客户端页面的数据， 然后另外一个前端页面呢，就是展示那个客户端数据，你看我把这个启动起来，你看一下啊， 你看这个这个页面，我们点开看一下，就其实就是一个是你的 那个淘宝的客户端页面，然后呢另外一个是你淘宝的一个管理端的页面，就这么理解，就你客户端你是正常能看商品的吗？然后你管理端的作用的话，它就是主要就是用来去 你给那个商品要上架了，下架了，这这方面的操作吧，算是。嗯，那就管理的就是一，那个啥是看不到的嘛？对，客户端，你看这个是客户端，稍等一下， 你看这个客户端页面，就这样一个公司首页一样点查看更多，我们点点看到相关的东西， 就我们不需要管它那个里面好看不好看，反正功能基本上都实现了，就符合你的那个论文的。 你看这个就是客户端，你看这个标题几啊这是这就是客户端，就是客户使用的页面，你开公司的，你不也有客户嘛？就客户，客户操作的东西和你们自己员工呀，或者一些管理员操作的一些系统它是不一样的。 嗯，这个呢，这个后台管理，你看添加好友呀、论坛呀这些东西，他就是一个后台管理的东西。这这这走你，你把这两个前端页面分别是干啥的？理解了吗？ 就是一个是给客户用的，一个是给那个内部人员员工用的，管理用的，对，管理用的，这不是管理界面，这就是这种这种左侧这种菜单，然后一点一个菜单，你能看到都能看到每一个这个对应的页面之类的。 嗯，这个这个页面就是个管理页面，对，这种就是数据管理啊之类的。嗯，然后呢他们这个这个页面呢，他就是客户端的页面， 嗯，然后这两个的后端共用的是同一个，这个后端都都用的，这个就是都用的同一台服务器。 就是现在呢，我们我跟你就讲一个简单一点的登录啊。嗯，我们点到这个登录页面，我们首先看这里它是不是这是客户端的一个登录，嗯，这里是不是有个 logo？ 然后我们现在点开代码看一下， 我看录上屏啊，录录录着屏呢，就回头把录屏发你自己再看一下，你看就这个就是一个，这个一整个就放到它这个文件夹，它一整个就是一个前端的文件夹， 然后点开，这种是静态文件呀，这种是 common， 你 英语大概懂不懂呀？也不行，就 common 这种公共的，这个也是公共方法， config 就是 这种配置嘛。 然后你现在你就看啥登录，登录的登录的英文翻译过来不是这个 log 吗？嗯， l o g r n 给你翻一下， 对吧？嗯，就是这个吧， log log 登录 服务器。专业，专业的术语是什么？就刚刚你展示的一个是前端的，一个是后端的，这两个都用的是同一款。你现在，你现在，你就先跟着我的节奏来吧，你就先把前端 一样一样的弄明白就行了。我们先看前端吧，然后现在这这，你看这个前端文，整个文件夹的这个配置，他就是页面 p a g e s， 这个英文我不知道你懂不懂，翻译一下，看一下， 就是你不懂的，你翻一下 ipad 配置页面，看到没？就是他的这个每一个文件夹里面的这些 v o e， 这不有个点 v o e 文件吗？嗯， 然后他这不每一个文件夹有的是拼音，看报名参加，然后这个是 home 是 加，然后经典信息， 然后 message 是 消息。像这个每一个目录它对应的都是都有一个，每一个对应的页面 就相当于一个目录，它可能就是就是这一个页面，咱们进来看一下， 又看新闻公告，看，这不是一个新闻公告吗？嗯，客户端的，然后我现在看代码是看的什么 新闻公告？找一下新闻。哎？怎么新闻公告添加呀？详情呀？历史的，我们，其实这里就是一个历史的记录啊， 然后这里你也别管它掉到哪个页面了，然后你看它这个是不是有一个这个 time 吧，然后就是它们前端是由三个部分组成，就是有一个对应的，正常的一个输入框有一个对应的页面。我们先看登录，我们就拿这个登录举例子，因为登录比较简单， 你看这个背景图看得到吧？这个背景图片，这个是蓝色的，然后字是黑蓝黑蓝的，对吧？嗯，然后这个就属于静态页面， 就是这页面的一些框呀、字呀、按钮呀，这属于静态页面。然后呢，你现在在这个输入框里面你要输入信息，对吧？ 输入框里面你要输入信息，然后你现在输入完这个信息，你是不是得通过这个页面把这个请求发送给那个服务器？ 嗯，是吧？这这这里理解吧？理解，理解，因为因为你发送给服务器，服务器才能知道你写的这个账号和密码，对不对吗？ 对，然后对的话服务区他会，嗯，对。然后这个就是我刚才说那个框框，条条框框之类的那个竞谈页面吗？ 你看，嗯，简介，这个不一定有啊， 社交登录平台。然后你看他这个这种后面不是框，这种百分之百呀、二劈叉呀这种，这种其实就属于他的样式，他就是由这三部分组成的，他这种属于样式。 然后首先就是他的整个页面布局嘛，你看他这个在左边，这个在右边，这个在左边，然后这个在上面，这个就叫布局。 嗯啊，就是整个页面他应该是怎么铺的，这边应该放什么，这边放什么，这叫布局。然后呢？这个字是黑色的，黑按钮是黑蓝黑蓝的，这种是白色的字，这种，这种是属于样式。 嗯啊，然后刚才我们不是说输入要输入这个账号，一输入他的密码，然后我们要点这个登录按钮嘛，对吧？这里就其实就是前端去处理这个逻辑，他要发起一个请求给到后端 理解吧。嗯，就发发给服务区，然后服务区来识别。 如果你看现在，你看现在，我们就只看这一个接口啊，这个这个网址，这个接口其实就是一个网址，你看这个维持 gdp 网址， 嗯，只不过就是正常的网址呢，他是可以返回来一个正正确的数据的，但是我们这个网址他只返回来这种，你看这种在官方的话叫做 jason， 就是你看比如说这里是内姆，内姆是姓名嘛？然后这里名字可能就叫小王，然后这个里是 age， 他 是年龄嘛？ ag 年龄，然后这里可能就十岁，十或者九， 它这种叫 jason， 然后你不需要了解它到底是什么东西，你也不需要了解了，就是你把它理解为前端，在这个通过这个网址去请求后端了，然后你看前端不是要带着这个账号和密码吗？对吧？你看这不，账号一密码一二三四五六，这个叫自断， 这个叫自断，能理解吧？嗯，自断，自断一就是账号 user name， 自断二就是密码，然后它有一个对应的值，你看这账号密码，理解吧。 嗯，你现在操作的这个页面就是是它的。呃，后段页面呗， 后端这边是前端页面，客户端页面，你看。哦哦哦，不不不，我，我现在显示屏里面看到的右边的这些白色的是后端还是前端啊？这边就是这个，这边就不分前后段。他这种就是一个一网页的调试工具，就这么理解， 他这是一个网页的调试工具，但是客户是看不到或者操作不了的呗。对，客户他客户他想看也能看，你按一下 f 十二， f 十二， f 十二，按一下 f 十二。好，好，嗯，这个，嗯，行，不说了，这个，这个我多余了，没必要。嗯，然后这个点登录吗？嗯， 你看这里点登录是不是请求了这个登录的接口。嗯，然后他返回来一个正确的逻辑，我们看一下这个代码怎么写的，就是你不需要理解的太细，就是你再不需要理解的太细，也要知道一个大概，就你自己心里有个那个 有一些东西吧。算是。 哎，这个不是它的这个 logan 的 那个登录页面，对吧？嗯嗯，然后这个 script escape 的 就是请求的那个后台的那个接口，就我刚才跟你说的网页。嗯，看这个表明登录看到没有登录。嗯，然后如果说他的这个返回来的那个状态码等于零， 然后他状态码等于零，说明他是成功的，说明他等于等于零，他可以执行下面这些操作，他要获取其他的信息，你看登录成功，他这个会返回一个登录成功， 然后这个如果他密码写错了，他这个不等于零啊。消息这个对应的就这里的这个状态不等于零。你看啊， 就你现在有个大概理解，你看密码不正确，他是不是五百？嗯，他这里五百，他这个是要等于零。五百。 else， 就是， 否则嘛，如果说他这个不等于零的话，就是否则他等于五百，还要报错了，是这个意思。 这这个意思理解吧。嗯， 对，就一开始登录的时候是一个判断，他就判断他的，就是比如说我给你一百块钱，你给我一百块钱，就是你给我一百块钱，我要判断你给的我这一百块钱是不是要给到，是不是已经给到我了， 是不是给了我二十块钱？是这个意思。如果说你不给我二十块钱，我不给你讲课了，就相当于这个就是服务器来判断的嘛，这个是前端来判断的。服务器。服务器的是啥样的服务器的？你看啊，就我刚才给你把前端讲透了吧，实际上前端他就由这个 前端，他正常的用的技术就是这样弄， 对吧？嗯，就就别的都别记， note 也别记，就记个 ve 就 行。 然后前端 ve， 然后他有，就是不管他的，就说他的所有页面吧，就不管他用的什么东西，首先进他页面对不对？嗯，然后刚才我说的那个脚本逻辑对不对？ 就是要把这个输入框的内容变成那个请求服务器的内容。嗯，这个就叫第一页页面吗？啊？就那个在建筑的那个，然后这里有个对应的页面样式，对吧？ 对，页面样式就是刚刚那那个大楼这个模板是黑字啊？还是这个？然后他的这个布局呢？就是这个在左边，这个在右边，这个就叫布局。 现现在我看到的这个其实就是两个东西，左面的是样式，右面的是。呃，布局，不是不是，你看啊，这个和这个，你看这个东西就是绿光满了，操， 就是绿筐，黄筐，对吧？嗯，你看啊，绿筐里面他的东西是不是在这边放着？是不是在这个左侧放着呢？嗯，是。然后这个照片呢？黄筐里面的照片他是不是在右侧放着呢？ 是，然后这个就叫页面布局。其实你改改代码也能把这个图片放到左边，然后把这个输入框放到右边， 整整个这两边的整个，这能看到的都就叫页面布局。对，能看到的也就叫页面布局。然后的话就是我，我开，我开的这个是让你看那个脚本逻辑的，这个你可以先关掉 啊，你看这个布局左边是输入框，右边是这个图片，对吧？嗯嗯嗯，这个就叫页面布局，静态页面就是刚才我说的那个 time 吧，静态页面。嗯嗯，然后它静态页面它是不是有对应的输入框？ 这是不是你要在这输入框里面写你的账号和密码呀？也就是说这个金泰布局，金泰页面里面基础上就在填这个脚本逻辑，脚本逻辑就相当于这个账号密码，对，他，他这个东西就和那套娃一样，一层一层的。 嗯，就是先，但是他这个页面钥匙和这个脚本是基本上没有什么关联的，因为钥匙主要是和这个静态页面有关。就是，嗯，这两个搭配起来要页面怎么布局啊？然后页面上要用什么颜色之类的 对调整置换呗？对，然后这个脚本逻辑呀，这这个脚本逻辑，你看 你在这个登录框写了这个账号，一写了这个密码，你是不是要请求啊？请求以后这回返回来一个登录框，登录成功吗？嗯，然后你请求后端的那个服务器呢？实际上就是 你要把输入的这个发通过这种请求的方式发给那个服务器，然后服务器接收到你要登录了， 就接收到你登录这个请求了。你看接接到你登录这个请求了，他这个操作就叫他的逻辑，就是下面的这些东西你可以全部调，就只看这个登录，他不是输入的东西变成这个样子，这个就叫逻辑。 嗯，这就是像如果这个服务区识别到逻辑对的话，他就登录进去了，逻辑不对的话他就进不去。对，你，现在你，你先 基本上理解了，对吧？现在就是我们要看就是你是怎么把你输入框的这个账号和密码发起来一个请求给到这个后端，给到服务器， 你看它，嗯，这里的一个官话，它叫接口，接口呢？路径，它就是一个网址，你看这不 http 的 一个网址吗？嗯， 然后呢？这个网址它是由这么些个东西组成的，你看啊，就是你自己的电脑 ip 就 叫 local house 的， 或者一二七点、零点一，自己电脑 ip 就 叫这个服务器的 ip 是 几它就几，然后这个八零八零，它叫做端口， 八零八零，它叫做端口，端口的话就是默认的八零八零。代码里面没设置啊，在设置的这看 这，嗯，然后它的这个，然后每一个项目呢，它这里都有对应的每一个前缀， 知道吧？就每一个项目他都有一个对应的前缀，比如说你这个叫信息交流，信息交流，这就是你信息交流的一个前缀，然后你信息交流一下就是你这个项目的前缀，然后下面他假如说有一个用户的功能， 我找个用户看一下啊，你看你这是不是有个用户模块， 就是有个用户大的模块，这里你什么都不用管它，你你就知道这里有个用户模块，然后用户模块里面具体的一些操作，比如说用户要登录，嗯，然后比如说用户要注册， 然后就是你看一层一层的你的 ip， 你 的端口，你的这个运行的这个项目名字，然后你的具体到某一个模块的这个模块名字，然后下来就具体的功能。从这你看它接口是有这么些个东西组成的， 然后你现在前端其实就把这些东西都配置好了，携带满的时候就把它都写好了， 那这个接口是这么多东西组成的，那个这个这么多东西是含在接口里面的，还是他们是并存或者并行的呢？ 这些东西就是接口，接口就是下面的东西啊，啊，就相当于是给你暴露出来一个网址，你去请求这个网址，把相关的信息传传给这个网址，就说明你的这个动作就叫做接口接受你的这个请求， 因为你发起请求你要有对应的地方嘛，那也就是说这个 网网址的主网址就是一个接口，这个网址的组成部分是 http， 就是 ip 加这个八零八就是一个前缀 单口，对对对，单口是前缀啊，拼音是前缀，单口前缀功能前缀，具体给它操作 这个接口，知道它是由哪些东西组成的了，对吧？嗯，对，大概就这个 ip 端口再加，然后前缀他是要给你的这个网址里面传出去了，这时候看他是怎么传，他是把这个信息都拼接在这个上面， 就拼接在这看到没有？嗯，拼接在这去传的，对吧？ 嗯，那你先等一下，现在我看，嗯，上面，上面这上面这个网址 ip， 对， 哎，对，项目前缀模块前缀具体功能，后面拼接了参数， 嗯，对吧？后边的就是具体想想要什么或者想搜索的这个东西就是你前端，这就是你这传的参数，这这里传的参数就你写了你的登录密码嘛，就传的这个， 通过这个把你输入框写的内容放在这个网址上面去发起了一个请求， 这个就叫请求后端接口，然后你你请求到后端接口，后端因为现在时间不多了，就还有十三分钟就赶紧跟你讲完，然后你回头自己看看录屏， 然后你看后端，你不是有有到找到这个对应的登录的这个接口了吗？嗯，这这一步理解吧。 这是已经从那个接口接接，已经接到这了，这个就是后端，然后这个就是后端，然后你看后端把这里删掉，然后你看后端的他是有个用户名和密码， uzi 和帕斯沃尔这两个翻译过来就是用户名和密码，账号密码， 然后这时候你输入这个账号，他再去从数据库查一遍这个设备是， 就是你现在用的就是后端，他其实就是一个数据的处理的一个过程，就是接收到你前端传的这个数据，把你前端传的这个数据发给 数据库，然后他处理好之后数据库，再对，再从数据库把这个数据返回回来， 返回回来的目的就是，呃，就是正不正确。对，你看，你看这不是因为这种加完这种代码，你看就 select one 查一条数据，然后这个条件，这个一口里面就是条件， 这个就条件知道吧？查询条件就你现在什么都不需要管，它是一个查询条件，就是根据你说的这个账号，我在那个，你看数据库，数据库这个，这个就是数据库，数据库不是有这么多数据吗？嗯， 我现在要在这么多数据里面去找到账号一的所有的相关信息， 理解吧？我现在通过这个账号一，就是我输了这个账号一，我通过这，这个这个值，我在这个里面搜索， 搜索到相关的东西。嗯嗯，然后现在我查到，你看他，因为他是写到一起了，这些东西都写在一个，这个呢叫做对象，对象编程加完是面向对象， 第二把是 后端，他是后端，然后他是面向对象编程的。嗯，别的你都不用管，你现在也不需要知道对象是什么，就是。嗯， 就是你把对象想象为他是一个电脑，他这个电脑里面又要有这个鼠标，又要有这个键盘，又要有这个麦克风，又要有这个屏幕，这个电脑他就是一个对象，然后他这个对象下面你看这个账号 呀。卧槽，这个账号下面他是不是有这个对应的账号密码？这个用户的名字，用户的年龄、性别、手机号，头像简介，对吧？ 就是我现在讲的东西你都能听明白吧？嗯，你看你现在不是从数据库根据这个账号把这些信息都传过来了吗？ 然后你从这个里面获取到你的这个密码，再去跟你的输入框的那个密码进行比对一下，这里的这个一口他就叫等于，等于这个密码是不是等于他， 他的一个操作就是他判断一下他俩是不是一样的，就是你输的密码和数据库的密码是不是一样。嗯，这你理解吗？ 嗯，这个都是后后后端的内容了呗。对，这里就是后端的内容了，因为你看啊，他这个是 ctrl 了， ctrl 了就是接收前端参数的。嗯，然后接收到前端的这个账号和密码，然后再把后端处理好的逻辑给它返回回去， 就是通过服务器返返回回去。对，然后你看这样吧，如果他的密码输的密码跟数据库的密码不一日不一致，他直接给他返回账号，或者密码不正确，嗯嗯， 对吧？你看我们这账号密码不正确，嗯，这就是通过我看到返回了，然后密码正确呢？ 然后这个是这个，你别管了，这个逻辑他就是用来去判断这个账号是不是被锁了，这个你不用管。嗯，然后在在下面这个会生成一个托克令牌，这个托克令牌 举一下例子，托克令牌就是这个托克令牌，就是这个东西，就是你输入正确的时候这个，因为，因为就是他名字上叫做令牌，就是比如说这个这个后台的这个系统，他是一个动物园， 对吧？动物园，你能理解吧？你进动物园是不是要买门票的？嗯嗯啊。然后现在这个账号和密码就有钱，你把钱给了动物园，动物园给你返回来这个门票， 嗯，这个就叫门票，他就是令牌。然后呢？你现在在动物园里面，这个这个像里面你要看猴子看到，你要看大象，把这个用户切换为大象看到， 然后你现在又要这个就是页面布局呗。对，这个就是从那个登录了这个系统以后，你拿这个令牌，你可以去请求，请求这个所有的后端的数据，令牌就是相当于这个鼠标呗，鼠标点哪里是哪里呗？ 令牌不是这个东西，令牌就是因为你要做，你给这个系统做登录，你是不是只做一次登录呢？嗯，对， 你只用登录一次就行了吧？登录完一次你要要请求这个信息，要请求新闻公告，要请求用户，对不对？嗯，就和你在动物园买完门票看老虎、看大象、看狮子是一样的道理， 就是相当于就是你要带着这个登录的这个门票，嗯，去你看大象的时候，你要出示你的动物园这个门票是这个意思。 嗯，我令牌，对，这个就叫令牌。然后我们现在看这里后端他一般是三层架构，嗯，然后第一层这个就是接收前端给的参数返回， 处理好的参数给前端，然后这个所有的事呢，就是去接收这个麦克的，就是接收到这里的参数，然后去数据库写一个收口，收口就是 一个，也是一个编程语言，他就是用来去查询数据库的，然后你看一层一层前后端交互，这里是一般就用来去处理逻辑的，你就你就这里就记住执行业务逻辑处理参数，把你你想要参数一变成二， 少部分做参数转换，你就这么理解就行了，你不要把它想的太复杂。嗯，那前端跟后端有没有相相互对应的这个内容呢？没有关系，后端它相互对应的内容只有是你输入的账号和密码， 嗯，就是你只有你输入的账号和密码给到后端，后端接收到你输入的账号密码，判断对不对，然后再通过这个方式返回给前端，然后页面再变化，就是给你排那个输入登录成功呀，账号密码不正确这种框。嗯啊， 然后你看就是你后端，你要把这三步先搞明白。首先接收参数，然后拿上参数处理逻辑，把参数转换成数据库能看懂的，然后这里再去跟拿上那上一层的参数去和数据库做交互， 然后这里是数据库，然后参数就是一层一层的这样返回给他，这样理解吧，一层一层的返回的，他不是一次性返回的，数据库返回给这个，这个返回给这个，这个再返回给这个，最后这个呢？拿到这个请求参数，然后再从这返回过来给到前端， 通过 http 的 响应传给前端，这个就是 http 有 一个请求和响应，这里就是它的请求参数，这里预览响应，这就它的响应参数，就字面意思就理解就行了，不要把它想的复杂了。 响应参数，这里是请求参数，就是我现在大概给你这样这样讲了一部分以后，你现在理解了吗？ 我理理解的是这么个，就是前端跟后端，然后前端是就是。呃， 怎么说呢？就是有个东西登录进去之后，呃，他会有有页面，央视布局啊，甚至字段，这些都是属于。呃，前前端的布局， 然后再发发送一个网址，这个网址是由四部分组成。呃，然后请求后端，后端的服务器接收信息之后会反馈，如果正确的话就可以登录到后端里面了，不正确的话他就登录不进去，会提提示别的信息，正确是提示零， 然后这这样就已经到了后端了。 对，然后后端再按照一定的格式返回给前端，然后后端的格式。嗯，那就我专业术语是像后端是叫什么呢？叫加法。加法是什么？ 加把系统还是加加把？加把语言是吧？对啊，那前端呢？前端是 v u e 啊， v u e 就 v u e， 你 可以理解为 z s 语言，嗯， z s 语言行。 然后后端呢？通过这个 java 语言，呃，来来请求对应的内容，对应的内容就是这个参数 对接收到参数，处理完这个参数从数据库拿到，就是接受前端参数处理这个逻辑， 然后再去查数据库，从数据库拿到参数一层一层的再返给前端，通过这个 http 响应的方式返给后端的。这这几个框架是固定的吗？顺序也是固定的吗？对对对，这个都是固定的 啊。就是比如说先是呃接收参数，然后是返回参数， 然后呢？呃，如果看这个接受的结果，如果对了再来执行， 执行完之后又又又又反反馈还是又又请求呢？通过这个数据库就是请求和响应，这里我给你改一下，响应 这个时间快没了，就是还有一分钟就是前端发起请求到后端，后端返回一个响应给前端， 就是你。现在你不要想的太复杂了，他只不过就是一个看着，只不过就是一个请求参数，通过这种方式去请求参数，然后接收到这个请求以后，把前端响应的就是请求端响应的这个参数返回给他，就是一个请求，一个响应 就是我和你说话，然后你给我回应，就是这个意思，然后你给我的回应，你要给我正确的回应，否则我这个东西就不能运行。服务器算是后端是吧？对，服务器算后端。

好，我们来看这道题， will 的 双向数据绑定原理是什么？ will 的 双向数据绑定原理一托于它核心的响应式系统和组件化设计，实现了试图和数据模型之间的无缝对接。 那么在 will 二版本当中呢，这个机制主要是通过 develope 这个方法实现数据劫持，并结合观察者模式和依赖收集来实现的。试图更新 vivo 三呢，它把这一原理演变成了使用 proxy 来全方面的数据代理。那我们首先呢，来说 vivo 二的双向数据绑定原理， 它主要有这么几个步骤啊，第一个呢，就是数据劫持，第二个观察者模式，第三个依赖收集，第四个试图更新 好数据劫持呢？数据劫持呢？嗯，它是在 will 的 初识化阶段，通过 object 点抵犯 property 这个方法对数据对象的属性进行递归处理， 给每一个属性添加 get 和 setter。 当属性被读取时，那么 will 呢，会追踪该属性的依赖，当属性被修改时， will 会触发依赖相关的更新逻辑。 那么观察者模式就是转换为响应式的数据对象，实质上就是一个观察者。那么当数据变化时，就可以通过 site 通知所有的依赖，然后引发试图更新。 依赖收集呢，就是 view 编辑器在解析模板的时候，会在遇到数据绑定的地方去执行 getter， 从而呃把当前组建实力注册为该数该数据属性的依赖。 will 为此创建了一个 deep 类，也就是呃 depends， 负责收集和通知这些依赖。最后当数据发生改变的时候，会调用 deep 类的 notify 方法通知所有的订阅者。 那么组建 word， 收到通知后会重新计算虚拟 dom 数，然后通过 will 的 高效 deep 算法对比新旧虚拟 dom， 最终真实的 dom 进行必要的最小化更新， 实现试图与数据的同步。那下面呢，咱们再来说一下路由三的双向数据绑定原理。 在路由三当中呢，响应式系统，它实现呢，更加的先进和灵活，因为它利用了 forex 来代替了这个底喷呃，底泛 property 对 吧？可以透明地代理整个对象及嵌套属性，不需要进行地归处理。 那它主要是有这么几个步骤啊，第一个， proximity 代理，第二个，嗯，响应是系统。第三个， effect hook。 首先呢， vivo 三，它通过 proxy 来监听数据对象。 proxy 能够更全面地拦截对象上的操作，嗯，包括属性读取、属性设置、属性增删以及自身操作等等，极大提升了性能和兼容性。 那么 vivo 三呢，它引入了新的响应式转换系统，会把原对象转换为一个具有跟踪依赖和触发更新功能的代理对象。那么当代理对象的属性被访问或修改的时候， vivo 会自动跟踪依赖并实时触发，试图更新。 在 real 三的这个 composition api 当中呢，通过 reactive， r， e， f 等函数创建响应式数据，并通过 watch compute 的 等钩子函数来创建依赖和执行副作用，当响应式数据变化时，会触发这些内容，然后更新矢图。 总的来说呢， view 的 双向数据绑定原理在于，通过一系列底层机制创建数据和试图之间的绑定关系，确保任何一方的变化都能够迅速地反映给另一方，实现了数据驱动试图的自动化流程， 好吧，那这个呢？就是 view 二、 view 三它们两个关于双向数据绑定的一个原理。

好，我们来看这道题， view 中的虚拟 dom 是 什么意思？它的工作原理是什么？ view 当中虚拟 dom 呢？它是一个抽象的概念啊，它是对真实浏览器 dom 结构的轻量级可操作的。呃，内存中的一个表示。 那么虚拟 dom 呢，它并非实际存在于 html 文档数中的节点，而是以 gs 对 象的形式存在，这些对象呢，包含了与真实 dom 节点相对应的属性和结构信息。 那简单点说呢，就是 gs 对 象的形式描述 对象包含了和真实 dom 节点相对应 的属性和结构信息，这呢就是讯导。那么它的工作原理是什么呢？哎，原理有这么几个步骤，第一个呢就是创建，第二个呢就是更新， 第三个呢就是比较，第四个呢就是，呃，更新真实到。 好，咱们分别来说一下。在创建阶段啊，那么当 will 渲染组建的时候，首先会通过模板或者 render 函数生成虚拟 dom 树。 每个虚拟 dom 节点都是纯 gs 对 象，它包含了标签名、属性、子节点等信息，它能够准确地反映出组建的结构和状态，这个呢就是它创建阶段。那接下来就进入到了更新阶段， 当组建内部的数据发生变化的时候， real 呢，会重新计算数据，绑定生成新的虚拟 dom 数。 这个时候 will 并不会立即执行更新真实的 dom， 而是把新旧两颗虚拟 dom 树进行比较，俗称 def 算法。那接下来呢， will 就 通过高效的 def 算法比较新旧虚拟 dom 树 他们之间的差异，找到需要变更的部分，而不是盲目的重新渲染整个页面。这种差异检测呢，可以细致到属性的增减、文本内容的变动、字典节点的移动和删除等等。 这个步骤结束之后呢，就开始更新真实的 dom 了。他找到最小的 dom 更新集 以后， will 会把这些变更应用到真实的 dom 树上。通过对真实 dom 进行精准的增量更新， will 能够显著降低 dom 操作的成本，提高页面的渲染性能。 这个呢，就是它的一个工作原理。 ok， 那 它有哪些优势呢？你比如说性能优化对吧？跨平台兼容 益于实现组件化性能优化不用说了，通过在内存中预先计算和 对比差异，减少了不必要的 dom 操作，是不是提高了页面渲染效率，对吧？那跨平台兼容就是说，由于虚拟 dom 它是一个抽象层，因此 vivo 可以 将同样的更新逻辑应用于 web 平台和其他支持 ts 的 平台， 对吧？那么异于实现组件化就虚拟 dom 呢？让 view 能够轻易地管理组件级别的状态和 ui， 简化了组件通信和状态管理。 总的来说呢， view 当中的虚拟 dom 是 它提高呃这个渲染性能和动态更新的核心技术之一。通过在内存当中模拟 dom 结构并进行高效的差异计算， will 得以在数据变化时快速精准地更新用户界面，确保了流畅的一个交互体验。这个呢，就是 will 当中关于虚拟 dom 这一个点的知识了，大家呢，也一定要掌握了， ok。

下面这个问题，导航里边我单独说一个东西，叫做激活状态，这啥意思呢？就是我们搞定这个选中效果， 其实这个选中效果啊，导航就通过个 rotor 宁可生成的 a 元素啊，他已经给你考虑到这个问题了，因为我们导航里边有些当前到底是什么页面还要给选中，对吧？他怎么考虑的呢？他会用当前路径。什么叫当前路径？如果你是哈西，这就是当前路径。如果你是不是哈西，你是这个玩意啊？ history api， 那么这个玩意就当前路径。 总之呢，他会根据模式来者得到当前路径，对吧？他会把当前路径和什么呢？和你的导航路径进行匹配。什么叫导航路径？ 这种？这种就叫导航路径，由头领口的 two 跟每一个 a 元素进行匹配，比方 blog 跟这个什么斜杠进行匹配，然后呢？ blog 跟什么 blog 进行匹配好，然后他会在合适的地方给你加上一些内样式，这内样式他到底什么效果？他没有写，你是 自己去写，然后把那样式的名字给你加上，看着啊，他怎么弄的？如果当前路径以导航路径开头的算作匹配， 那么他会加上这个的样式。如果当前路径完全等于导航路径，得算做精确匹配，他可以加上这个的样式。比方说我们访问的路径是 blog， 比方说我们访问这个路径就当前路径吧，那么他就会跟这个，他就会把这个路径拿去跟这些导航链接进行匹配。怎么匹配呢？如果说你的导航路径是这个，你看首页是不是这个， 有没有匹配？有匹配的哦，因为当前路径是以这个路径开头的，你看是不是也斜杠开头嘛，至少有个斜杠嘛， 那么这个东西就算匹配，他会给你加上这个的样式，你看一下我们的首页，是不是加上这个的样式叫做 rotar link x 啊？后面这个是我们自己加的啊。看前面这个啊，你看啊，第一个 a 元素是不是跟当前路径 vlog 进行匹配，它是以它开头，因此呢，匹配 好第二个 a 元素啊，你看 vlog， 它不，这个路径不仅以它开头，而且两个相等，因此它可以加两个样式，一个是我们刚才看到的 rotor link active 匹配的样式，还给你加了一个精确匹配的样式。呃，那样那样式啊，叫 rotor link exact， 精确的选中的样式， 对吧？可以加两个样式啊，你看，我这里也记住了的，不仅匹配，还精确匹配好。下面这个呢？呃， box 呢？ 这个，这个玩意，这个路径是以他开头吗？不是那么一点关系都没有，当然更加不可能相等，对吧？一点关系都没有，所以说没有的样式，下一个呢？一样，下一个，一样，没有的样式，他就默认用这种方式来做的，哎，用这种方式来做，我们能不能写出来这个效果呢？ 感觉上好像是可以的，对吧？我们给哪个的样式设置样式啊？有人说，哎，我应该给他设置样式，对不对？哎，但是呢， 你会发现他呢，有可能有两个元素都有这个样式啊，也，他也他开头，他，因为他不是精确匹配嘛，他只是匹配，对吧？因此呢，他有可能匹配，他也有可能匹配，所以有两个 a 元素都可以选中，那能不能用精确匹配来设置个那样式呢？用这个那样式来设置这个效果呢？可以啊，我们来试一下吧。 我们在这里啊， menu 这里。呃，找到下面我们之前的事实吗？是 negative 的，对吧？我们这里改成这个，改成它这里写的这个 rotar， ink， exact， egg， tea， 对吧？改成这个类样式的名字。好，你看文章是不是选中了 点？首页是不是选中了点？关于我是不是选中了点？项目效果是不是选中了，你看那样式啊，你自己去看那样式好像没问题啊，挺好的呀。 啊，如果说你真的是这样子的话了，如果说没问题的话，那就 ok 了，那就设置没问题。但是在我们这个项目里边实际上是有点问题的啊，因为我们其中有一个地方有点麻烦，什么地方？文章这里，文章这里有可能会出现这种情况， 他的链接可能是这个样子的。比方说看一下啊，我们到找到文章的一个分类，某一个分类，你看他链接变了，变成这个样子，因为在文章这里可能有很多个不同的页面都他都是要选中他的， 懂我的意思吧？也就说我现在要比方说做了要做的是什么？这个东西访问这个地址，这个 a 元素还是要选中，但这个 a 元素能选中吗？选不动了。为什么呢？因为现在这个 a 元素他不是精确匹配了，这是我们的当前路径，他只是以他开头加上那个 rotling x， 但是我们要做的是不是他还是要选中， 那说明啥呀？说明我们肯定肯定是不能用他了，但是用他也不对呀，对不对？是不是用他也不对啊？因为用他的话，有可能把他又影响到了，对吧？他也有可能，因为他也是以他也写给以前刚开头的，对不对？哎，是不是就出现了一个矛盾啊？用他的话，一看两个都选中了，对吧？肯定是不对的。 那怎么办呢？你看啊，现在就接下来就可以改动了，他是支持改动的这个匹配规则。 rotar link 啊，这个导航啊，他有一个不耳属性的一个寨子。什么意思？精确的。啥意思呢？如果说你添加这个不耳属性了，那么他就会把匹配规则就之前这个匹配规则改了，只有精确匹配，他才会有这个的样式。 好比方说，看一下例子啊，当前访问路径是 blog 首页，我是精确的，那么不好意思，现在没有的样式了， 因为他一旦变成精确匹配的话，他必须要他和他相同，才会有这个类样式，不是精确匹配的， ok， 那么他就有两个类样式，跟之前一样，对吧？而 boss 是精确匹配的，那没有这两个，这个东西也没有啊。那么再比如 blog d t l 一二三，比方这个访问路线 好，我们的导航，这是我们导航，首页导航，他精确匹配，那肯定是什么路，什么内名都没有。那如果说他不是精确匹配，是不是至少有个这个东西 以它开头吗？于是呢，我们把它改成一个，再看一下啊，看一下这个 a 元数，是不是现在什么样式都没有了，没有一个精确匹配的。看下首页，只有精确匹配的时候，它才会加上加上这个样式啊。前面这个样式我就不用了，就用这个 rotarind att， 因为它也是只有精确匹配的时候才会有， 对不对？哎，是不是就相当于是我们之前写 menu 的时候写过了这个东西啊？是啊，就这个东西，一个 sex 对不对？那么现在把这个属性名字换一下啊，一个 sex 是不是要精确匹配？ 激活状态是否要精确匹配好？那么这里这边文章呢？是 boss 不需要精确匹配，因为文章里面还有很多的东西都要匹配到文章，只要以文章开头就行了啊，首页必须要精确匹配。关于我必须要精确匹配，这个必须要精确匹配，这个玩意必须要精确匹配，因为他们都只有一个页面。好，那么这个没设置不要 啊，没有必要要了，因为现在有一个 root link 啦，它会自动绑我们家的钥匙。好，回过来，你看，这是我们的数据，那么我只需要把这个 excite 绑定到哪儿？ 绑定到 it， 点一个 reaction。 首先我们看首页精确匹配了，是不是应该有他就有这个样式，只看这个样式啊？然后点文章精确匹配了，是不是有这个样式？但是文章这一块呢，我不要求他精确匹配，因此呢，我们访问这样的地址， 访问这样地址是不是也有这个样式，你看文章对不对？而关于我是精确匹配的，因此呢，必须要跳到这才有才有这个东西项目效果。哎，你看现在是不是符合要求了？我们是不是要只要设置这个样式就行了，对不对？而这个样式是不是我们已经设置了？刚才已经设置了啊，你看我点文章没问题吧？这东西都没问题。然后我们访问刚才刚才的文章下边的地址啊， 你看他是不是也是选中的，对吧，就挺好了。哎，我们就把这个激活状态就是选中效果锁好了，好就梳理一下啊， 关注都一剪辑号的同学打断一下啊，我是袁老师，总听我讲短视频，这回呢，来听听我讲的大课。我给大伙呢专门录制了一套大吃课，现在呢，免费送给你们， 不管你手上现在看的是什么样的资料，都应该先停下来，先来看一看我这套大师课。一方面呢，这套课程里边的内容都是前端最核心的知识，其他的知识都是在这个基础上生长出来的，你先掌握好了这个再学啥都事半功倍。 而且呢，自此以后，你对前端技术的理解不会存在任何的障碍。另一方面呢，这套课还能够提升你的眼光，让你具备分辨好坏的能力。 看过大师课之后啊，有一些不入流的资料，课程博客论坛你就看不上眼了，这种能分辨好坏的能力也能够为你将来的学习省下不少的时间。 所以呢，还没有领到课程的同学，赶快抓住免费领取的机会，进评论区第一条，加入粉丝群，然后根据提示领取就可以了。 那有些人有些朋友说，那这个内样是名字太长了，我不喜欢这个内样式。那我能不能换成是 liket 的呢？可以，他可以改的啊，也是通过这个主线的两个属性改，一个是改 active plus。 这个属性改的是什么呢？改的是这个。 呃，改的是这个类样式的名字啊，改的是他的名字，还有一个呢，是改这个哎， exact active class 改的是什么呢？改的是这个类样式的名字啊，这个类样式的名字呢？我倒是用都不用改一下吧。把这个 active 的样式啊， active class 的样的名字改成什么呢？改成 selective 好，那么这里呢，改成 selective selected 啊，改成自己的那样式好。然后呢，把这个 exact 呢给它设为空啊，不要这个样式了，这样式对我来说没用， 这里空好保存啊。我们来看一下，效果是一样的，你看我们现在 a 元素， 你看 class 是不是挺好的，对不对？ ok， 这就是我们目前的啊，这个地方的做。

五分钟教你学会 vivo 三响应式系统架构我是鞋团小组，欢迎来到和鞋团小组一起学 vivo 三原码系列课程。今天我们将对响应式系统的一个系统架构来进行深度解析。 本站的目标其实是会建立响应式系统的整体认知，理解核心设计哲学。回答数据如何驱动试图更新，为后续深入各个模块打好一个基础。 在日常开发中，我们习惯了这样的代码，就是修改数据试图自动更新啊。去对一个 count 就是 r， e， f 包裹的一个 count 的 value 进行一个修改，然后无需手动去刷到 dom， 试图就自动更新的。这种代码看起来理所当然，但是提，但是停下来去想一想， 核心的问题就是 view 如何去感知变化，它又是如何精准地去只更新依赖 count 的 那部分矢图呢？要回答这些问题，我们首先需要去先了解数据驱动矢图这个概念的眼眼睛历程。 在接块语时代，更新试图需要是手动操作 dom 啊。就比方说我们定义了一个变量，我们当 increment 的 create 函数的时候去修改这个值，但是我们需要手动去更新这个 count， 通过 test 去手动更新这个 dom 元素的值。这样子的方式其其实问题非常明显，试图和更新的同步 其实是完全依赖于开发者手动去维护的。当应用变得非常复杂的时候，数据之间存在依赖关系时，就很容易移动某个更新，导致试图与数据不一致。而现代框前端框架的核心理念就是声明式编程， 开发者只需要去描述试图是数据是什么和试图应该是什么样子？框架去附着二者的为同步啊，同样是刚刚那个例子，就是 count 通过 i e f 去包裹，然后模板去声明的一个试图和数据的之间关系。 而我们只需要去修改数，数据试图就自动地同步这种数据变化。试图自动更新的能力正是响应式系统需要解决的一个核心的问题。 实现数据驱动试图有非常多的一个技术方案，不同的框架，其实它去做出了不同的选择。我们以 react 为例， react 它是需要去显示的 set state， 然后再通过 which dom default 的 实现方式去实现的。 它需要去手动触发更新，通过 def 去找出变化。而 view 通过 prospire 去自动追踪加精准更新，它会自动地去监测变化，精准地去知道哪些一代去需要更新。而 stodo， 它的一个 singers 的 一个变式优化去无 wechatdom， 而 serverlet， 它是编辑时去进行一个响应式的编为命令式的代码，去运行时去开销时是会比较小的。而 view， 它选择的基于 prospire 的 自动依赖追踪方案，这意味着开发者可以像操作普通的 java script 对 象一样去操作响应式数据。而框架它会自自动地去追踪哪些地方使用的这个数据，并在数据变化时精准地通知地方去更新。这种透明的开发理念是 view 的 一个设计哲学之一。渐近式，低侵入式以及透明， 你不需要去学习特殊的 api 去触发更新，你只要去修改数据本身就行了。在深入细节之前，我们需要去建立一个架构的一个地图。 real 响应式系统其实可以分为三个层面，数据层、追踪层和执行层。让我们去逐层逐层的去理解 数据层，它的目标其实就很简单，去负责创建响应式数据。比如说 relative， 去将普通的对象转换成响应式对象，通过 plus y 去拦截读写操作。 而 r e f， 它就叫任意值去包裹原始类型去包装为响应式的引用。而 compute 啊 computed， 它是创建派生数据，去依赖其他响应式数据的自动计算。 而追踪层，它其实是去负责管理依赖关系 target map， 它是一个核心的一个实现，它是一个全局的 wake map， 它存储的哪个对象的哪个属性被哪些副作用去依赖，而 deep 就是 它里面的依赖容器，每个信响应式属性去对应的一个 deep， 而 link， 它其实是连接 deep 和订阅者的一个节点，去采用双向链表的一个结构 而直。而执行层，它其实是负责副作用的一个调度与执行。比如说 reactive effect， 它是封装副作用函数去管理依赖收集和触发， 而 watch 就是 它实际上是基于 reactive effect 实现数据监听。而 effective scope， 它是批量管理多个 effect 的 生命周期。 这三者的写作的核心流程就是副作用函数执行时访问响应式数据，响应式数据通过 trick 收集这个副作用作为依赖，而数据变化是通过 trick 通知所有的依赖的副作用进行重新执行， 收集一代触发更新的循环，就是享意识系统的核心啊。大家对这个可能是会有点懵，但不用紧张，等下期再会有一个六个章节，会去详细讲解这三层的一个写作，一个关系，而里面提到的一些 api， 我 也会去进行一个详细的解析 理解的。享意识系统去首先需要去先掌握四个非常核心的概念，他们就像四个齿轮一样相互养合，去驱动的整个系统的一个运转。首先第一个就是享意识数据， 它其实是被代理的数据源去访问和修改都会被拦截。它实际上它是 reactive 去创建的 plus y 和 ief 创建的 ief implement。 而副作用函数是什么？它是依赖响应式数据的函数，数据变化时去需要重新执行，它其实是 reactive effect 去包装的函数， 而依赖收集。依赖收集是什么呢？它其实是建立数据与副作用的关联，它嫉妒的谁依赖了什么？ 它是通过 trick 函数，通过 link 去建立关联的而触发更新呢？它其实是数据变化时通知所有的一代方重新执行 trick 函数，它其实是便利了 deep 的 订阅者。这四个概念形成了一个完美的闭环，副作用去执行访问响应式数据 trigger 收集依赖建立 effect 和 deep 关联，数据变化了，它通过 trigger 去触发更新。那我们来通过一个具体的例子来理解这个循环，我们来看到我们定义的一个 state 的 一个响应式对象，通过 reactive 而 watch effect， 它其实就是一个副作用函数， 这 console 就是 访问收集依赖，就是访问响应式数据触发依赖的收集。而 state 它是通过修改触发更新重新执行副作用， 它会它的一个核心链度是什么？就是当 watch effect 回调执行时，访问 state 的 count 会触发 plus y 的 gift trap， 进而调用 trick 将当前副作用记录为 count 属性的依赖。而当 state in count 加加的时候去 执行的时候，它会去触发 set trip， 去调用 trigger 通知所有的依赖 count 的 副作用去重新执行。而这几个过程它其实有个非常关键的数据结构， 比如说一个全局的 target map， 它这结构就是一个，大家可以看到一个 target 啊，一个 map， 它其实是有个 key 和 deep， 而这里它其实是存储的所有响应式对象的一代关系。 deep 它其实是一个一代容器，每个响应式属性定义一个 deep， 内部去维护定业者一个链表。 为什么是选用一个 weakmap 做一个最慢层呢？因为它的键是弱引用的，当 target 对 象不再被使用的时候，可以被垃圾回收，相关的依赖信息也会自动清理，避免那个内存的一个泄露。初二其实是使用 object 点 define property 去实现小意识的，这是当时 浏览器兼容性最好的方案。但它有几个非常众所周知的限制，就比如说无法去检测对象属性的添加和删除，必须通过 view edit 和 view edit。 第二个就是无法直接监听数据缩影的一个变化，需要重写数据方法。而第三个就是触手化的时候，他去通过地归去便利，对象越大，而去 触手化的一个也就越慢。而 real 三的话，它是通过 plus y， plus y t n 呢，去做了一个属性代理，属性添加和删除数据缩影，而且包括它的触手化性能通过懒代理的方式是非常的快的一个进步。 那同时在内存占用的时候， view 二它其实是每个属性一个 deep， 而 view 三它是一个按需的一个创建。 view 三它的一个核心的一个实现就是 you 通过 viewplus y 嗯 get 和 set 一 次性代理去整个对象，而且它是懒代理的，就只有访问到的一个，就大家可以看到 这里就只有一个访问到的一个对象才会被代理，而不是促使他去递归所有的对象他的，所以他的性能就有个非常大的一个提升。那同时 real 三还引入了一套标识系统来识别响应式对象的一个状态， 那比如说它里面是有个 skip， 它是标记对象跳过显隐式转换，它 is reactive， 是 是否代 reactive 待遇 is randomly， 是 是否一个 random 一个待遇，它 is shallow 是 否这个浅层的待遇，还包括它里面是有一层 low 去标获取原始对象， 然后 is i e f， 是 否 is i f 这些标记通过 pro spy 的 gift trip 去返回，不会真正存储在对象中，既保存了内存，也保存了对象的一个纯净。我们来看一下它的一个源代码文件的映射，大家可以看到这是一个 index 点， t s 就是 api 的 导出路口，然后 constant 是 flag 的 定义， dips 和 effects。 讲完浙江，我们来看一下我们所在这个章节一些深度的思考，就比如说 view 选择自动依赖追踪而不而非显示的 state state， 它是有何优势？然后在什么时候会成为一个瓶颈？而价格的结构，为什么 view 三的响应式系统被单独成为一个 view reactive 的 包，这种结构设计对于 field 的 项目有什么意义呢？那第三个就是一个技术选型，如果让你设计一个响应式，还有哪些可能的方案？它们各自的权衡是什么呢？ 而第四个内存管理， target map， 它是使用一个微 map， 为什么会使用微 map， 而不是使用一个普通的 map？ 这对内存管理如果有什么影响？如果是使用 map 会导致什么的问题呢？而这的四个问题，那留给所有的观众大家欢迎在评论区来去留下你们的答案，我会在第一时间来去进行一个解答。 至此，我们去已经建立了一个响应式系统的一个大局视角，就是从设计哲学到核心概念，从数据结构到技术演进，但这些其实还是停留在了是什么的层面，而真正有趣的问题是怎么做？就是说当你写下 reactive object 的 这一刻， view 内部究竟发生了什么？ plus y 是 如何一步一步结识对象的读写操作的？下一章我们将深入 relative 的 一个实原码实现细节，去揭开数据代理一个神秘面纱。欢迎大家关注我，我们一起来期待下一个章节，谢谢！

好，这节课呢，我们来说一下异步组建，异步组建呢是 view 框架中用于实现代码分割和按需加载的一个技术，尤其是在大型项目当中呢，它可以提升呃首屏加载速度和用户体验。 那么具体有哪些内容呢？我们来看一下啊。首先呢， view 三呢，它引入了 define a sync component 函数，用来创建异步组建， 这个函数呢接收一个工厂函数作为参数，那么这个工厂函数呢，它会返回一个 promise， 当 promise 解析后，组建呢就会被加载，然后选人。 那我们首先呢要引入这个函数，然后通过这个函数呢去加载某一个组建，它呢就是一步函数了。 第二个呢，就是我们可以通过异步组建哎，你可以将应用的不同部分分割成多个小的 g s 包，这样只有当用户访问到特定页面或者功能的时候，那么相关的代码呢，才会被加载， 这样的话就可以减少初次加载的时间。那比如说我们去配置了一个路由，那么咱们通过 define a sync 来加载了某一个组建， ok， 那 么虽然异步组建主要主要目的呢是延迟加载，对吧？但是在某些情况下，你也可以呃，你可能希望应用启动时预加载一些异步组建， 以避免首次交互的一个延迟时间，那我们可以通过 prefetch 或者 preload 这种机制来实现，当然这种呢是需要在路由首位中预加载组建，对吧？那我们呢，呃，就可以通过 before route enter 这个呃到路由首位， 在这里面呢，你要去通过呃自己的一步组建，然后它返回的不是 promise 对 象吗？解析之后让它进行一个渲染。 ok， 那 还可以进行错误处理，一步组建加载过程当中呢，可能会出现错误，比如说网络问题或者模块加载失败，那我们可以使用 error complain 和 delete 选项呢，优雅地处理这些情况。 那这个呢是一个异步组建，我们呢去异步加载组建，同时呢也可以去发现它当中的一些问题。底类，延迟时间，对吧？ 间隔时间。嗯，还有就是我们异步组建呢，通常会与懒加载和动态导入语法结合使用，就是这一种形式，可以实现懒加载和动态导入，就是 import。 那最后呢，异步组建还可以和动态组建一起使用，这样可以根据运动时条件动态加载不同的异步组建，进一步提高性能和资源利用。 那上面这里呢是我们的动态组建，对吧？下面呢是我们的异步组建，这样的话他们两者就进行了一个结合，这个呢就是我们要说的异步组建。