vue keepalive存在哪里

好，我们来说一下这道题，就是 keep alive 是什么？它是怎么用的啊？ 那首先呢，他是 vivo 的一个内置组件好吧，就是当他包裹一些动态组件的时候呢，会缓存那些活跃的组件实力，而不是销毁他们，明白吧？包裹 包裹组建的时候会缓存不活跃的组建实力， 而不是或者并不是销毁他们，他的和那个才是 谁审有点类似啊， keep love 的呢，他是一个呃抽象的一个组件啊，就是他自身呢，不会渲染成一个节点元素，也不会出现在哎组建链当中啊， ok， 那么他有什么作用呢？其实就是在我们组切换组件的时候呢，会把它保存在内存当中，防止他去重复的进行一个渲染， 减少咱们就是这个加载时间，以及减少这个性能消耗，对吧？提提高用户的一个体验作用。 嗯，等啊， 切换的状态状态保存在内， 重复渲染， 减少加载时间和呃性能， 提高用户体验。 那么具体怎么去用呢？咱们看这样一个页面啊，他有这样一些用法，比如说你想缓存所有页面的时候，你可以在 app 点 vivo 里面把你的这个路由，对吧？给他整体包裹起来。 好，那就是所有的页面，如果说你想根据一些条件来缓存一些页面的话，那 我们就可以在 app 店 vivo 里面，对吧？你把呃缓存的内幕呢？是，比如说为 test 是吧？ include test， 然后呃再把呃内幕呢设置为 a 或者说 b 组件，结合动态组件进行一个使用。 当然如果你想使用正则表达式，就需要用到 v 杠 b 的是吧？就是正则，然后动态的话判断还有呃不缓存的也可以设置为 test， 这是在嗯， view 的页面里面进行一些缓存。那如果说你想结合 rotor 进行缓存，不分页面的话，那你可以在它的路由里面添加 mate 属性，然后以及 keep life force 呢？不需要，处呢？就是需要。那我们在页面里面呢，再对哎 myta 里面的 keep on 进行一个判断，如果是处，那就需要，如果是 force， 那就不需要，明白吧？它主要有这样的一些用法啊。 行，嗯，那么关于他的怎么去使用它是什么它的作用呢？咱们就说到这里。

