最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > 如何优化Vue3应用的性能

如何优化Vue3应用的性能

发布时间:2024年06月26日 评论数:抢沙发阅读数: 234

    虽说Vue3已经在性能方面做了很大的改进,但这仅是框架层面的,在项目开发中不管是个人习惯,还是方法选择,都会对应用的性能造成影响。下面简单的罗列了一些优化建议:

    尽可能使用计算属性

    计算属性默认是缓存的,只有当它的依赖发生变化时,它才会重新计算。因此,尽量不要在模板中使用方法,因为每次渲染时都会调用方法,这可能会导致不必要的性能开销。

    <template>
    
     <div>
    
       <p>{{ fullName }}</p>
    
     </div>
    
    </template>
    
    <script>
    
    import { ref, computed } from 'vue';
    
    export default {
    
     setup() {
    
       const firstName = ref('John');
    
       const lastName = ref('Doe');
    
       const fullName = computed(() => `${firstName.value} ${lastName.value}`);
    
       return {
    
         fullName,
    
       };
    
     },
    
    };
    
    </script>

    使用v-if而不是v-show

    虽然v-show看起来很方便,但它实际上并不移除元素,只是简单地切换它的display CSS 属性。如果你有一个比较重的元素并且知道它只会显示一次,最好使用 v-if。

    <template>
    
     <div>
    
       <button @click="toggle">Toggle</button>
    
       <p v-if="showElement">This is a visible element.</p>
    
       <!-- <p v-show="showElement">This is a visible element.</p> -->
    
     </div>
    
    </template>
    
    <script>
    
    import { ref } from 'vue';
    
    export default {
    
     setup() {
    
       const showElement = ref(true);
    
       function toggle() {
    
         showElement.value = !showElement.value;
    
       }
    
       return {
    
         toggle,
    
         showElement,
    
       };
    
     },
    
    };
    
    </script>


    使用key属性来替换列表

    当 Vue 渲染列表时,它会尝试尽可能少地改变 DOM。如果你的列表中有复杂的元素,或者元素的顺序可能会变化,最好给每个元素加上一个唯一的 key。

    <template>
    
     <div>
    
       <button @click="addItem">Add Item</button>
    
       <ul>
    
         <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    
       </ul>
    
     </div>
    
    </template>
    
    <script>
    
    import { ref } from 'vue';
    
    export default {
    
     setup() {
    
       const items = ref(['Item 1', 'Item 2']);
    
       function addItem() {
    
         items.value.push(`Item ${items.value.length + 1}`);
    
       }
    
       return {
    
         items,
    
         addItem,
    
       };
    
     },
    
    };
    
    </script>


    避免在v-for中使用v-if

    如果你在 v-for 循环中使用 v-if,Vue 将无法进行一些优化。你应该尽可能在循环外部处理过滤和映射。

    <template>
    
     <div>
    
       <ul>
    
         <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    
       </ul>
    
     </div>
    
    </template>
    
    <script>
    
    import { ref } from 'vue';
    
    export default {
    
     setup() {
    
       const items = ref([
    
         { id: 1, name: 'Apple' },
    
         { id: 2, name: 'Banana' },
    
         { id: 3, name: 'Cherry' },
    
       ]);
    
       const filteredItems = computed(() => items.value.filter((item) => item.name !== 'Banana'));
    
       return {
    
         filteredItems,
    
       };
    
     },
    
    };
    
    </script>


    不要过度使用插槽

    虽然插槽非常强大,可以让组件更加灵活,但如果过度使用,可能会导致性能问题。插槽会在渲染时生成新的树,这可能比直接在组件内部渲染内容要慢。

    <!-- 父组件 -->
    
    <template>
    
     <child-component>
    
       <template #default="{ data }">
    
         <p>{{ data }}</p>
    
       </template>
    
     </child-component>
    
    </template>
    
    <!-- 子组件 -->
    
    <template>
    
     <slot :data="someData"></slot>
    
    </template>
    
    <script>
    
    import { ref } from 'vue';
    
    export default {
    
     setup() {
    
       const someData = ref('Some data');
    
       return {
    
         someData,
    
       };
    
     },
    
    };
    
    </script>
    

    合理使用watch和watchEffect

    确保你真正需要的时候才使用它们。因为它们可能会引起额外的渲染和计算。

    import { ref, watch } from 'vue';
    
    const count = ref(0);
    
    // 仅在真正需要时使用 watch
    
    watch(count, (newVal, oldVal) => {
    
     console.log(`Count changed from ${oldVal} to ${newVal}`);
    
    });
    
    // 避免不必要的 watchEffect
    
    watchEffect(() => {
    
     console.log(`Count is now ${count.value}`);
    
    });


    不要滥用全局状态管理

    如果你有一个全局的状态管理库(比如 Vuex),并且你的组件可以从远端获取数据,那么请考虑是否真的需要全局状态管理。如果没有必要,尝试将状态保持在组件内部。

    const localState = ref({
    
     count: 0,
    
    });
    
    function increment() {
    
     localState.value.count++;
    
    }
    
    return {
    
     localState,
    
     increment,
    
    };



二维码加载中...
本文作者:DGF      文章标题: 如何优化Vue3应用的性能
本文地址: https://arbays.com/post-242.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论