We may use computed property instead of child component splitting?

[ustbhuangyi]

First, thanks for the awesome Project!

In the Child component splitting demo，the root cause of the performance problem is that we use heavy function during render, it will also be called when the component render.

Instead of using child component splitting, can we use computed property? For example:

<template>
  <div :style="{ opacity: number / 300 }">
    <div>{{ heavy }}</div>
  </div>
</template>

<script>
export default {
  props: ['number'],
  computed: {
    heavy () {
      const n = 100000
      let result = 0
      for (let i = 0; i < n; i++) {
        result += Math.sqrt(Math.cos(Math.sin(42)))
      }
      return result
    }
  }
}

Because create a child component will have some extra overhead, so computed property here is better ? Computed property will use cache if it's dependencies not change, and I think we should use computed property as much as possible other than method, unless in some special cases.

[Akryum]

Yes, but the purpose was to simulate a component which is heavy to render. Computed wouldn't help there. Le ven. 29 mars 2019 à 06:30, HuangYi <notifications@github.com> a écrit :

…

First, thanks for the awesome Project! In the Child component splitting demo，the root cause of the performance problem is that we use heavy function during render, it will also be called when the component render. Instead of using child component splitting, can we use computed property? For example: <template> <div :style="{ opacity: number / 300 }"> <div>{{ heavy }}</div> </div> </template> <script> export default { props: ['number'], computed: { heavy () { const n = 100000 let result = 0 for (let i = 0; i < n; i++) { result += Math.sqrt(Math.cos(Math.sin(42))) } return result } } } Because create a child component will have some extra overhead, so computed property here is better ? Computed property will use cache if it's dependencies not change, and I think we should use computed property as much as possible other than method, unless in some special cases. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACqyfAJDua6WdKB0aHuSwd2nRykznsiIks5vbaUMgaJpZM4cRqTb> .

[timbomckay]

Hi @Akryum. Can you explain why the child component helps so much?

vue-9-perf-secrets/src/components/benchmarks/child/ChildOn.vue

Lines 10 to 24 in 4648323

	ChildComp: {
	methods: {
	heavy () {
	const n = 100000
	let result = 0
	for (let i = 0; i < n; i++) {
	result += Math.sqrt(Math.cos(Math.sin(42)))
	}
	return result
	},
	},
	render (h) {
	return h('div', this.heavy())
	},
	},

I've been trying to wrap my head around this. I understand splitting components into smaller components and using functional components when possible, but this is making another component with the same thing that the parent component used to do. Is it more stripped down? Would it speed things up more to create a child component in that child component doing the same thing? Trying to understand how to determine when to utilize this. Previously we'd create child components for better maintenance but now there's a performance boost.

Thanks in advance for any clarity or guidance you can offer. Curious if I may have missed this note in the Vue documentation or didn't understand it well.

Your presentation was great and very insightful.

[outOFFspace]

Hi @Akryum, we will be very appreciated if you would give a reply to this.

[Akryum]

Vue is smart enough to not rerender children components if it doesn't need to.