好了，这节课呢，我们来看一下 view 的第二道面试题，他问的是谈谈你对于 keep love 的一个了解， 那么既然他问到这么大一个话题呢，我们就要跟他细聊，对吧？首先我们要聊的是他是啥，对吧？他是干嘛的？哎，通过这么两点去聊。然后其次呢，就是他的一个使用场景啊，分为这么三个点， 那第三个点是最主要的啊，就是他在什么叫去用啊？那用他呢，能解决什么问题，是吧？这是最主要一个场景化东西。好了，那到这呢，我们就一项去谈，第一，他是什么？ 首先呢，这 keep up 呢，是我们的 view 系统自带的一个组件，那么这个组件它最主要功能是什么呢？是来缓存 缓存组件，那么缓存组件那另外一方面也是说它可以干嘛呢？提升性， 对吧？我把一个东西呢缓存上了，那么你第二次，第三次，第四次，第五次再进去，是不是都不需要重新再打开一个东西了？是，走我之前那缓存内容就可以了，那这样话不就提升性能了吗？对吧？哎，他就这样一些功能。好，那么下面呢，就是他的一个使用，他到底该怎么用，或者说他的一个使用的场景。 好，下面看着啊，那，呃，我在这呢去搭了一个 view 项目，我把它跑起来，左边是我们的前台，右边是后台一接口，我把它打开，那现在这样啊，那我给所有的这个组件都给他加入一个 keep flat。 啊，这样呢，咱们加一下， 把它都放到这个里边啊，那也就意思说我访问哪个组件他都会备有缓存了，对吧？有这么东西啊，好，然后呢，现在呢，我们会进入到一个手 首页，那当我在这输入 local hose， 八零八零走你，那他就会打开这个首页。好，然后呢这首页这块内容呢，我稍微改一下啊，我把 home 这块拿过来，这里边东西我就不要了啊，在这呢，我做一个事情啊，就是来请求一下接口，那我在这呢提前写好了一个接口，大家看一下，就在这个地方， 我们启用这个接口，然后把这个数据呢旋到页面上，那在这呢我们需要引入那个 excels 啊，提前封装了一下子，我找一下是在，嗯，点点刚出去吧。 啊，这个地方是 prom， 这有一个名称，我先看下路径啊。第二，刚出去找到 a p i 下的 a， 不是 a p i。 哦，我这个文件没有放进去，我把这个文件放进去啊，放到我这 a p m 下。 好，到这呢咱们引入一下， ok， 然后这个文件里边呢有一个 door for excels 啊，这是我们请求接口用来用的一个东西。 好，然后呢在这呢，我们就在 ct 中呢发送一个请求啊，把这个拿过来啊，然后呢这个地方的一个 u r l， 呃，就是我们的接口，那个地址看一下啊，就这个。好，我们请求一下。 好，这有个脚蹬 i s console log， 咱们看一下这个接口，它能拿到哈，来到这刷新一下， 嗯，这报了一个错， o b g is nota 方审，嗯？什么意思？类型错误。嗯，我看一下 啊，是不是这个 dollar for excels 有问题，哦，不对，这个地方呢是有问题的啊，是因为我这儿呢首先要写一个，呃，比如说写 api 这个变量啊，这个地方你它是抛出来一个对象，所以说我们这一地方得 request 点儿 好，这样的话呢，我们就拿到数据了，然后呢，呃， i e s 点 date 啊，这儿有个 list， 我们把这个数组给它变取出来。好，先看一下这个数组哈， ok， 数组里边呢，有些内容我们把它渲染页面上啊，具体我们要做什么事呢？大家看到哈，我这给大家画一个图，现在呢，我不是拿到一组数据吗？对吧？这是首页拿到一组数据，然后分别把他们渲染到这个页面上，然后点击某一个，比如点击第一个，第二个，第三个，第四个。也罢啊，反正呢都会进入到一个详 情义，哎，比如说我点击的是 g s 课程，那么这儿呢就展示 g s 课程的内容啊，如果说点的是这个 t s， 那展示出 t s 的内容，哎，就这个意思啊，咱们先把这个事呢先做了啊，那到这个地方呢，我们就需要把这个数据整体给它渲染一下。 好，它是一个竖图，那到这呢，我们就写一个 d 对象。好，上面呢，我们走一个 u l u l， 然后再往下走一个 l i。 好，微钢号。 嗯，那这就是 item， 进好 k 呢，就是 item 的 id 啊，到这呢我们就 item 的内容应该是啊，看 n a k 对不对啊？啊，对啊，好，那现在呢，就在我页面中呢，把这个 g s 课程呀， t s 课程呀， view 课程呀全部选到页面上， 然后同时我点击每一个，他可以跳转到他的详情页。那我在这地方呢，去创建一个详情页啊，创建一个这样的 vivo 文件，比如说我教他 detail 吧， 啊，然后这呢写一下，这是详情页， 哎，详情页。嗨，那就这样吧，详情就详情吧，管他呢，反正人家想请是吧？好，然后呢，这呢，咱配一下他的一个路由哈，那当然，我这呢采用懒不懒加载，这都无所谓了。那这我就叫 d t l， 哎，怎么抵放呢？ d t l 啊？ d t r。 ok， 那就叫几七二点六了。行，那这我们详情页，然后呢，我点击它以后呢，就会跳转到 in 的这个详情页，对吧？那这样呢，我们加一个试卷吧， 加一个 click top 技巧，或者咱们叫 go 技巧，是吧？进入到详情页。 好，那我们点击它以后就需要 this 点入着点故事啊，进入到杠 d q 好了，我们来试一下啊，那现在呢？我点击走，哎，进到详情页，对吧？返，返回过去点一下，走啊，反正呢每个都可以进去， ok， 行，那现在呢，就有个问题啊，比如说我点击了 ts 也好，点击了 gs 也好，还是点 vivo 课程也好，那我进入到了详情页， 那么这个详情页是不是要请求数据啊？因为我点击了 g s 课，那么你这这个详情展示 g s 课程对应的，比如说封面图，大家可以想象成就。是啊，我们购物网站，比如京东，淘宝这样一些购物平台，我点击一双鞋进去就是鞋的详情，对吧？我点裤子进去就裤子详情， 我点个什么电脑乱七八糟东西进去以后呢，就是对应的详情吗？那所以说呢，现在做事情是点一下，点一下，那我不仅要跳转，我还要做一个事情就是，呃，可能会把这个东西的 id 给传过去，那这是有一个 id 号，大家可以看一下啊， 对吧？我要把 id 号呢给他传过去啊，所以说呢，我们在这儿可能要传一个 item 的 id 啊，然后呢，再这样接收到这个 id， 然后这儿呢给他传过去， 通过我们的 url 给它传吧 query， 然后这儿 id， ok， 那现在大家再来看，你看，我点一下上面有 id 三，然后点一下上面有 id 四，那进入到了这个页面就详情页，我需要把那 id 呢给他拿到啊，那到这我们就可以通过任意东西吧，比如说我们就通过 pretty 的拿法啊，拿到这个类似点 root， 点 carry， 点 id 啊，咱们看一下能不能拿到啊，点一下，你看二，对吧？好，点一下大家会发现什么问题？ 这个地方的五这段还是二，为啥呀？因为缓存了呀，这个缓存的好处是什么呢？大家可以试想一个问题啊，就比如说我这个用户啊，这个用户 在首页点击 g s 课，那进入到了这个页面，是 g s 课程的详情，对不对？好，那我如果剪 t s， 那么进去是不是 t s 详情啊？ 但是呢，用户有一个这样的问题啊，就是我点 g s 进去以后，你请求，对吧？因为你看啊，你首页请求一次，你点击首页的 g s 进入到详情页，这，这也要请求一次这两次了吧，那用户如果点错了或者干嘛返回到商业了， 返回商业以后呢？他又点，接着进去了，你又请求一次，他每次进去，返回，进去，返回，注意点都是同一个，你每次要请求， 那么如果说同一个就没必要请求了，咱们缓存下来不就可以了吗？对吧？你因为请求次数越多，是不是你这个浪费的速度会跟后端那边你不断请求他，那这样的话呢，你俩通信这个时间就会加长吧， 所以说呢，我为了解决这个性能问题，我们只需要把对的页面，他可能不断去进入到这详情页，我把它缓存下来就可以了，对吧？那么现在他已经缓存了，大家可以看 我点击这二，你看我点击这地方五，他永远是二，为啥呀？可不嘛，这个烟也被缓存了，这个生命周期他不会执行啊。那昨天我们说过了，第二次或第 n 次进入，他只会执行这个生命周期啊，并不会执行那个， 呃，比如说 crazy 了啊，所以说呢，我们就需要把这家伙呢给他加上啊，他会直接这里边东西。好，我们可以再让他每次 ctrl 一下，比如 ctrl 一个一吧，然后每次 ctrl 一下，小心 好看啊，进去一侧执行一个二，一回去啊，再来你看又执行一个一，对吧，但是这个二这个地方就不执行了，是不是？也就说每次你只要把这个放到这， 好，你再看回去，大家看到啊，点一下执行个三，点一下执行个五，再点，你看对吧？他是这个什么六七，他是执行的，但这些就 不执行了，那么我就好办了，只要判断你这个 id 值，不想懂怎么怎么样，对不对？那这样我们做的这个步骤呢，肯定是这么来做的，大家看着啊，我们上来呢，是取到这个 id 了，对吧？那我们可能会发送一次请求，那我这呢先写一个请求啊，也是要把对应的这个内容拿过来，我们在这个详情页也要请求一下。 这是，呃 ur， 那就是 id 啊，然后需要给后端呢？呃，传据，传递这个一定的数据，我看一下传什么啊？呃，传的是 id 啊，传的是 id。 好，那我们就把 id 给它传过去。 ok， 到这 id 冒号 把这个给他传过去。 this 啊，这个没有写方法。 get 这个 好，把这个 id 给它传过去。然后呢，我进入到这页面，我上来就调用你一次啊，上来我就调用你一次，或者说呢，直接在它里边去调用都可以。那上来我在 protet 中调用一次，那调用完以后呢？它会返回一个数据，我们这有个 r a s， 我把 r a s 数据打印一下， 比如说我现在点击的是，呃，这个 view 课程吧。走，那这儿拿到数据呢？肯定是 view 课程，我把这个文字呢放到这个页面上，好吧，那就是它的 data 的 list 点儿等于 啊，我把这个数据呢放到页面上， 这是详情页，然后后面拼接一个它。好，那么现在呢？有意思说，刷新一下啊，大家看着我点一下项目课程，哎，这是项目课程，对吧？但是你注意，你返回，你再进入 react 课程，它变吗？它不变。为什么呢？是因为你这个请求它根本没有执行， 是吧？但是你不能说每次都执行吧？那什么样时候执行，什么是不执行的啊？就是如果说我第一次点击 g s 进去， 是 gs， 对吧？我再点一下 gs 进去还是 gs， 如果说我反复不断点击的，也说我上一次点击的和你本次点击的是同一个，都是 gs 课程，那这个页面就不需要再次发送请求了。 那如果点击不是同一个，我们再发送气球，对吧？就这么一个意思，那这样话呢，从而我们就提升我的性能了，对吧？不该加载的不加载，该加载的 加载呗。哎，就这意思。那怎么样判断呢？那怎么样判断我这个地方呃是不是同一个呢啊？有很多的方式，比如判断他路由啊，对吧？路由你修改了或者判断我的数据啊都是可以。这个呢就由大家来啊，比如说 我们现在呢，呃从这个地方点过去，我们知道有 id 吗？对不对？那我可以把你 id 呢给你记录一下啊，就是我这呢可能有一个 id 值，比如它为零啊，默认为零我们可以记录一下。 那到这个地方我们记不下 id， 那就是直接复制也可以，那么你 console a log 弹一下就把这 id 值给它复上去。就是 list 点 id 等于它 好，然后这儿呢放这些 id 就好了。然后呢这些 id 呢我们就记录上了。然后呢你在这里 地方啊我们在这地方可以打印两个东西，一个是 this 点 id， 一个是当前的 id。 this 点 id 呢是我之前记录好的。这个呢是实时的 id 啊，我们可以看一下啊。 返回，哎，我们重新进 logo hose 八零八零，大家看着我点下项目课程，哎这两个都是四对吧？好，我返回过去然后点下 rex， 你看之前是四，现在是五，他俩不相等我们就再次发起求啊，如果相等就不用发送了，所以说我们只需要判断，如果说这俩怎么样 不等了，对吧？那我们再次发送这个请求就对了。那我们可以看一下这儿的一个 network。 好，大家看着啊。 哎我把这稍微清一下啊，大家看这个地方。我现在呢返回到我的这个首页。好， 翻到我的首页以后呢？呃他已经请求了一次，我给大家看一下啊，要不然咱们这样切换到这边 啊。刷新一下，大家看，他已经请求了一次啊，就在这地方已经请求了一次，我把它清空，好，注意看，我现在呢，从首页点击到 g s 课程， ok， 请求了一次，反应过去，好，我再点一下 g s 课程，大家注意看，是不是没有请求啊， 因为它 id 相同嘛。但是我再点一下 t s 课呢，哎，这地方还是 g s 课的吗？我看一下啊， t s 课哦，并没有去更改那个数据哈 嗯，并没有更改数据，咱们看这个地方他有没有执行，如果他俩不相等，咱们打印一串一。 呃，回去点点 点 a c 等我们看这两个值，这两个值还是不对的，就是要判断他俩的怎么回事呢？ 嗯，这是一和一，没错，这是一和三，那一和三是不相等的呀，他俩非等我们再次发送请求哦，这个地方啊，这个地方，这个 id 应该放的是这个 id 啊，实是这个 id。 好，我们再来，小心来看网络哈。那现在呢？我点击 g s， ok， 返回过去再点，你看不会再次发送新的请求，对吧？然后呢，我点击一下 t s 走，你看 是不是又发送请求啊？哎，让反过去再点 ts， 他是，哎，这个 ts 再点，再点啊，那这这个还是有问题 这个 id 值是有问题的啊，那我们这儿再把 id 值重新给它复一下就好了 啊。重新给它复一下，然后走这个 id 就行。重新给它复下值啊，重新给它复下值，那这样就 ok 了，我们再来刷新。 好，点击 g s 课，走，只有一个请求，走，哎，不会发送新的请求，当我们点击了 t s 走，发送一次新的请求，反应过去再点，你看就不会再走新的了，对吧？好，点击不同的它就会发送一次，不同的就会发送一次同的，哎，同样的就不会再次发送了，这就是它的使用场景 哎，所以说它使用场景呢，就是来缓存组建的，缓存组建提升项目的性能 啊，具体诶，性能哈。啊，具体的一个实现呢啊，比如首页数据啊，首页进入到详情页， 进了详情页啊，如果在首页啊，如果用户啊在首页点，每次点击 都是相同的， 都是相同的，那么详情页就没必要请求 n 次了啊，直接缓存缓存起来就可以了啊。当然啊，如果 点击的不是同一个，那么就这个请求直接请求是吧，这就是他的一个使用场景啊，不管怎么样他是提升我们的性能的，减少发送请求的数量，那就是提升性能。 哎，这就是 keeper life 的它一个使用的场景啊。那么我们在面试的时候呢，不仅要给面试官介绍清楚他是什么，还要告诉他他能干嘛，他的功能是什么，他在什么地方用啊？一定要说场景， 你场景说的越多，就会让你的面试几率呢成功率越高。还有比如上节课我们说到生命周期，那么大家可以说一下 crazy 的它的使用场景 来，某些你没有用过你就可以不说，因为不见得所有东西我们都用过，对吧？比如说 crit 的它的场景它在什么上用吗？啊？别人面试官问你在哪个，什么时候用过这个生命周期啊？啊，我在发送请求是用 crit 的对吧？ 忘记的用插件说，是吧？你就可以完全这么去说了啊。那有关于这一课内容，咱们先说到这，然后我给大家多一个提醒，就是大家一定要说场景，场景啊。行，那本节课呢？咱们就先说这么多。

