vue点火电极组件如何使用?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
维生
维生是vue。js的内置组件,它能够把不活动的组件的实例保存在内存中,而不是直接的销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。
它提供了排除和包含两个属性,允许组件有条件的缓存。
使用
& lt; keep-alive>
& lt; comment> & lt;/comment>
& lt;/keep-alive> 上面的评论组件会被缓存起来。
& lt; keep-alive>
& lt;昏迷v=皌est"祝辞& lt;/coma>
& lt;梳v-else> & lt;/comb>
& lt;/keep-alive>
& lt;按钮@click=癮bc"祝辞& lt;/button>
出口默认{
数据(){
reurn {
测试:真正的
｝
},
方法:{
abc () {
this.test=! this.test;
｝
｝
} 点击键的时候昏迷组件和梳组件会发生切换,但这时候两个组件的状态会被缓存起来,假如说a和b组件中都有一个输入标签,这时切换输入标签的值不会改变。
道具点火电极组件提供了包括和排除两个属性来进行有条件的缓存,二者都可以用逗号分隔字符串,正则表达式或则数组表示。
& lt;点火电极包括=癮"比;
& lt; component> & lt;/component>
& lt;/keep-alive>//名字名为一的组件会被缓存起来
& lt;维生排除=癮"祝辞
& lt; component> & lt;/component>
& lt;/keep-alive>//名字名为一的组件将不会被缓存。 生命钩子
维生提供了两个生命钩子,中共与吊销。
因为保活会把组件保存到内存中,并不会销毁或则重新构建,所以不会调用组件的克里特岛等方法,需要使用中共和吊销两个钩子判断组件是否处于活动状态。
深入点火电极组件的实现
创建和销毁钩子
创建钩子会创建一个缓存对象,用来作为缓存容器,保存Vnode节点。
创建{
this.cache=Object.create(空);
} 摧毁钩子则在组件销毁的时候清除缓存缓存中的所有组件实例。
/*摧毁钩子中销毁所中有缓存的组件实例*/摧毁了(){
(const关键this.cache) {
pruneCacheEntry (this.cache[主要])
｝
}, 接下来是渲染函数。
渲染(){/*得到插槽插槽中的第一个组件*/const vnode: vnode=getFirstComponentChild(这一点。slots.default美元)
const componentOptions: ? VNodeComponentOptions=vnode,,vnode.componentOptions
如果(componentOptions) {//检查模式/*获取组件名称,优先获取组件的名字字段,否则是组件的标签*/常量名称:字符串?=getComponentName (componentOptions)/*名字不在是中或者在exlude中则直接返回vnode(没有取缓存)*/如果(名字,,（
(这一点。包括,,!(这匹配。包括名称)| |
(这一点。排除,,(这匹配。排除,名字))
)){
返回vnode
｝
const关键:字符串?=vnode。键==零//同样的构造函数可能会注册为不同的本地组件//因此,cid单独是不够的(# 3269)
？ componentOptions.Ctor。cid + (componentOptions。标签?“::$ {componentOptions。标签}”:& # 39;& # 39;)
:vnode.key/*如果已经做过缓存了则直接从缓存中获取组件实例给vnode,还未缓存过则进行缓存*/如果(this.cache[主要]){
vnode.componentInstance=this.cache .componentInstance(关键)
其他}{
这一点。缓存(例子)=vnode
｝/* keepAlive标记位*/vnode.data。keepAlive=true
｝
返回vnode
} 首先通过getFirstComponentChild获取第一个子组件,获取该组件的名字(存在组件名则直接使用组件名,否则会使用标签)。接下来会将这个名字通过包括与排除属性进行匹配,匹配不成功(说明不需要进行缓存)则不进行任何操作直接返回vnode。
/*检测的名字是否匹配*/函数匹配(模式:字符串| RegExp,名字:字符串):布尔{
如果(typeof模式===& # 39;字符串# 39;){/*字符串情况,如a, b, c */返回pattern.split (& # 39; & # 39;) .indexOf祝辞(名称);1
}else if (isRegExp(模式)){/*正则*/返回pattern.test(名字)
｝
下*//*伊斯坦布尔忽略
返回假
} 检测包括与排除属性匹配的函数很简单,包括与排除属性支持字符串如“a, b, c"这样组件名以逗号隔开的情况以及正则表达式.matches通过这两种方式分别检测是否匹配当前组件。
