首页 > 其他分享 >Vue 的优化技巧

Vue 的优化技巧

时间:2023-02-09 11:25:45浏览次数:37  
标签:Vue 技巧 JPEG let key 使用 组件 优化

演示代码使用 Vue3 + ts + Vite 编写,但是也会列出适用于 Vue2 的优化技巧,如果某个优化只适用于 Vue3 或者 Vue2,我会在标题中标出来。

代码优化

v-for 中使用 key


使用 v-for 更新已经渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;

使用key的注意事项:

  • 不要使用可能重复的或者可能变化 key 值(控制台也会给出提醒)
  • 如果数组中的数据有状态需要维持时(例如输入框),不要使用数组的 index 作为 key 值,因为如果在数组中插入或者移除一个元素时,其后面的元素 index 将会变化,这回让vue进行原地复用时错误的绑定状态。
  • 如果数组中没有唯一的 key值可用,且数组更新时不是全量更新而是采用类似push,splice来插入或者移除数据时,可以考虑对其添加一个 key 字段,值为 Symbol() 即可保证唯一。

何时使用何种key?

这是一个非常有考究的问题,首先你要知道 vue 中的 原地复用 (大概就是 虚拟dom 变化时,两个 虚拟dom节点key 如果一样就不会重新创建节点,而是修改原来的节点)。

当我们渲染的数据不需要保持状态时,例如常见的单纯的表格分页渲染(不包含输入,只是展示)、下拉加载更多等场景,那么使用 index 作为 key 再好不过,因为进入下一页或者上一页时就会原地复用之前的节点,而不是重新创建,如果使用唯一的 id 作为 key 反而会重新创建dom,性能相对较低。

此外使用 index 作为 key 我还应该要尽量避免对数组的中间进行 增加/删除 等会影响后面元素key变化的操作。这会让 vue 认为后面所有元素都发生了变化,导致多余的对比和原地复用。

所以使用 index 作为 key 需要满足:

  1. 数据没有独立的状态
  2. 数据不会进行 增加/删除 等会影响后面元素key变化的操作

哪何时使用 id 作为 key 呢?

对于大多数数据的 id 都是唯一的,这无疑的一个 key 的优选答案。对于任何大多数情况使用 id 作为 key 都不会出现上面 bug。但是如果你需要考虑性能问题,那就就要思考是否应该使用原地复用了。

同样是上面的分页数据展示,如果使用 id 作为 key ,可想而知每一页的每一条数据 id 都是不一样的,所以当换页时两颗 虚拟DOM树 的节点的 key 完全不一致,vue 就会移除原来的节点然后创建新的节点。可想而知效率会更加低下。但是他也有它的优点。唯一的 key 可以帮助 diff 更加精确的为我们绑定状态,这尤其适合数据有独立的状态的场景,例如带输入框或者单选框的列表数据。

所以何时使用 id 作为 key?只有一点:

  1. 无法使用 index 作为 key 的时候

v-for 和 v-if 不要一起使用(Vue2)


此优化技巧仅限于Vue2,Vue3 中对 v-for 和 v-if 的优先级做了调整

这个大家都知道

永远不要把 v-ifv-for 同时用在同一个元素上。

原因是 v-for 的 优先级高于 v-if,所以当它们使用再同一个标签上是,每一个渲染都会先循环再进行条件判断。

注意: Vue3 中 v-if 优先级高于 v-for,所以当 v-forv-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果

例如下面这段代码在 Vue2 中是不被推荐的,Vue 也会给出对应的警告.

<ul>
  <li v-for="user in users" v-if="user.active">
    {{ user.name }}
  </li>
</ul>

我们应该尽量将 v-if 移动到上级或者使用计算属性来处理数据.

<ul v-if="active">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>

如果你不想让循环的内容多出一个无需有的上级容器,那么你可以选择使用 template 来作为其父元素,template 不会被浏览器渲染为 DOM 节点.

如果我想要判断遍历对象里面每一项的内容来选择渲染的数据的话,可以使用 computed 来对遍历对象进行过滤.

// js
let usersActive = computed(()=>users.filter(user => user.active))

// template
<ul>
    <li v-for="user in usersActive">
      {{ user.name }}
    </li>
</ul>

合理的选择 v-if 和 v-show


v-ifv-show 的区别相比大家都非常熟悉了;v-if 通过直接操作 DOM 的删除和添加来控制元素的显示和隐藏;v-show 是通过控制 DOMdisplay CSS熟悉来控制元素的显示和隐藏.

由于对 DOM 的 添加/删除 操作性能远远低于操作 DOM 的 CSS 属性.

所以当元素需要频繁的 显示/隐藏 变化时,我们使用 v-show 来提高性能。

当元素不需要频繁的 显示/隐藏 变化时,我们通过 v-if 来移除 DOM 可以节约掉浏览器渲染这个的一部分DOM需要的资源.

使用简单的计算属性


