区块链技术博客
www.b2bchain.cn

Vue篇(006)-为什么避免 v-if 和 v-for 用在一起求职学习资料

本文介绍了Vue篇(006)-为什么避免 v-if 和 v-for 用在一起求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

参考答案:

vue2.x 中v-for优先级高于v-if,vue3.x 相反。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用,造成性能浪费;3.x 版本中 v-if 总是优先于 v-for 生效,导致v-if访问不了v-for中的变量。

解析:

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for=”user in users” v-if=”user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

  • 为了避免渲染本应该被隐藏的列表 (比如 v-for=”user in users” v-if=”shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:

<ul>   <li     v-for="user in users"     v-if="user.isActive"     :key="user.id"   >     {{ user.name }}   </li> </ul>

将会经过如下运算:

this.users.map(function (user) {   if (user.isActive) {     return user.name   } })

因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历:

computed: {   activeUsers: function () {     return this.users.filter(function (user) {       return user.isActive     })   } }
<ul>   <li     v-for="user in activeUsers"     :key="user.id"   >     {{ user.name }}   </li> </ul>

我们将会获得如下好处:

  • 过滤后的列表只会在 users 数组发生相关变化时才被重新运算,过滤更高效。
  • 使用 v-for=”user in activeUsers” 之后,我们在渲染的时候只遍历活跃用户,渲染更高效。
  • 解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。

为了获得同样的好处,我们也可以把:

“`html

    <li

参考答案:

vue2.x 中v-for优先级高于v-if,vue3.x 相反。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用,造成性能浪费;3.x 版本中 v-if 总是优先于 v-for 生效,导致v-if访问不了v-for中的变量。

解析:

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for=”user in users” v-if=”user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

  • 为了避免渲染本应该被隐藏的列表 (比如 v-for=”user in users” v-if=”shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:

<ul>   <li     v-for="user in users"     v-if="user.isActive"     :key="user.id"   >     {{ user.name }}   </li> </ul>

将会经过如下运算:

this.users.map(function (user) {   if (user.isActive) {     return user.name   } })

因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历:

computed: {   activeUsers: function () {     return this.users.filter(function (user) {       return user.isActive     })   } }
<ul>   <li     v-for="user in activeUsers"     :key="user.id"   >     {{ user.name }}   </li> </ul>

我们将会获得如下好处:

  • 过滤后的列表只会在 users 数组发生相关变化时才被重新运算,过滤更高效。
  • 使用 v-for=”user in activeUsers” 之后,我们在渲染的时候只遍历活跃用户,渲染更高效。
  • 解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。

为了获得同样的好处,我们也可以把:

“`html

    <li

参考答案:

vue2.x 中v-for优先级高于v-if,vue3.x 相反。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用,造成性能浪费;3.x 版本中 v-if 总是优先于 v-for 生效,导致v-if访问不了v-for中的变量。

解析:

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for=”user in users” v-if=”user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

  • 为了避免渲染本应该被隐藏的列表 (比如 v-for=”user in users” v-if=”shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:

<ul>   <li     v-for="user in users"     v-if="user.isActive"     :key="user.id"   >     {{ user.name }}   </li> </ul>

将会经过如下运算:

this.users.map(function (user) {   if (user.isActive) {     return user.name   } })

因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历:

computed: {   activeUsers: function () {     return this.users.filter(function (user) {       return user.isActive     })   } }
<ul>   <li     v-for="user in activeUsers"     :key="user.id"   >     {{ user.name }}   </li> </ul>

我们将会获得如下好处:

  • 过滤后的列表只会在 users 数组发生相关变化时才被重新运算,过滤更高效。
  • 使用 v-for=”user in activeUsers” 之后,我们在渲染的时候只遍历活跃用户,渲染更高效。
  • 解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。

为了获得同样的好处,我们也可以把:

“`html

    <li

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Vue篇(006)-为什么避免 v-if 和 v-for 用在一起求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们