每天一道前端面试题微又一篇，谈谈你对 keep alive 的了解。

好的，我们继续来看生命周期的面试题，然后这节课呢，我要讲的题号呢是一点五和一点七，那这两个题呢是有关联性的，所以说我就把它一起去讲了哈， 那首先呢，我们先来看一下这个地方的一个一点七吧，他说如果你加入了我们 view 中，它系统自带这个 keep 这个组件会执行哪些什么周期？ 那么其实呢，上一课呢，我们讲过了，这个 vivo 二呀，它系统自带的是有八个什么周期的，那么如果说一旦 我们使用了 keep 这个组件，它就会额外的新增两个生命周期。好，我把这两个生命周期呢给大家先放到这哈，这是第一个就是加入它会新增的，这是第二个加入它会新增的， 那这个生命周期呢，其实呢就是进入到这个组件的，他叫被激活时吗？然后第二个呢，其实就是销毁的，就是离开这个组件会额外的新增两个生命周期。 好，那么正好呢，在关于组建这块啊，有他的一个相关内容，那我们这节课呢，需要说的就是，首先这个内置组建他是干嘛的，然后其次呢，我们再来看加入他会执行哪些等等一些这样一些内容啊。好的，那么首先呢，我们就回到我们代码里边， 那首先呢，先来介绍一下这个 keep 这个组件是干嘛的，它其实呢是用来缓存组件的啊， 我们这呢给他标记一下啊，是用来是什么啊？缓存当前 组间的啊，用来缓存的。好的，下面呢，我给大家举一个场景啊 啊，就可以看一下子我们这个项目吧，拿项目来说吧，就懒得画图了，咱们就拿一个项目来说就可以了。好，那我们还是切换到这个移动端吧。哈， 大家看啊，当我点击某一门课程的时候，会进入到一个页面，而这个页面呢，大家会发现他们的布局呢是相同的啊，比如说这有一个图片，然后这呢是有一大堆的文字，对吧？ 那然后呢我们再来看这门课程呢，他也是一样啊，有这个图片加文字，只不过呢这个图片和文字内容呢，他可能不相同啊，不管了，他是进入到同一个组件，这块是我们要 知道的。 ok， 那么数据呢，是来自于接口的，只要我进入到这个组件或者进入到页面，对吧？把数据呢啊，根据你的 id 不同渲染不同的数据就可以了。不管怎么样，他进入的这个页面是一个， 那么就会出现这么一种情况，我进入到页面请求进入到页面请求进入到页面请求。没错，那各位如果说我 当前点击的这课程呢，是叫面试题啊，或者说是叫算法吧。哈，那我再点击还叫算法啊，再点击还叫算法？那请问我点击的是同一门课程，他每次进入到这个详情页都要请求吗？ 啊，原本你可以这么去做，没有问题，但是呢我还可以采用另外一种做法啊，就是说如果我当前点击的是这个 算法，然后我返回，我再点击算法，那进入到是相同的一个，那这个时候呢？啊，我们判断他的 id 值相同的，那这个时候呢，我就不用去请求了，用之前的缓存的组件就可以了啊，这就是 keep 它的一个使用场景， 所以说呢，它是用来缓存这个组件的。好的，那我们知道这个情况呢，我们下面呢去试验一下啊，给这个 rooter view 加一个 keeper 啊，让我们的项目中的所有组件啊都缓存下来哈。 好，我们加一下啊。嗯，来进入到我们的项目里边啊，现在呢，我们这个组件呢就都被缓存了。那回到我们这个面试题里边，他说加入 keep 会执行哪些审美周期？那我们就先来说一下这么 一个情况啊，就是如果啊，如果使用了 keep 这个组件 啊，当前的组件会额外啊增加两个生命周期， 也就说系统八再加一个二啊，一共十个了啊，会额外新的这两个。好，然后呢，现在我把这些生命周期啊都给他放到我们这个关于我们的这个页面中吧。 好，上节课呢，我们也讲过了，说一旦进入到这个页面或者进入到这个组件会执行 哪些生命周期啊？前面的四个对不对？好，一二三四啊，那我们这样呢，知道前四个，我把每一个呢先给他都 com 搜出来吧。虽然说我们知道一旦进入到这个页面呢会执行前四个 啊，那我们这呢也是要把所有的都给它打印出来，方便大家呢去观看啊。 好，我把这些呢都放过来。 ok 啦，行，然后呢，我把这两个呢加入 keep 的啊，再给它也加过来。 好的，我把这两个给他打印一下。那如果加入 keep， 当我第一次进入到这个组件的时候，它会执行几个呢？一二，哎，这怎么有 console log 呢 啊，我第一次进入的时候啊，一二三四五，好，执行五个。好，我们这呢写一下，如果啊，当前组建啊，加入了 keep 啊，第一次进入这个组件会执行五个生命周期， 分别就是前四个系统自带的啊，然后呢再加上 keep 这一个好，然后其四 呢？你还要关注的是第二次和第 n 次进入到这个页面好，或者这个组件会执行哪个生命六七啊，来我们看一下啊， 我第一次进入，到时候呢会执行这五个，我切回来啊，然后呢我再进去，大家会发现他只执行一个了。好吧，那我们这个题呢要这么回答，如果 当前这个组件啊，加入了 tip 啊，第二次和第 n 次只会执行一个啊， 只会执行一个生命周期，好吧，那当然，如果没有加入呢？如果没有加入 tiff， 第二次和第三次会执行哪些呢啊，会执行的是永远的前四个。这块呢，我就不给大家演示了啊，放心，已经这样了，大家可以试一试啊，如果没有加入哈， 好，所以说呢，这个时候呢，我们这面试题该怎么样去回答呢？那他如果问到 keep 有没有用过啊，用过就是缓成组件的啊，他问你，哎，如果他要呃用的话，这个生命周期这会会发生什么样变化呢？比如他会问你啊，第一次啊，这个进入组件 会执行哪些审美周期？你可以可以给大家这么说，会执行的审美周期呢啊，分别呢？有这么四个啊，如果，当然你这个组件加入 keep 会只有五个，那么第二次或第 n 次如果加入了 keep， 会执行 keep 那一个，如果没有 加入呢，会执行四个，那我们的 view 的生命周期呢，有十个，分别为系统自带的八个和 keep 这个组件一旦用到啊，额外再增加两个，这就是我们的生命周期，等等一个完整的回答哈。 好，这就是关于生命周期的这些内容啊，加入 keep 和不加入 keep 的情况。 ok， 好，行，那么下节课呢，我们会讲到了 啊，你在什么情况下，用过哪些什么周期，说一说使用场景哈。行，那么这节课呢，有关于我们讲到 keep 这块的各种各样情况就给大家呢，先说到这里。

轻量级高可用解决方案 keep live 入门介绍 hello， 大家好，我是架构师奶爸。 keep live 是 linux 下一个轻量级高可用解决方案。高可用 high availability， 简称 h a， 就是主机的溶于和接管 基本功能，心跳检测资源接管检测集群中的服务在集群节点转移共享 ip 地址的所有者。 keeplif 主要是通过路由勇于来实现高可用功能。 配置简单，只需要一个配置文件即可完成。 keep live 起初视为 lvs linux virtual server 虚拟的服务器集群，附在均衡系统设计的，专门用来监控集群系统中各个服务节点的状态。它根据 t c p i p 参考模型的第三、第四层、第五层交换机制 检测每个服务节点的状态。如果某个服务器节点出现异常或者工作出现故障， keep a life 将检测到并将出现的故障的服务器节点从集群系统中剔除。这些工作全部是自动完成的， 不需要人工干涉，需要人工完成的只是修复出现故障的服务节点。后来 keep alive 又加入了 vrrp 的功能， vrrp retro router redundancy protocol。 虚拟路由勇于协议 出现的目的是解决静态路由出现的单点故障问题，通过 v r r p 可以实现网络不间断稳定运行。因此 keepover v 的一方面具有服务器状态检测和故障隔离功能，另外一方面也有 h a cluster 功能。 想了解更多 java 架构师岗位知识，请关注我，架构师奶爸共同筑基 java 架构师。

