Vue3和Vue2中 v-if 和v-for的区别

简介: Vue3和Vue2中 v-if 和v-for的区别

vue2中 v-for > v-if   v-for的优先级比v-if高 所以可以一起用但是不推荐因为非常的消耗性能


为什么vue2中可以一起用呢?

因为 在vue2中我们的v-for的优先级比v-if高

所以会先执行v-for 这样也就有了数据源 而v-if又需要v-for出来的数据进行

判断所以可以一起使用不会报错  

但是 每次页面渲染的时候都会重复的进行判断是十分消耗性能的


而在Vue3中正好相反 v-if  > for 也就是说 v-if的优先级是比v-for的优先级高的

所以在Vue3中想要把v-if和v-for一起放在标签内一起使用是不可能的会直接报


为什么在Vue2能一起用到Vue3一起用就会报错呢?

这是因为 在Vue3中的v-if是比v-for的优先级高的 所以会先执行v-if但是v-if 的

执行又需要依靠到v-for的数据 但是这里是先执行v-if这个时候v-for还没有遍

历数据 所以会报一个当前v-if判断的变量还没有被定义的错误


为什么Vue2能够一起用但是不推荐使用呢?

这是因为如果v-if和v-for在同一层级 Vue在渲染组件的时 先根据v-for遍历所有

数据 并将他们都生成对应的虚拟DOM 之后再根据v-if的判断去对不符合条件的

元素进行从虚拟DOM的删除  那么从这里为什么不推荐使用就显而易见了

就是因为 会先执行v-for循环遍历出所有的数据 但是这个时候不是先进行v-if的

判断而是会去先对所有的数据都生成对应的虚拟DOM 然后再去通过v-if的判断

去 去掉不符合条件的虚拟DOM 这样就会造成性能的消耗 生成了没必要的虚拟

DOM元素 并且还对这些没必要的虚拟DOM元素进行了一次删除大大提高了

性能的损耗


解决方案    1:嵌套使用      2:使用computed计算属性或提前对数组进行filter过滤操作

1:嵌套使用:

我们把优先级高的指令放到内层嵌套的形式去写也就是在Vue3中我们外层

使用v-for 内层去使用v-if判断 这样就可以保证v-for先执行把数据都遍历出来供

我们的v-if使用 并且Vue可以先根据v-for遍历出来的所有子元素 去渲染只符合

v-if判断条件的元素


将符合条件的渲染并且生成虚拟DOM 而不符合条件的不会生成虚拟DOM

这样可以避免不必要的性能消耗 提高页面渲染的速度


为什么使用嵌套不会产生额外的虚拟DOM元素呢 ?

因为在这里的嵌套是父子级

的关系 v-if是v-for的子级也就是说在v-for循环出来所有的数据之后 就会到子级

去执行生成对应子级虚拟DOM的任务 但是在子级的元素标签上有v-if的判断 不符合的不会渲染 所以

不符合的元素的虚拟DOM就不会生成了

第二种:我们可以避免同时使用v-if和v-for  


我们首先明确我们的目的 如果遇到

了这种需要同时使用的时候一般是因为 我们的数组还没有经过处理 所以需要

遍历数组的同时对数组中的值进行处理 所以我们可以先一步对数组进行处理后

再进行遍历 例如我们可以通过数组的filter方法提前过滤 或者放到computed

计算属性中提前处理好 只使用一个v-for去遍历通过computed计算属性过滤

好的元素

相关文章
|
10天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`<li v-for="item in items" @click="handleClick(item)">{{ item }}</li>`。
|
18天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
71 6
|
15天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
15 2
|
18天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
29 2
|
14天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
14 0
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9
|
6天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
5天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
5天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
11 2