v-for比v-if优先级更高？面试官回去等通知吧_java if和for哪个占比多

最新推荐文章于 2024-10-01 17:17:19 发布

2401_84617246

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量607

点赞数 16

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617246/article/details/138932373

版权

程序员专栏收录该内容

105 篇文章 1 订阅

订阅专栏

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

大厂面试题分享面试题库

前后端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库 web前端面试题库 VS java后端面试题库大全

前言

v-if和v-for哪个优先级更高呢？这是面试官常常问到的一个问题，如果是在三年前，我会毫不犹豫的回答当然是v-for哩，但在3202的今天，如果还这么答，显然是低估了前端技术的日新月异啰。下面我们就来结合编译结果，一探究竟吧。

注意了⚠️，以上问题一般指的是v-for和v-if连用的情况，比如

<div v-for='item in itemList' v-if='item.id === 1' >{{item.name}}</div>
复制代码

剖析

我们都知道，这个v-if是条件渲染，v-for是列表渲染，都是模版语法，叫这名字当然是因为它们只能在Vue的模版当中用啦。

这些模版语法不是Javascript原生的，因此需要经过一个编译的过程，将它们转为render函数。

经历render函数–>虚拟DOM–>真实DOM 这样的过程,呈现到页面当中。

因此，剖析这个问题的关键就是看编译成的render函数。

在此有请Vue官方设计的工具，可以让我们实时看到编译成的render函数。

首先介绍下我们的例子，无非就是渲染一个列表

<template>
    <ul>
        <li v-for="item in list" :key="item.id" v-if="item.id === 1"></li>
    </ul>
</template>

<script>
    // 这里省略掉变成响应式的过程，因为vue2 3 写法不一
    
    list:[
        {name:"JetTsang",id:1},
        {name:"juejin",id:2},
        {name:"baidu",id:3},
    ]
    
<script>
复制代码