2025年vue生命周期钩子函数(详解及使用场景)（vue常用生命周期钩子函数）

大家好，我是讯享网，很高兴认识大家。

11月2号笔记

今日所学：VUE原生事件监听及处理、条件渲染、列表渲染

事件监听及处理：

事件（event）：从字面上来理解，就是发生的事情，这就意味着存在一个“触发器”来开启这个事情。而在前端页面的构建当中，这一步本质上就是“用户对界面的一个行为”，但往往就是“点击”了。

内联事件（inline event）：直接下HTML的标签中进行执行，不用下沉到JS中的事件群体，称为内联事件。

事件的监听标志为“v-on:”表示监听该组件是否发生了后续的行为，由于单个组件可能有多个事件，用于简化，也可以写为“@”，事例如下。

上下两个实现效果相同，只不过是以@来代替v-on而已，v-on中的v应该就是直接指VUE，告诉使用者这是VUE的语法，用于区分。

*注意：本质上来讲，这些带有v的操作，或者说VUE行为是通过将后续内容中的内容转化为JS然后在进行实现的，这就意味着在style中或者CSS中的某些语法需要去更改形式。如：

对于这一个用法，后面的“ - ”符号，会因为在转化为JS时被认为是减号，这就导致编译无法进行。在这一种情况下，通过转化为“驼峰命名法”即可，具体如下。

*注意：有些事件在触发之后，是会默认返回一个数据的，作为一个响应的回答，有些返回值甚至是很重要的，如分页块在改变时会返回一个当前页面的数字，用于向后端发送post。

但是需要注意的是，在这一种情况下，可能所需的所有参数都是来源于这一个事件的响应返回了。

条件渲染：

有些时候，部分组件不一定是在所有情况下都需要被渲染的，部分组件应该是在某些条件允许下才渲染的，这样的渲染方式，我们称之为“条件渲染”。

讯享网

在VUE中通过v-if可以实现条件渲染，基本方式如下：

其中if是作为bo的true下展示，而else则是false咯。

在这里，bo为一个布尔量，用于在switch发生变化时，来控制这一个view的展示与否。

当然，作为一个if-else组，其和一般正常的if-else并没有很大的区别，这就意味着内部填入了JS的条件判断式是没有问题了。

除了v-if以外，VUE中也可以使用v-show来实现“条件渲染”，其基本使用适合v-if相近的。

但是仍有不同，直接对页面进行检测即可发现问题。

以下为用于比较的v-if和v-show的代码。

以下为结果：

可以很明显的看出差别，既v-if是上述的那个注释，既在if内容为false时，会自动的将v-if的对应标签完全注释。而v-show则只是将display属性调整为none，让其不显示而已。

那么这二者如何选择呢？

V-if：

由于v-if是直接注释，这就意味着每一次更新都需要调整，每一次的调整都需要重新将这一个资源导入进来，这就导致其对资源性能的占用很大。从底层来看，每一次的解注释，都需要将内部数据导入到DOM树中，进行DOM树的调整，然后再在false时从DOM树中转移出去，又需要调整DOM树，这个的操作可不小。从网络来看，如果其条件渲染的对象是一些网络资源，比方说图片、视频等这些大体积的东西，就需要每一次的重新加载，这对网络处理相关资源（如流量）的消耗是不小的。

但是由于其优秀的打包能力（这里特指<template>），其可以快速的处理很多打包上面的东西，比方说通过包裹template直接调配包裹多个元素或者视图。

*注意：为了保证if-else的整个的判断连续性，其中间不应添加处空格外的一切其他内容。

V-show：

由于v-show在后续不会又DOM的重构，但是有得有失，这就意味着一开始的“初始构建”是一次硕大的工程，就导致初始时的资源消耗十分剧烈。极端来考虑，甚至可能因此，在加上一些杂七杂八的线程，导致单个进程过大而直接被OOM killer秒掉。

但是相应的，在整个程序的运行过程中，如果存在多次的条件渲染，很明显v-show会高于v-if。

列表渲染：

条件渲染固然是好的，但是在实际的项目处理中，对于同样式多复用的问题还是没有解决。比方说我需要拉出来一个表单，共20个内容，难道就意味着我要写20个一模一样的标签？这当然是不现实的。为了解决这样的多复用问题，我们自然想到了循环语句。故可以通过列表渲染来处理。

基本用法：使用v-for，然后多批次导入同一个列表内容，之后展现出来。

其中的items就是循环的主体，从中逐个提取出item用于后续image中属性src的绑定。

*注意：后续的不一定是要求一个ref的对象，也可以为一个数据如10、20之类的，如果需要添加索引值，可以直接加上括号后添加第二参数作为索引。

但是，上述这样的定义方式并不是完全可行的，尤其是在一些如微信小程序当中。之所以报错，是因为我们需要添加key来作为唯一特性来定义单元条目。所以需要将v-for转化为如下内容。

所有代码如下。

2025年vue生命周期钩子函数(详解及使用场景)（vue常用生命周期钩子函数）

相关推荐