-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
Description
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插槽内容的组件不断重复渲染