今天我们来聊一聊 view 中的 tipperline 组件。 tipperline 是 view 中的内置缓存组件，使用 tipperlike 可以让组件切换过程中保存组件状态，防止重复渲染。大幕 包裹动态组建时会缓存不活动的组建实力，而不是销毁组建。我们来看具体代码演示。 router view 组建，不使用 people life 包裹时，组件切换时无法保存组建状态。两个试图组建都使用了 my menu 字组建。 父子组建中，我们可以通过生命周期方法观察组建的创建与销毁过程。 启动项目 后，我们通过浏览器控制台观察组建的生命周期。首页组建中，我们点开菜单组建的第一个选项卡， 切换到另一个视图组建。我们点开菜单组建的第二个选项卡，我们再切换回首页视图组建，我们发现第一个选项卡并未展开。每次切换视图，我们发现生命周期方法都重新执行一遍。使用 keep a live 包裹 router view 组建 通过判断仕途对象的 mate 属性中的 keep alive 判断是否开启缓存。仕途组建里的 mate 属性的 keep alive 设置为 true， 表示开启仕途组建缓存， 重新运行项目首页试图还是打开菜单的第一个选项卡，另一个试图打开菜 菜单第二个选项卡切换回第一个首页视图，我们发现菜单状态得以保存。组件切换时，控制台的生命周期函数仅仅执行了一次， 做一个小结。 keep a life 是 view 中的内置缓存组件，使用 keep a life 可以防止重复渲染 dum， 减少加载时间及性能消耗。

