Vue的生命周期、v-ifVSv-show、v-if和v-for的优先级

最新推荐文章于 2026-05-06 22:32:55 发布

原创最新推荐文章于 2026-05-06 22:32:55 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #vue.js

Vue 专栏收录该内容

12 篇文章

订阅专栏

1、Vue的生命周期

1.1、生命周期是什么？

在Vue实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载DOM-->渲染、更新-->渲染、卸载等一系列过程。在Vue生命周期钩子会自动绑定this上下文到实例中，因此可以访问数据，对property和方法进行运算意味着不能使用箭头函数来定义一个生命周期方法。

1.2、生命周期有哪些？

总共可以分为8个阶段：创建前后、载入前后、更新前后和销毁前后，以及一些特殊场景的生命周期：

生命周期	描述	使用场景
beforeCreate	组件实例被创建前	执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务。
created	组件实例被完全创建。完成数据观测，属性和方法的运算，watch、event事件回调的配置；可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算；此时vm.$el并没有被创建。	组件初始化完毕，各种数据可以使用，常用于异步数据获取。
beforeMount	组件挂载之前。此阶段可以获取到vm.el；此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上	未执行渲染、更新，dom未创建。
mounted	组件完全挂载到实例上去之后。vm.el已完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM	初始化结束，dom已创建，可用于获取访问数据和dom元素。
beforeUpdate	组件数据发生变化，更新之前。在beforeUpdate中修改数据，不会再次触发更新方法	更新前，可用于获取更新前各种状态
updated	组件数据更新之后。若在updated中再次修改数据，则会再次触发beforeUpdate、updated更新方法。	更新后，所有状态已是最新
beforeDestroy	组件实例销毁之前。此时属性和方法仍然可以访问	销毁前，可用于一些定时器或订阅的取消
destroyed	组件实例销毁之后。可清理实例和其他实例的连接，解绑实例的全部指令以及事件监听器。	组件已销毁，作用同上
activated	keep-alive缓存的数据激活后
deactivated	keep-alive缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

1.3、created和mounted的区别

区别：

触发时机不同，created要早于mounted。created是在组件实例创建完成就立即执行的，此时页面dom节点并未生成。mounted是在页面dom节点渲染完毕之后立即执行的。

使用场景不同：created一般用于异步数据的获取，不能访问dom元素。mounted用于获取访问数据和dom元素。放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），而如果在页面加载前（created）完成请求，则不会出现此情况。

相同点：

都可以拿到实例对象的属性和方法。

2、v-show和v-if

2.1、共同点

作用效果相同：都可以控制元素是否显示。

语法相同：都是通过绑定的变量值为true或false控制元素是否显示。

2.2、不同点

（1）控制手段不同：v-show隐藏是通过为该元素添加css样式display:none，dom元素仍然存在。v-if显示则是将dom元素整个添加或删除。

（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单地基于css切换。

（3）编译条件（是否触发组件的生命周期）：v-if是真正地条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。当渲染条件为假时，并不做操作，直到为真时才渲染。v-show由false变为true时，不会触发组件的生命周期。v-if由false变为true时，触发组件的beforeCreate、created、beforeMount、mounted钩子，由false变为true时，触发组件的beforeDestroy、destroyed。

（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

2.3、使用场景

v-if和v-show都能控制dom元素在页面的显示；v-if相比v-show有更大的开销（直接操作dom节点增加或删除）。如果想要频繁地切换显示，使用v-show；如果在运行时条件很少改变，使用v-if。

3、v-if和v-for的优先级是什么？

3.1、作用

v-if用于控制元素是否显示，只有在绑定的变量为true时才会显示；v-for是基于一个数组来进行渲染一个列表。v-for指令需要用item in items形式的特殊语法，其中items是源数据数组或对象，而item则是被迭代的数组元素的别名。

3.2、优先级

v-if和v-for都是vue模板中的指令，在vue模板编译的时候，会将指令系统转化成可执行的render函数。

v-for的优先级要比v-if高。

3.3、注意事项

（1）不能把v-for和v-if作用在同一个元素上，因为会带来性能上的浪费（每次渲染都会先循环再进行条件判断）

（2）如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

<div>
    <template v-if="isShow">
        <p v-for="item in items"></p>
        </template>
</div>

（3）如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项。