防止 Vue.js 重新渲染子组件

Question

I've got a complex component which does all its rendering in a render function. There are multiple parts to this, and different bits of the view get rendered - one of these things is a filter bar, showing the filters that have been applied.

What I'm noticing happening, is if I apply a filter which in turn presents this bar, it causes everything else to be fully re-rendered. This is causing a number of other issues and I need to try and stop it from happening.

I've never come across this issue when using normal templates as Vue seems to handle these very intelligently, but I have no idea how to tackle this. The only thing I can think of is setting a key on each thing I don't want re-rendered but not sure if this will a) solve the problem, and b) be possible for the content that is passed in through a slot

Has anyone else faced this issue, and if so how can it be solved?

Answer 1

I had a similar issue when using vuetify text inputs in a complex component which was causing the app to slow down drastically.

In my search I found this link which was specific to vuetify:

high performance impact when using a lot of v-text-field

then found out that this is actually a vue thing from this GitHub issue:

Component with slot re-renders even if the slot or component data has not changed

and there is plan to improve this in it is tracked here (vue 3 should resolve this issue):

Update slot content without re-rendering rest of component

so after reading through all these I found some workarounds that helped me a lot to boost the performance of my app, I hope these will help you as well:

1. divide that complex component into smaller ones specially when there is some bit of code that changes data that bounds to template causing re-rendering (put them in their own component)

2. I moved all data layer control to the vuex store, instead of using v-model every where and passing data as events and props, all the data is updating in the store through an action and read from the store through a getter. (from data I mean somethings that is being looped in the template in a v-for , API results, and so on... all of them is being set, updated and read through the store. my components still have the data object but only for the things related to the style and template control like a boolean to control a modal or an imported icon which is used in the template and alikes)

3. lastly I wrote a function called lazyCaller which its job is to update the values in the store with a delay (when immediate data update isn't necessary) to avoid rapid updates comping from something like a text input (with out this every key stroke trigger the value update action)