Sign in

How does vuejs re render components?

Svend edited in Fri, 25 Nov 2022

Experts: I have a special requirement, sub component A: there is an expansion key, click to calculate an array, assign a value to the global variable in vuex, there is a refresh key, click to recalculate the array, and then assign a value again, sub component B: it is a circular list, accept the global variable in vuex, and then render.

Now the expand key is working properly, but the refresh key is invalid. In my opinion, should we implement the function of reloading this component after refreshing?

2 Replies
commented on Fri, 25 Nov 2022

The following only talks about re rendering. As for the invalid refresh key, it is also possible that the data is not responsive.

1. Improper but simple and crude method: use V-IF to generate or destroy components (going through all their normal lifecycles)

<test v-if="isShow"></test>

this.isShow = false
this.$nextTick(() => {
    this.isShow = true;

2. A better method: Vue's foreupdate method (only emphasizes rendering, maybe not updating computational properties)


3. Best way: change the key attribute on the element / component to re render to update the state.

<test :key="index"></test>

this.index += 1
commented on Sat, 26 Nov 2022

Common methods: 1: watch a variable in vuex in the component and refresh the current page data (not recommended) 2: recommend V-IF to the component 3: give a timestamp to the router address not recommended