应该把复杂计算属性分割为尽可能多的更简单的 property。

  • 易于测试
    当每个计算属性都包含一个非常简单且很少依赖的表达式时,撰写测试以确保其正确工作就会更加容易。
  • 易于阅读
    简化计算属性要求你为每一个值都起一个描述性的名称,即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。
  • 更好的“拥抱变化”
    任何能够命名的值都可能用在视图上。举个例子,我们可能打算展示一个信息,告诉用户他们存了多少钱;也可能打算计算税费,但是可能会分开展现,而不是作为总价的一部分。
    小的、专注的计算属性减少了信息使用时的假设性限制,所以需求变更时也用不着那么多重构了。

computed 大家后很熟悉, 它会在其表达式中依赖的响应式数据发送变化时重新计算。如果我们在一个计算属性中书写了比较复杂的表达式,那么其依赖的响应式数据也任意变得更多。当其中任何一个依赖项变化时整个表达式都需要重新计算.

let price = computed(()=>{
  let basePrice = manufactureCost / (1 - profitMargin)
  return (
      basePrice -
      basePrice * (discountPercent || 0)
  )
})

当 manufactureCost、profitMargin、discountPercent 中任何一个变化时都会重新计算整个 price。

但是如果我们改成下面这样

let basePrice = computed(() => manufactureCost / (1 - profitMargin))
let discount = computed(() => basePrice * (discountPercent || 0))
let finalPrice = computed(() => basePrice - discount)

如果当 discountPercent 变化时,只会 重新计算 discount 和 finalPrice,由于 computed 的缓存特性,不会重新计算 basePrice.

functional 函数式组件(Vue2)


注意,这仅仅在 Vue2 中被作为一种优化手段,在 3.x 中,有状态组件和函数式组件之间的性能差异已经大大减少,并且在大多数用例中是微不足道的。因此,在 SFCs 上使用 functional 的开发人员的迁移路径是删除该 attribute,并将 props 的所有引用重命名为 $props,将 attrs 重命名为 $attrs

优化前:

<template>
    <div class="cell">
        <div v-if="value" class="on"></div>
        <section v-else class="off"></section>
    </div>
</template>

<script>
export default {
    props: ['value'],
}
</script>

优化后:

<template functional>
    <div class="cell">
        <div v-if="props.value" class="on"></div>
        <section v-else class="off"></section>
    </div>
</template>

<script>
export default {
    props: ['value'],
}
</script>
  • 没有this(没有实例)
  • 没有响应式数据

拆分组件


什么?你写的一个vue文件有一千多行代码?

标签:Vue,技巧,JPEG,let,key,使用,组件,优化
From: https://www.cnblogs.com/operate/p/17104259.html

相关文章

  • 运维常用技巧!!!!!!!!!
    运维必备的17个技巧网络工程师笔记 运维网工 2023-02-0909:00 发表于重庆收录于合集#网络运维10个#运维管理13个#运维工程师44个#网络工程师7个1、查找当......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件:E:\node\vue296\src\router\index.js入口:E:\node\vue296\src\main.js组件:E:\node\vue296\src\components\Count.vue......
  • Vue 中遇到的错误
    阅读目录解决VUE启动问题(Youmayusespecialcommentstodisablesomewarnings)两种方法解决方法一方法二安装vuex启动报错“export‘watch‘wasn......
  • [email protected]选项卡
    阅读目录<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>body{font-family:"Micr......
  • JavaScript 常用技巧
    阅读目录对象属性操作对象通过动态属性名称取值根据条件向对象添加属性检查属性是否存在对象中使用动态键进行对象解构扁平化数组值操作空值合并`??`操......
  • Vue 命令行工具 Vue-CLI 详解
    阅读目录阐述vue全家桶vue-cliVueCLI的安装①默认安装vue/cli脚手架3②默认安装失败,解决mode版本问题③nvm下载太慢问题解决④安装Node^12.0.0......
  • Vue界面渲染函数互相条用导致渲染失败的总结
    先说问题:界面上有一块区域是这样的  数据是取自一个map集合,后面的符号和过滤条件是按照对应的顺序去拿,没有直接关联,请求是按照顺序发的,但是渲染的界面有可能乱序像......
  • 微信小程序搜索优化指南(SEO)
    前言其实在2019年上半年,微信就发布了基于小程序页面的搜索。为了更好地发现及理解小程序的页面,结合过去一段时间来我们遇到的各种情况,强烈建议各位开发者花一些宝贵的......
  • 高并发服务的几条优化经验 转载
    如何优化高并发服务,这里指的是qps在20万以上的在线服务,注意不是离线服务,在线服务会存哪些挑战呢?无法做离线缓存,所有的数据都是实时读的大量的请求会打到线上服务......
  • SQL 优化大全,收藏直接起飞! 转载
    转自:https://mp.weixin.qq.com/s/n2yb1Kl4fMbndzG_z1-4tw大家好,今天分享一篇关于SQL优化的硬核文章,全文有点长,建议收藏后慢慢看。很多朋友在做数据分析时,分析两分钟,跑数......