這篇文章主要介紹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如何實現子組件分割”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
