【vue优化】子组件分割

<template>
 <div :style="{ opacity: number / 100 }">
   <div>{
   
   { someThing() }}</div>
 </div>
</template>
<script>
export default {
 props:['number'],
 methods: {
   someThing () { /* 耗时任务 */ }
}
}
</script>

上面这样的代码中，每次父组件传过来的 number 发生变化时，每次都会重新渲染，并且重新执行 someThing 这个耗时任务

所以优化的话一个是用计算属性，因为计算属性自身有缓存计算结果的特性

第二个是拆分成子组件，因为 Vue 的更新是组件粒度的，虽然第次数据变化都会导致父组件的重新渲染，但是子组件却不会重新渲染，因为它的内部没有任何变化，耗时任务自然也就不会重新执行，因此性能更好，优化代码如下

<template>
<div>  
 <my-child />
</div>
</template>
<script>
export default {
components: {  
 MyChild: {  
  methods: {    
   someThing () { /* 耗时任务 */ }    
  },   
   render (h) {  
    return h('div', this.someThing())  
  } 
 }
}
}
</script>