Skip to content

Vue插槽slot引发的严重性能问题? #10342

@karmiy

Description

@karmiy

Version

2.6.6

Reproduction link

https://codepen.io/karmiy/pen/pMWVOX

Steps to reproduce

例如:
父组件app,它有data如text,在template的随便一个地方<input type='text' v-model='text'>{{text}}

子组件test是:
Vue.component('logger', {
created() {
console.log('created');
},
render(createElement) {
console.log(9);
return createElement('h1', '1');
}
});

这时我们在app这个组件里,使用这个组件,在项目中会在控制台看到打印了9,没什么问题。

当尝试去改变input的值来驱动text这个data改变时,控制台也没有任何输出,没有重新去渲染render,很好。

但是接下来一个改变问题就来了:

将改成333

再尝试去改变input的值来驱动text这个data,奇怪的事情发生了,控制台随着text改变,也一直输出9,意味着不断在重新渲染!!(可是text改变和它毫不相关,即不是它的插槽内容,也不是它的props)

没有传任何props,slot位置也只是个普通字符串333,没有改变,却因为毫不相关的text导致一直重新渲染
这在高频率text变化时,造成了很严重的性能问题。

这是在我用Vue开发Markdown编辑器,文本不断变化时发现的问题,组件里与文本无关的如普通按钮这种中间有slot内容的不断在重复渲染,在编辑器快速触发改变文本时任何带有slot内容的组件都在不断重新渲染导致页面性能问题非常严重

一直找不到合适的解决方案,因为在用antd的组件库,改组件是用jsx形式去写vue组件库的,学习了代码后发现有的组件render部分有的逻辑比较复杂,这样高频率的触发render对性能影响太大。。。。求指教,非常感谢!

What is expected?

如何使333不随毫不相关的data去重复render

What is actually happening?

毫不相关的data改变,使得拥有slot插槽内容的组件不断重复渲染

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions