keep-alive的作用,keep alive例句
这篇文章主要介绍了点火电极保持组件状态的方法，帮助大家更好的理解和学习某视频剪辑软件框架，感兴趣的朋友可以了解下
keep-alive的设计初衷
有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和数字正射影像图节点，极易造成性能问题。其次，切换后组件的状态也会完全丢失保持活力的设计初衷就是为了保持组件的状态，避免组件的重复渲染。
为什么keep-alive可以直接使用
开发者无需注册和引入，直接可以在模板中使用。跟开发者使用Vue。组件自定义的组件不同，保活无需注册，在模板中直接可以使用，如下所示：
点火电极
组件：is= view /组件
/保持活力
这是因为点火电极是某视频剪辑软件的内置组件，已经在某视频剪辑软件中提前定义。
//核心/组件/保持活动。射流研究…
导出默认值{
名称：保持活动，
摘要：真的，
道具：{
包括：模式类型，
排除：模式类型，
最大值：[字符串，数字]
},
已创建(){
this.cache=Object.create(null)
this.keys=[]
},
销毁(){
//保持活动状态的销毁，将所有缓存的组件清除
对于(这个。躲藏中的常量键){
pruneCacheEntry(this.cache，key，this.keys)
}
},
已安装(){
//如果指定了包括和排除属性，需要实时观察当前这两个属性的变化，以及时的更新缓存
这个手表( include ，val={
pruneCache(this，name=matches(val，name))
})
这个手表( exclude ，val={
pruneCache(this，name=！匹配项(瓦尔，名字))
})
},
render () {
//保持活动状态组件本身不会被渲染成数字正射影像图节点，其提出方法的处理逻辑的是将其包裹的组件的虚拟节点返回
常量槽=这个.$slots.default
//获取第一个组件子节点
const VNode:VNode=getFirstComponentChild(slot)
常量组件选项：vnode组件选项=vnode vnode。组件选项
if (componentOptions) {
//检查模式
常量名称：string=获取组件名称(组件选项)
const { include，exclude }=this
如果（
//不包括在内
（包括(!名字!匹配项（包括，名称)))
//排除
（排除名称匹配（排除，名称))
) {
返回虚拟节点
}
const { cache，keys }=this
常量键：string=vnode.key==null
//同一个构造函数可能被注册为不同的本地组件
//所以只有国际开发委员会是不够的(#3269)
？组件选项. Ctor.cid (componentOptions.tag？`:${componentOptions.tag} `: )
:vnode.key
//1、如果缓存中存在该vnode，从缓存中取得该组件的实例（一个组件对应一颗虚拟节点树，同时一个组件对应一个某视频剪辑软件子类的实例),不再重新创建
如果(缓存[键]) {
vnode。组件实例=缓存[键].件实例
//使当前密钥最新
//将当前的组件的键作为最新的缓存（更新其在键数组中的顺序)
移除（钥匙，钥匙)
按键（按键)
}否则{
//2、如果未命中缓存，添加到缓存
cache[key]=vnode
按键（按键)
//如果缓存超过限制，淘汰最旧的缓存
如果(这个。最大键数。长度解析int(this。最大)){
pruneCacheEntry(cache，keys[0]，keys，this ._vnode)
}
}
//标记为保持活跃组件
vnode.data.keepAlive=true
}
返回vnode (插槽slot[0])
}
}
这是因为点火电极是某视频剪辑软件的内置组件，已经在某视频剪辑软件中提前定义。
//核心/组件/保持活动。射流研究…
导出默认值{
名称：保持活动，
摘要：真的，
道具：{
包括：模式类型，
排除：模式类型，
最大值：[字符串，数字]
},
已创建(){
this.cache=Object.create(null)
this.keys=[]
},
销毁(){
//保持活动状态的销毁，将所有缓存的组件清除
对于(这个。躲藏中的常量键){
pruneCacheEntry(this.cache，key，this.keys)
}
},
已安装(){
//如果指定了include和exclude属性，则需要实时观察这两个属性当前的变化，并及时更新缓存。
这个。$watch(include ，val={
pruneCache(this，name=matches(val，name))
})
这个。$watch(exclude ，val={
pruneCache(this，name=！匹配项(val，name))
})
},
render () {
keepalive组件本身不会呈现为dom节点，其render方法的处理逻辑是返回其包装的组件的vnode。
常量槽=this。$slots.default
//获取第一个组件子节点
const VNode:VNode=getFirstComponentChild(slot)
常量组件选项：vnode component options=vnode vnode . component options
if (componentOptions) {
//检查模式
常量名称：string=get component name(component options)
const { include，exclude }=this
如果(
//不包括在内
(包括(！名字！匹配项(包括，名称)))
//排除
(排除名称匹配(排除，名称))
) {
返回vnode
}
const { cache，keys }=this
常量键：string=vnode.key==null
//同一个构造函数可能被注册为不同的本地组件
//所以只有cid是不够的(#3269)
？组件选项。Ctor.cid (componentOptions.tag？`:${componentOptions.tag} `: )
:vnode.key
//1.如果vnode存在于缓存中，则从缓存中获取组件的实例(一个组件对应于一个vnode树，一个组件对应于一个vue子类的实例)，并且不要重新创建它。
if(缓存[键]) {
vnode . component instance=cache[key]。件实例
//使当前密钥最新
//将当前组件的键作为最新缓存(更新其在keys数组中的顺序)
移除(钥匙，钥匙)
按键(按键)
}否则{
//2.如果您错过了缓存，请将其添加到缓存中。
cache[key]=vnode
按键(按键)
//如果缓存超过限制，则退出最旧的缓存。
if(this . max keys . length parse int(this . max)){
pruneCacheEntry(cache，keys[0]，keys，this。_vnode)
}
}
//标记为keepAlive的组件
vnode.data.keepAlive=true
}
返回vnode (slot slot[0])
}
}
//核心/组件/索引. js
从导入KeepAlive。/保持活动状态
导出默认值{
保持活跃
}
//核心/全局-api/index.js
//导入内置组件
从导入内置组件./组件/索引
/**
*为Vue添加全局方法和属性
* @param {GlobalAPI} Vue
*/
导出函数initGlobalAPI (Vue: GlobalAPI) {
//.不相关的代码就省略了。
Vue.options=Object.create(空)
//添加内置组件keep-alive
扩展(Vue.options.components，builtInComponents)
}
keep-alive的定义包含在buildInComponents中。在initGlobalAPI方法中，内置组件被添加到vue的全局变量中。
Extend(A，B)是复制对象属性的简单方法。将对象B中的属性复制到对象a。
keep-alive是如何保持组件状态的
为了保持组件的状态，keep-alive设计了一种缓存机制。
我们知道，模板中的每个HTML标签都由vue中相应的vnode节点对象表示。如果HTML标记是一个组件标记，您需要为标记的vnode创建一个组件实例。实例负责组件中HTML模板的编译和呈现。所以组件vnode节点相对于常见HTML标签的vnode节点，在componentOptions和componentInstance两个属性中，都有组件选项对象和组件实例的引用。
首先，从keep-alive组件的实现代码中我们可以看到，缓存机制是设计在组件的创建钩子中的：
已创建(){
this.cache=Object.create(null)
this.keys=[]
}
Keep-alive设置两个属性cache和keys来缓存子组件。缓存中的每个项目都是一个对象，以包装组件的组件名作为键，以包装组件对应的vnoded作为值。每一项键都是它所包装的组件的组件名。
render函数是用于在vue的实例和vue组件的实例中创建vnode的方法。在我们的实际应用中，通常是通过template和el来指定模板，然后vue将模板编译成渲染函数。如果用户希望更灵活地控制vnode的创建，可以提供自定义渲染功能。
render () {
常量槽=this。$slots.default
//获取第一个组件子节点
const VNode:VNode=getFirstComponentChild(slot)
常量组件选项：vnode component options=vnode vnode . component options
if (componentOptions) {
//检查模式
常量名称：string=get component name(component options)
const { include，exclude }=this
如果(
//不包括在内
(包括(！名字！匹配项(包括，名称)))
//排除
(排除名称匹配(排除，名称))
) {
返回vnode
}
const { cache，keys }=this
常量键：string=vnode.key==null
//同一个构造函数可能被注册为不同的本地组件
//所以只有cid是不够的(#3269)
？组件选项。Ctor.cid (componentOptions.tag？`:${componentOptions.tag} `: )
:vnode.key
//1.如果vnode存在于缓存中，则从缓存中获取组件的实例(一个组件对应于一个vnode树，一个组件对应于一个vue子类的实例)，并且不要重新创建它。
if(缓存[键]) {
vnode . component instance=cache[key]。件实例
//使当前密钥最新
//将当前组件的键作为最新缓存(更新其在keys数组中的顺序)
移除(钥匙，钥匙)
按键(按键)
}否则{
//2.如果您错过了缓存，请将其添加到缓存中。
cache[key]=vnode
按键(按键)
//如果缓存超过限制，则退出最旧的缓存。
if(this . max keys . length parse int(this . max)){
pruneCacheEntry(cache，keys[0]，keys，this。_vnode)
}
}
//标记为keepAlive的组件
vnode.data.keepAlive=true
}
返回vnode (slot slot[0])
}
Keep-alive内部提供了render函数来定义vnode的创建逻辑。首先，keep-alive获取其包装的子组件的根vnode，然后到缓存中查找该组件是否存在。
如果缓存中不存在子组件vnode，则以{子组件名称：子组件vnode}的形式保存到缓存对象中。同时，子组件名称保存在keys数组中。同时，如果缓存的当前数量超过了max设置的最大值，则需要清除最近最少使用的缓存条目(LRU)。
如果缓存中有子组件vnode，那么只需要重用缓存组件vnode的componentInstance。同时需要在缓存中将子组件vnode设置到最前面，主要是在缓存不足的情况下，正确排除缓存项。
举例说明
让我们通过最后一个例子来加深理解。
div id=应用程序
keep-alive component:is= view /component/keep-alive
button @ click= view=view== count ？Any: count 切换组件/按钮
/div
Vue.component(计数，{
data() {
返回{
计数：0
};
},
模板： div @click=count=1 点击了我{{count}}次/div
});
Vue.component(any ，{
模板：“divany/div”
});
新Vue({
埃尔： #app ，
数据：{
视图：“计数”
}
});
因为视图的默认值是count，所以保活包的子组件是count。此时keep-alive的缓存为空，因此组件计数的vnode将被添加到缓存中。缓存结果是
cache={ 1:count:{ tag: vue-component-1-count ，data:{tag: component ，hook: {…}}}，componentOptions，componentInstance，}
keys=[1:count]
点击组件计数，组件的显示内容变成 click me once ，然后切换到组件any。与count组件一样，由于任何组件的vnode都没有保存在keep-alive的缓存中，因此有必要将任何组件添加到缓存中。此时，缓存结果变为：
缓存={
1:count:{ tag: vue-component-1-count ，data:{tag: component ，hook: {…}}，componentOptions，componentInstance，},
2:any:{ tag: vue-component-2-any ，data:{tag: component ，hook: {…}}，componentOptions，componentInstance，},
}
keys=[1:count ， 2:any]
页面显示结果为：
再次单击切换组件以切换回计数。此时count组件的vnode已经存在于缓存中，所以count组件的原vnode中保存的组件实例直接被重用，原计数值保存在组件实例中，所以组件切换后组件的状态也被恢复。
下图显示了count组件实例的状态，可以看到count的值被维护：
最终页面显示结果是：
根据上面的分析，如果一个组件被包装在一个keep-alive组件中，那么组件vnode将被缓存在缓存中。组件的状态将保存在componentInstance中。当组件再次切回时，keep-alive直接恢复之前缓存的状态，实现了组件状态的维护。
以上是keep-alive方法保持组件状态的详细内容。关于保持组件状态的keep-alive方法的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。