what's up view devs welcome back to learn view in today's video we're going to be looking at view keep alive which is a great function when working with their name of components let's just jump right into it when is this useful well first we have to understand what dynamic components are and that's when we use a component element like this and then we can determine exactly what component is rendering in this element by using the v bind is directive so the most common example of this is a tab system and if you want to see how to build your own tab system check out our video on it down below but in short depending on which tab is open this component element here will switch between a few different view components and by default when we switch between dynamic components view makes a brand new instance of that component every single time so if we went to tab one it would create a new instance tab two we would get a new instance of tab two and then if we go back to tab one we'll get a brand new instance of tab 1 however view keep alive is a rapper element that's surrounds dynamic components it stores a cash reference to our component when it's not active and this means that view does not have to create a new instance every single time we switch between different components and in view terminology keep alive is what we call an abstract element meaning that it does not render a dom element nor does it show up as a component in our dom so why is keep alive useful in most cases the built and functionality for its dnamic components works just fine however， there are certain times where you might want to cash the state for example if we're tracking user inputs like forms if our component is making a lot of api calls and we don't want to call them every single time we change tabs or if our component takes a while to set up its data and computed properties and we want to quickly switch between this components it makes a lot more sense to use the cash version of our component rather than having to start from scratch every time like most advanced topics in view or really any programming language i can't tell you a definitive answer on when or when not to use keepall f components whatever， you choose just make sure you know why you're using a certain design so let's look at how to use it so let's look at a dynamic component system to see when keepall f components are useful let's say that we have apparent tabs component that has two children about and contact the about component will just have static content and our contact page will have a text input and a button let's start off by creating these components so in an about page we'll just create a simple template with a div that says hello from the about page inside our script let's listen for the mounted lifecycle hook and then say about has been mounted in our contact view component let's create a div that has two inputs text and a button and just like about will console dialoguelo prints statement inside the mounted lifecycle hook so understand the purpose of keep components we're gonna first implement our tabs component without using it let's start off inside of our script we'll import our about and contact pages and then inside of our export default as a declare components and passing about and contact and then in our data we'll return two different elements the first is a tabs array， which will contain the names of our component about in contact and then finally we'll create a data property call component which will be the current rendered component and for now let's just say we want to default to the about page so as a string we'll say about and then inside of our template let's say button v4 tab and tabs with a key of tab and then whenever， it's clicked we want to set our component property equal to tab and then in button let's just print out each tab and what this will do is whenever we click one of these buttons our component property in our data will be set to either about or contact that's actually work with our dynamic component let's say component and then colon is which is short for v bind colon is and then set it equal to our component property so depending on the value of our component property this dynamic component will show either about or contact so now if we run our out from view we should see something like this where we just have about contact and then our print statement coming from our about page so let's switch between these two different pages and see what's being printed to our console every single time we switch the message from mounted is being printed and this is exactly what should be happening whenever， we're switching our dynamic component it's being mounted to our dom but something interesting happens when we go in a contact type some input and then switch to about if we go back to contact our input will be blank and that's once again because view is creating a new instance of our contact page that knows nothing about our previous message that we typed and this is where keep alive comes in handy okay， admittedly this is going to be ridiculously easy all we have to do is head over to our tabs dot view component and wrap our dynamic component with a keep alive element like this now if we fill out input on the contact tab it will still be there even if we switch to about and come back to contact while this is a simple use case for using keep alive components it's a great example of why you might want to use them inside your project one neat thing about keeple have components is that they have special view life， cycle hooks and this is necessary because keeple have components only run their initialization hooks like created and mount once help observe when a keep a life component is toggled meaning ours ename a component changes we have two unique hooks both of which sound pretty intuitive activated and this is called when a keeplife component is activated and then deactivated which as you may guess is when a keeplife component is deactivated let's implement these hooks with the earlier example in order to print out to the console whenever， i component is toggled we can just do it like this in view too where we just add activated and deactivated to our export default or we could import them in the composition api and use them inside a setup method like this now if you run our app in switch between different tabs we'll see that the mounted message is only imprinted once after that whenever， we toggle between our different tabs the activated and deactivated messages are printed repeatedly one thing to notice is that when a dynamic component its first displayed it is both mounted and activated so it's important to make sure that you're not running certain code twice of course there are both pros and cons to using keep alive components rather than the default dynamic component functionality two pros are that since we store the cash we can handle cases like our input that we just saw and also it's faster to switch between different tabs and the cons are it's easy to overuse and have to store all of this in the cash and often the normal use case for dynamic components is good enough for majority of uses just using the default dynamic component without keep alive is often the best solution but if you want to save the user state easily or you don't want to make a ton of api calls a keeplift component is a super easy way to get this done but regardless if you choose to use this function or not it's useful to know how they work building up your tool set of view knowledge is never a bad thing i'm gonna go ahead and wrap this video up here if you have any questions leave them in the comments down below and i'll try to respond to as many as i can if you thought this video was helpful please hit that like button and subscribe it really helps out the channel and also in the comments down below let me know what topics you want to see you cover。

