Vue - Vue生命周期钩子

最新推荐文章于 2024-08-18 16:55:31 发布
最新推荐文章于 2024-08-18 16:55:31 发布
阅读量963 收藏 2
点赞数 2
分类专栏： 前端框架 文章标签： vue.js html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37960603/article/details/109580867
版权

推荐：Vue汇总

Vue - Vue生命周期钩子

官网

下图展示了Vue实例的生命周期。在这里插入图片描述

beforeCreate

在Vue实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
         <p>Hello Kaven</p>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        beforeCreate: function () {
            console.log('beforeCreate');
        }
    })
</script>

效果：
在这里插入图片描述
created

在Vue实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
         <p>Hello Kaven</p>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述
可以看到$el property 目前尚不可用。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

什么是服务器端渲染？

下图页面没使用服务器端渲染，当请求user页面时，返回的body为空，之后执行js将html结构注入到body里，结合css显示出来。
在这里插入图片描述
下图页面使用了服务器端渲染，当请求user页面时，返回的body里已经有了页面的html结构，之后结合css显示出来即可。
在这里插入图片描述
由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。

此外还需要注意的是，你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer。在纯客户端 (client-side only) 的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
         <p>{{text}}</p>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
          text: 'Hello Kaven'
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述
可以看到$el property 目前可用，但{{text}}还没有被替换成Hello Kaven。

mounted

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

vm.$nextTick：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="div">
         <p>{{text}}</p>
    </div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
          text: 'Hello Kaven'
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        },
        mounted: function () {
            console.log('mounted');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述
{{text}}已经被替换成Hello Kaven了。

beforeUpdate

数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
    <button @click="click">{{count}}</button>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            count: 0
        },
        methods: {
            click() {
                this.count++;
            }
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        },
        mounted: function () {
            console.log('mounted');
            console.log(this.$el);
        },
        beforeUpdate: function () {
            console.log('beforeUpdate');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述

updated

由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
    <button @click="click">{{count}}</button>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            count: 0
        },
        methods: {
            click() {
                this.count++;
            }
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        },
        mounted: function () {
            console.log('mounted');
            console.log(this.$el);
        },
        beforeUpdate: function () {
            console.log('beforeUpdate');
            console.log(this.$el);
        },
        updated: function () {
            console.log('updated');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
    <button @click="click">{{count}}</button>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            count: 0
        },
        methods: {
            click() {
                this.count++;
            }
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        },
        mounted: function () {
            console.log('mounted');
            console.log(this.$el);
        },
        beforeUpdate: function () {
            console.log('beforeUpdate');
            console.log(this.$el);
        },
        updated: function () {
            console.log('updated');
            console.log(this.$el);
        },
        beforeDestroy: function () {
            console.log('beforeDestroy');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述
destroyed

实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LifeCyCle</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="div">
    <button @click="click">{{count}}</button>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el: '#div',
        data: {
            count: 0
        },
        methods: {
            click() {
                this.count++;
            }
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
            console.log(this.$el);
        },
        beforeMount: function () {
            console.log('beforeMount');
            console.log(this.$el);
        },
        mounted: function () {
            console.log('mounted');
            console.log(this.$el);
        },
        beforeUpdate: function () {
            console.log('beforeUpdate');
            console.log(this.$el);
        },
        updated: function () {
            console.log('updated');
            console.log(this.$el);
        },
        beforeDestroy: function () {
            console.log('beforeDestroy');
            console.log(this.$el);
        },
        destroyed: function () {
            console.log('destroyed');
            console.log(this.$el);
        }
    })
</script>

效果：
在这里插入图片描述
虽然还可以输出$el，但点击按钮已经没有反应了，说明按钮的点击事件监听器被移除了。

Vue生命周期钩子就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

参考

