vue性能优化(响应数据&静态数据)

什么是响应式数据

在系统中会发生变化的数据,就是响应式数据,需要用ref或者reactive来定义,换而言之,用ref, reactive定义的数据就是响应式数据。

什么是静态数据

在系统中不会发生变化的就是静态数据,换而言之,静态数据不用ref,reactive包裹

性能优化方案

在系统中,不要把静态数据加上ref,reactive写成响应式数据。减少了 Vue 的响应式系统需要跟踪的依赖项数量,从而优化了性能。

举个栗子

js 复制代码
<template>
  <div>
    <h1>{{ staticData.title }}</h1>
    <p>{{ staticData.description }}</p>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 静态数据,不需要响应式
    const staticData = {
      title: 'Vue Performance Optimization',
      description: 'Learn how to optimize Vue performance with static and reactive data.'
    };

    // 响应式数据,使用 ref 创建
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      staticData,
      count,
      increment
    };
  }
};
</script>

详细说明:

  1. 静态数据

    • staticData 包括 titledescription,这些数据在组件初始化后不会改变。
    • 不需要使用 refreactive,因为它们不需要响应式特性。
    • 这样可以避免 Vue 对这些数据进行响应式处理,从而提高性能。
  2. 响应式数据

    • count 是一个需要响应式的数据,因为用户点击按钮时它会变化。
    • 使用 ref 将其包裹,使其成为响应式数据。
    • count 发生变化时,Vue 会自动更新 DOM。
  3. 性能优化

    • 通过只将需要响应的数据(如 count)包裹在 ref 中,避免了对静态数据(如 staticData)的不必要的响应式处理。
    • 这种方式减少了 Vue 的响应式系统需要跟踪的依赖项数量,从而优化了性能。

在 Vue 中,合理区分静态数据和响应式数据,使用 refreactive 只对需要响应的数据进行包装,可以有效避免不必要的性能开销。

相关推荐
就是帅我不改11 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
香香甜甜的辣椒炒肉12 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream13 小时前
vue中axios与fetch比较
前端·javascript·vue.js
wallflower202013 小时前
Web Workers:前端多线程解决方案
性能优化·html
梦鱼13 小时前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
努力的小郑13 小时前
MySQL索引(三):字符串索引优化之前缀索引
后端·mysql·性能优化
给月亮点灯|14 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
哆啦A梦158814 小时前
Element-Plus
前端·vue.js·ts
毕设源码-郭学长15 小时前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙15 小时前
初识Vue
前端·javascript·vue.js