vue如何实现子组件分割

这篇文章主要介绍vue如何实现子组件分割，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

子组件分割

先看个例子

<template>  <div :>    <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>

以上是“vue如何实现子组件分割”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！