1,keepAlive 组件的实现原理,keepAlive 通过设置属性将当前组件标为非卸载组件,在VUE逻辑中如果产生卸载事件,将会在卸载辑中调用keepAlive方法将组件失活,而在挂载时也通过组件属性做判断如果已被缓存,则通过激活方法激法组件,期中激活与失活两个方法就是将组件放入一个缓存容器中例如DIV当需要激活时从缓存的DIV中取取并放到指定的位置,在缓存组件中还有inclue与exclude两个属性,可以指定缓存中的组件,与排除不缓存指定组件,其判断的值是以组件name为判断依据,这两个属性也能接收正则判断,在KeepAlive中还可以设设置缓存组件个数,其属性为VUE属性max, 2,Teleport组件的实现原理 Teleport允许 将组件内容挂载到 其属性中的to 中例 to="body"会将组件里的内容挂载到body下面,Teleport有自已的特殊挂载逻辑,组件中有属性isTeleport时,会调用自身逻辑其方法为通过querySelector方法获取to内容,然后指获取到的内容设置为锚点,最后当需要更新时使用方法列新,当是挂载时将其挂载到指定锚内 3,Transtition 组件的实现原理 ,其核心原理是在挂载是将动效附加到DOM元素上,当DOM被 卸载时不要立即卸载DOM而是等到附加到该DOM元素的动效执行完成后再卸载它,在动画组件初始时会将初始状态enter 类添加到元素上,然后将元素挂载在DOM上,然后在屏幕渲染完成,也就是下一帧,其JS方法调用为requestAnimationFrame(()=>{}); 在某些浏览器BUG中需要套用上面的方法才能调用浏览器的下一帧,之后在下一帧中移除enter 类并添加enter-to 指定的类,最后兼听transitionend 在事件完成后移除所有添加的数完成动画以上就是入场动画的实现,离场动画与入场动画的实现区别不大离场动画只在是调用下一帖前调用document.body.offsetHeight 强制reflow,而在VUE中的实现也很简单只是在生命周期中判断是否有动画属性如果有则执行相应的方法,