如何解决什么时候手动重新安置Vue渲染的DOM节点安全如果有的话?
我知道您不应该出于以下原因而手动操作Vue组件渲染的DOM节点:
- 在另一个渲染之后,Vue可以覆盖您所做的任何更改
- 它会干扰Vue的修补算法
我的用例是我想实现一种将DOM节点移动到单独控制的位置的方法,以使其全屏显示。想象一下带有全屏按钮的编辑器小部件,该按钮会“弹出”编辑器并将其全屏覆盖。
我了解可以单独使用固定位置的CSS来实现此目的,但是我对此并不感兴趣,我特别感兴趣的是将DOM节点从任何位置移出并将其直接附加到<body>
元素。重新渲染父组件后,Vue仍然能够正确修补节点吗?
我已经对此进行了试验,并且已经可以正常工作,但还没有遇到任何问题。尽管如此,这并不能缓解我的担忧,Vue文档也没有谈论做这样的事情。
我可能遇到哪些潜在问题?
portal-vue是不合适的,因为它每次重新定位时都会重新创建组件实例,这是我不希望的。
解决方法
根据组件生命周期在Vue中的工作方式,在DOM中移动组件可能会触发生命周期方法。例如。使用“自定义元素”,移动意味着触发组件的disconnectedCallback
,然后触发connectedCallback
。这通常是组件初始化的地方。
考虑将组件本身具有重新定位的能力,而不是从外部手动移动组件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。