v-for比v-if优先级更高?

前言

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

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

{{item.name}}
复制代码

剖析

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

v-for比v-if优先级更高?_第1张图片

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

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

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

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

.v2.template-explorer

.vue3-template-explorer

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




                    
                    

你可能感兴趣的:(javascript,前端,vue.js)