Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize Sub-component Segmentation in vue

Shulou Source: shulou.com Published: 2022-06-01 06:17:00 09月27日 Update

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

子组件分割

先看个例子

{{ someThing() }} export default { props:['number'], methods: { someThing () { /* 耗时任务 */ }}}

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

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

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

export default {components: { MyChild: { methods: { someThing () { /* 耗时任务 */ } }, render (h) { return h('div', this.someThing()) } }}}以上是"vue如何实现子组件分割"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

Tags: Components tasks changes code content attributes articles values examples interests guys buddies performance data more features knowledge granularity results caching Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Apple Redmi vpn Docker Shulou Tech Info