v-if和v-show与v-if和v-for之间的优先级问题

v-if和v-show之间的优先级问题

关于这个问题，我们首先需要知道的是v-if和v-show都是如何工作的，只有深入了解了两者的运行原理，才能正确的认识到他们之间的优先级问题。

v-if的工作原理

v-if当且仅当初次渲染和数据发生变化时才起效，Vue会根据表达式的值来判断当前的元素或者组件是否需要渲染。如果为false，也就是不需要渲染，此时Vue会放弃处理这一段代码，将其“丢弃”。也就是说在编译的时候不会将这段代码编译为渲染函数。

v-show的工作原理

v-show与v-if不同，他是通过改变元素的css样式来控制元素的显示隐藏的，也就是通过更改元素的display属性来控制元素的显示隐藏。一旦v-show为false,就会在编译的时候给元素或组件加上display:none这个属性。如此一来，在DOM树和CSSOM树合并为render树的时候，就会忽略掉这块代码，从而实现隐藏。

需要注意的是，在使用v-if的时候，我们可以使用<template>元素对一大块代码进行整体的判断，判断其是否显示或隐藏。但是在使用v-show的时候，不能在<template>元素上使用v-show。因为<template>元素并不会在页面中显示任何内容，因此其内部的元素也不会参与布局、样式和事件等处理，而v-show是对元素的样式进行操作实现的显示隐藏，所以说v-show不能写在<template>元素上。

Vue的渲染原理

为了更好更全面的认识和理解v-if与v-for的优先级关系，我们先来看看Vue的渲染原理，其实就是Vue是如何将.vue文件编译为浏览器可识别的代码的。

.vue文件并不能被浏览器识别，这点大家应该是知道的。vue在编译的过程中，会先将模板解析为AST语法树，之后再根据AST语法树生成渲染函数。若是初次渲染的话则会对DOM执行渲染函数，同时生成虚拟DOM。否则是等到响应式的数据发生变化的时候，才会更新虚拟DOM，进行一系列的比较后生成一系列的对于页面的DOM操作数最少的DOM操作，传递给浏览器，然后通过异步队列执行这些DOM操作。

v-if和v-show之间的优先级

不难看出，v-if是发生在编译过程中的，也就是说如果一个元素或组件有v-if且为false，那么就不会对这个文件进行编译。而v-show则是发生在DOM操作这一过程中，更改页面元素的样式，在浏览器对页面进行重绘重排的时候，生成render树的时候才起效的。所以说v-if的优先级是高于v-show的。

v-if和v-for之间的优先级问题

这个问题不像之前的问题那样冷门，是面试中经常会遇到的问题。

关于v-if和v-for优先级的讨论，我们需要分Vue2和Vue3两种情况来讨论。

在Vue2中

在Vue2中，v-for的优先级更高，这并非存在着什么深层次的计算什么的，仅仅是因为在编译的过程中，是先判断该元素是否有v-for标签，判断完了之后再判断的是否有v-if标签。因此当两者一同使用的时候，会先使用v-for将所有元素都创建一遍，创建完成之后再用v-if来判断该元素是否需要显示。很明显，这样会带来不必要的性能消耗。因为有些元素并不需要显示，但是我仍创建出来了。

至于为何在Vue2中先处理v-for再处理v-if，我猜测可能是出于代码复杂度的考虑。因为若是先使用v-if判断的话，需要先将v-for所遍历的属性每一个都要判断一遍，再将需要渲染的保存下来，使用v-for来循环渲染。而要是v-for的优先级更高的话，v-for只需要执行循环渲染，v-if只需要执行条件判断，每一个操作都更为封闭，对外界影响更小，对于心智负担相对来说更小一些。

在Vue3中

在Vue2中，v-if的优先级更高，这是为了解决v-if和v-for同时使用的时候带来的不必要的性能消耗，此时会先判断需要渲染的有哪些，再将这些需要渲染的循环渲染。

但是需要注意的是，在Vue3中，同时使用v-for和v-if会使控制台发出警告。

尽量避免同时使用v-if和v-for

尽然要尽量避免同时使用v-if和v-for，那么倘若有一大串数据，我需要使用v-for对其进行循环渲染，但是其中的某些数据我不想让他渲染，那此时我该怎么办呢？

我们可以先使用计算属性，通过filter过滤，将不需要渲染的数据给过滤掉，在v-for的时候，就不必使用v-if来判断了。