好，我们来说一下 will 的生命周期啊，那么什么是 will 的生命周期呢？就是说这个组建呢，从创建到销毁的这个过程啊，就是它的这个生命周期， 那么这个生命周期呢，主要分为这四个阶段啊，一个是创建，一个是挂载，一个是更新，一个销毁。当我们用了 keep alive 的时候呢，他这个周期呢，会多出来两个函数，一个是 activity 的，一个是 deactivity 的， ok， 那么我们先来说创建啊，创建它是有两个勾子函数的，一个是 before create， 一个是 created。 挂载呢，也一样， before mount mounted， 然后更新呢，也是 before update， 还有 updated。 销毁呢，也是 before destroy 以及 destroyed。 好，那么更新里面有两个，对吧？我们可以看到基本上都是两个，他们对应的分别都是创建前，创建后，挂载前、挂载后、更新前、更新后以及销毁前销毁后这样的一个流程。 那么我们呢，就来分别说一下在每一个钩子函数里面我们能做些什么， 好吧，嗯，那么首先呢是 before correct， before correct 的话，呃，在这个阶段， 嗯，像 data math， computed， 呃，这些数据和方法都不能使用，在这个阶段，属性主要 方法都不能使用好， ok， 那 created 呢？ created 他是在咱们这个实力创建完之后发生的啊，那在这个阶段呢，我们就已经完成了对数据的一些观察， 可以使用数据，也可以更改数据，在这里呢，我们去修改数据是不会触发 update dated 的， 也就不会更新视图，好吧，好，嗯，这里是实力创建，完成之后， 在这里，呃，完成了数据监测， 监测，嗯，可以使用数据 修改数据，不会触发二炮 a t 的好，呃，也 更新视图，好，这个呢，就是 creative 的这个周期函数里面做的事情。那么 before mont 里面他做了什么事情呢？他在这个阶段呢，就已经完成了模板的任意， 那么虚拟盗呢？虚拟盗也， 嗯，即将 share 在这里呢。我们可以，我们也可以对数据进行修改，也不会触发。呃， updated 啊，那么 monkey 的这个函数呢？ monkey 的话，它就是把编译好的模板挂载到页面页面啊，把编译好的，呃，模模板挂载到 这里可以，嗯，亦不请求，也可以访问 dom 节点， 这里可以发送吧。 好，这是 mounted。 那么 before update 呢？ 比方， update， 这是组建数据更新之前要调用的数据呢？都是新的。页面上的数据呢？还是旧的？组建？马上就要更新，准备渲染页面，可以在这个阶段呢进行修改数据，不会造成污染， ok， 那也就是数。呃，组建组建数据，嗯，更新之前使用， 嗯，数据是新的，页面上的数据是旧的，嗯，组建 可以改 好。那么 updated 呢？ updated 就是 render 函数呢，重新做了渲染，那么在这个时候呢，数据和页面呢？呃，都是新的，这是 数据和页面 好吧， 嗯，我们在这个周期里面需要注意的就是不要在这里去修改数据，因为可 可能会导致一些无限循环的这样的一个呃内容，好吧，避免在此， ok， 那么销毁呢？ before destroy 销毁前，对吧？也就是实力销毁前， 在这个阶段里面呢，呃，实力呢？呃，还可以用。我们可以在这个做一些呃首尾的工作啊，比如说清除定时器啊等等， 在这里实力还可以用 武器试剑啊，也都可以 好，那么 destroy 的呢？它就是组件已经被 毁了，数据呢也被卸载，监听也移除，子，呃，子组件呢，也都被销毁了，明白吧？全部都销毁。 那么这两个呢？ activity 的呢，是 keep alive 组建激活 是，那么第 activity 的呢，是组件被消 好。那么这些呢，就是对 will 生育周期的一个理解了，咱们就说到这儿。

