unnecessary renders of DOM elements in moveable container

[hkoz461]

Environments

Framework name: Vue Framework version: 2.6.10 Moveable Component version: "svelte-moveable": "^0.12.1"+"svelte-adapter": "^0.3.0" "vue-selecto": "^1.5.0" Testable Address(optional):

Description

Hi @daybrush , I am using selecto and moveable together. Each time moveable target is changed, all DOM elements (even not selectable targets) in the container of moveable is re-rendered. We sometimes want to have around 1000 draggable element so it is causing delays in control.

onSelectEnd(e) { this.moveable.target = e.selected; ... }

How can i prevent this re-render to happen? Thank You

[hkoz461]

Let me correct one thing, actually it is not re-rendering but refreshing all bind props for components used in moveable container. I think it is recativity system of vue js observable methods. Then v-for loop for the large number of elements is causing a performance delay when all props are refreshed.. Actually may be this is not the place to ask it here but may be you can advise some..

[daybrush]

@hkoz461

Most of them are rendered as values change. Do you have all 1000 elements rendered every time the selected changes?

E.g. arrays, inline functions, objects

[hkoz461]

@daybrush Yes all of the components getting rendered. Let me describe better. I have a v-for to render these 1000 target objects. Targets are vue components for different shapes (rectangle or circle..). My application is like a mini drawing tool.. <component class="cmp" v-for="(element, index) in screenElements" :is="comp(element.type)" :ix="index" :key="element.key" :name="element.name" :ref="element.key" :config="element.config" :refName="element.refName" @childPanelOpen="childPanelOpen" /> "cmp" class is for selectable targets. In comp function (it is for ":is" binding for component) there is a console.log which i consider as rendering. comp(shapeType){ console.log("render"); switch(shapeType){ case "Rectangle" : compName = "eRectangle2"; break; ... } so when i set moveable.target to any value.. (even null..) I get that 1000 "render" log in console. Actually components are not updating (I mean updated hook is not triggered in vue component) but ":is" prop seems refreshed.

I tried v-once directive which converting elements inside v-for to static. It is ok and not giving a log again, but adding or removing a component is not possible. May be not using v-for but adding object to DOM programatically with something like "new Object({]).mount.attach" will be another try. Any advice would be welcome Thanks,

[hkoz461]

Hi @daybrush Adding object to DOM programmatically worked well. No re-rendering..

[2066873348]

Hi @daybrush Adding object to DOM programmatically worked well. No re-rendering..

Hi , How did you solve it ?

[hkoz461]

Hi @2066873348 I followed instructions within this forum and removed using v-for but added components to DOM with mount function and binding props programmaticcaly.

https://forum.vuejs.org/t/add-component-to-dom-programatically/7308/3