--- theme: channing-cyan --- ## 自我介绍大家好，我叫[JetTsang](https://juejin.cn/user/1082334121297213)，之前都是在掘金潜水来着，现在偶尔做一些内容输出吧。 ## 前言 v-if和v-for哪个优先级更高呢？这是面试官常常问到的一个问题，如果是在三年前，我会毫不犹豫的回答当然是v-for哩，但在3202的今天，如果还这么答，显然是低估了前端技术的日新月异啰。下面我们就来结合编译结果，一探究竟吧。注意了⚠️，以上问题一般指的是v-for和v-if连用的情况，比如 ```js

``` ## 剖析我们都知道，这个v-if是条件渲染，v-for是列表渲染，都是模版语法，叫这名字当然是因为它们只能在Vue的模版当中用啦。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d874dd84709045efa34265b278a8aae0~tplv-k3u1fbpfcp-watermark.image?) 这些模版语法不是Javascript原生的，因此需要经过一个编译的过程，将它们转为render函数。经历render函数-->虚拟DOM-->真实DOM 这样的过程,呈现到页面当中。因此，剖析这个问题的关键就是看编译成的`render函数`。在此有请Vue官方设计的工具，可以让我们实时看到编译成的render函数。 .[v2.template-explorer](https://v2.template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%3E%7B%7B%20msg%20%7D%7D%3C%2Fdiv%3E) .[vue3-template-explorer](https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PkhlbGxvIFdvcmxkPC9kaXY+Iiwib3B0aW9ucyI6e319) 首先介绍下我们的例子，无非就是渲染一个列表 ```js