ITKaven
关注
专栏目录
vue实现选项卡及选项卡切换效果.docx
01-21
vue实现选项卡及选项卡切换效果.docx
Vue生命周期
leaves_story的博客
04-17 98
beforeCreate: function() {}  // 在实例初始化之后， 数据观测 和 event/watcher 事件配置之前被调用。created: function() {}       // 实例已经创建完成之后被调用。实例已完成如： 数据观测，属性和方法的计算，watch/event事件回调。beforeMount: function() {}   // 在挂载开始之前被调用，...
Vue学习笔记（六）：生命周期钩子、路由、Element Plus
最新发布
qq_63978748的博客
08-18 1014
'/': Home,routes 是一个简单的对象，用于将路径映射到组件。前面的键是路径字符串，后面的值是对应的组件。这意味着当路径为 '/' 时，将显示 Home 组件；当路径为 '/about' 时，将显示 About 组件。
3.15 WMI Data Reader任务和Event Watcher任务
Johnson的专栏
11-19 948
3.15  WMI Data Reader任务和Event Watcher任务Windows管理规范（Windows Management Instrumentation，WMI）是Windows中的“最高机密”之一。WMI允许用户通过脚本编程接口来管理Windows服务器和工作站。WMI Data Reader任务允许用户通过编写针对服务器或工作站的WQL查询（针对WMI的查询语言）来与该环
Vue.js 生命周期函数
Pancras Wen的博客
07-30 668
Vue.js 生命周期指的是Vue实例的生命周期；Vue实例的生命周期，指的是实例从创建到运行、再到销毁的过程。通过设置生命周期函数，可以在生命周期的特定阶段执行功能。生命周期函数也称生命周期钩子。提示：以下是本篇文章正文内容，下面案例可供参考Vue.js 是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，易于与其他库或已有项目集成。在 Vue.js 中，我们可以通过定义生命周期钩子函数来监听和操作 DOM 元素的变化，从而实现数据的双向绑定、组件化等功能。
vue2 生命周期 源码探究
yiyi_11的博客
06-24 738
从源头探究 vue2 生命周期所历经的各个阶段，深入源码解读，认识现象的本质，加深对生命周期的理解
vue-devtools
03-27
你可以查看每个组件的状态，包括props、data、computed属性、methods以及生命周期钩子函数。点击组件可以查看其模板和渲染后的DOM结构。 2. **状态管理**：如果你使用了Vuex进行状态管理，Vue Devtools还可以帮助你...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue-simple-uploader for vue3源码
04-22
1. **组件设计**：组件通常由模板、数据、方法、生命周期钩子等组成。在源码中，你可能会看到`<Uploader>`组件，它负责接收用户选择的文件，并触发上传过程。 2. **文件选择和监听**：`vue-simple-uploader` 使用...
使用Vue-Grid-Layout实现自定义工作台
02-01
1. **初始化布局**：在 `mounted` 生命周期钩子中，你可以预先设定组件的位置和大小，或者从服务器获取布局数据。 2. **定义 Grid 组件**：在模板中，创建一个 `GridLayout` 并传递布局数据和配置项，例如响应式、...
tts-vue-1.9.0 语音合成
05-23
- **生命周期钩子**：如`created`、`mounted`、`updated`，在组件的不同阶段执行特定任务。 2. **语音合成技术** - **TTS（Text-to-Speech）**：是一种将文本转换成可听见的语音的技术，常用于读出屏幕上的文字，...
Vue实现选项卡切换
我是段段的博客
01-19 6493
Vue实现选项卡切换 前言 用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了 首先需要引入vue.js <!-- 引入vue.js --> <script src="./js/vue.js"></script> 页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下 <div id="app"> <!-- ul用来控制上部分切换模块 --> &lt
Vue实现选项卡切换，tab切换
热门推荐
努力变好
10-28 1万+
1、实现tab切换就是 单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确） 2、第一种方法效果图 这个没什么可说的，直接看代码吧（两种方式） 2、第一种完整代码（下边这段代码是我在网上学的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<.
前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
chenchuang0128的博客
06-12 7263
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色。
Vue——API vue实例选项二(2.x)
RainGirl_的博客
04-07 144
1，选项资源： directives， filters， components 2, 选项组合：parent(parent是什么，做什么用的), extends, mixins, provide/inject(这两个又是做什么) 3, 选项其他：name, inheritAttrs, comments(这是做什么用的), funtional, model(model是什么，做什么用的？), delimiters(这是什么，又是什么类型的 4，参考文档： Vue ...
怎样用vue3基本知识实现一个点击选项卡切换的功能？
canday_的博客
05-16 803
怎样用vue3基本知识实现一个点击选项卡切换的功能？
Vue 2 OptionsAPI
nknmn
05-12 1235
名称自定义任何包含响应式数据的复杂逻辑，都应该使用计算属性计算属性是有缓存的计算属性和methods 的区别：计算属性会基于它的依赖关系进行缓存，是有缓存的在数据不发生变化时，计算属性是不需要重新计算的依赖的数据发生变化，计算属性会自动重新进行计算在多次调用时，methods 会多次执行，计算属性只执行一次。
vuejs中组件的两种不同的编写风格-选项式API及组合式API
发果叁
01-18 3770
随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Teleport,Suspense,也去掉了vue2中一些特性,比如:移除keyCode支持作为v-on的修饰符等在编程风格上也有一些区别选项式API与组合式API是Vue提供的两种不同的编程风格,在vue2.7版本之前都是使用选项式API,响应式数据需要挂载在data下,而方法需要挂载 在methods。
Vue2常用api
2026的博客
03-17 876
vue2基本知识点
Vue实例与生命周期深度解析：结合vue-cli实战
其他生命周期钩子 }); ``` 了解这些钩子可以帮助我们更好地控制组件的状态和行为。 1.5 Vue CLI（脚手架） Vue CLI（命令行工具）是快速搭建Vue项目开发环境的工具，可以生成项目模板、配置自动化构建流程、安装...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITKaven

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值