好，咱们来说一下第八题啊， view 是如何进行组建通信的？也就是组建船只啊，它有这样一些情况，比如说第一种呢，富船子，富船子 父传子，第二种呢，子昌父 自传父，第三种呢就是兄弟， 第四种，哎，主要就是这三种啊，当然最后一个呢，不是怎么穿，而是说咱们的一个方案就是 viox 进行穿纸， vilx 穿纸， ok， 那么我们先来说复 传子，副传子的话，他就是通过一块把子组件引入到自己的组件里面，然后在副组件里面的通过呃 condpoint 的属性进行一个注册，然后子组件就可以使用标签，哎，写到副组件的页面当中了。 那么第一种方法是什么呢？就是 pros， 好这种方法，这个呢是呃，子组件呢，它可以通过 pros 呢来接收副组件的数数据，明白了吗？它是单向的啊， 也就是说只能副组件向子组件传递，不能子组件向副组件传递，听明白了吧？ okay， 那他是怎么做的呢？是副组件，副组件使用自定 定义属性，然后紫紫金使用，嗯嗯， props ok， 那还有什么方法呢？还有还有一个方法，咱们先来看一下 props 是怎么传的，比如说 副组件，对吧？他要先把子组件引进来，然后进行一个注册，注册完之后呢，他绑定上自定义属性 msg， 是吧？ msg， 然后这里呢也绑定了 msg， 那么词组件呢，它就可以通过 props， 可以通过 props 来进行一个接收了，这个呢就是复传词，那还有什么方法呢？还可以使用 dollar r e f， 到了 r e f 呢，他就是呃被用来就是给元素或者说子组件，呃注册引用信息的，那么引用的信息呢？会被注册在副组件的 r e f s 对象上面，好吧，那他是，呃呃给大家写一下吧。 呃引用信息，引用信息，对，哎，注册三， 嗯，棒 dollar r e f s。 对，向上， ok， 那它具体是怎么用的呢？来咱们看一下 r a f 这复 组件对吧？副组件来，嗯，我们先来看啊，子组件呢？他是，哎，我看一下啊。副组件，嗯， 我们作用到了，就是这 r e f 呢，它是作用到了子组件身上，那么它指向的就是子组件的实力，在我们副组件身上它是要通过呃 r e f s 来获取到，那这里呢？ r e f 是在子组件身上的， 明白吧？那么我们子组建呢，他就可以通过这个方法来拿到咱们这个给他传递过来的数据， ok， 这个呢就是，呃 r e f 船只，那么子船父呢？ 子传父的话咱们用到的是 dollar e meet e m i t。 好，他呢就是绑定一个自定义事件，那么这个呢，自定义事件被执行的时候他会把参数数据传递给副组件，副组件呢需要通过事件呢来进行监听绑定子组件绑定 时间触发，呃执行， 呃，传给复字键，复字键需要用，嗯试键监听 来接收。具体怎么用的呢？我们来看这一个小案例啊。 首先是子传父，对吧？咱们用刀轮以 meet 传过来，那么父组件呢？他就要自己绑定一个事件去监听这个数据 的一个变化。好，就是这个意思啊，那么兄弟穿纸呢？ 兄弟传旨的话，咱们用到的是一个事件总线啊，事件中心，哎，都可以英文的 bus， 他呢就是你有了一个新的 vivo 实力，然后用他自身的 以 meet 和 on 来实现一个中心的呃状态管理来接收和发布消息， 变回一个新的新的猎食力 二和 unit 来对数据。 ok， 那他是怎么实现的呢？哎，我们首先呢，要有一个事件种线，对吧？你有一个 will， 然后 它里面有一文的 bus， 对吧？好，然后呢，我 a 组件要给 b 组件 传递数据，就要用英文的 bus dollar 已 met 已 met 给它传，是吧？然后这里我事件触发了它，那么在 b 组件里面呢，我们就要用 dollar on 来 接收这个参数，然后让它显示出来，就是这个样子。 ok， 那么这个呢，就是，呃，以 meet 呃这个 bus 英文的 bus 来进行传旨的。 那么 vivox 呢？它适用于各种传直呃方式，因为它是数据共享吗？对吧？这里呢，咱们就不再过多的介绍了。好，那么这些呢，就是可以来实现 vivo 组建之间的一个通信的一个内容了。