Vue的生命周期及钩子函数

最新推荐文章于 2023-07-14 14:11:12 发布

-abandon-

最新推荐文章于 2023-07-14 14:11:12 发布

阅读量398

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wasdf231/article/details/125475510

版权

本文详细介绍了Vue的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed这八个钩子函数。在不同阶段，Vue实例的状态和操作各有特点，例如beforeCreate阶段数据模型已创建但视图未生成，mounted阶段完成挂载，updated阶段完成数据更新。这些生命周期理解对于优化Vue应用和进行组件间的协调至关重要。

摘要由CSDN通过智能技术生成

Vue的生命周期及钩子函数

Vue生命周期是指vue实例对象从创建之初到销毁的过程。

生命周期图：

在这里插入图片描述

vue实例的生命周期，及其八个钩子函数

1、创建 beforeCreate created
2、挂载 beforeMount mounted
3、更新 beforeUpdate updated
4、销毁 beforeDestroy destroyed

(1):①、beforeCreate:创建实例前。视图view和data数据模型都未被创建

②、created:创建完成（后）。视图view未被创建，data数据模型被创建

(2):①、beforeMount:挂载前(开始创建模型)。视图view未被真正创建只是进行占位，data数据模型被创建

②、mounted:挂载后(创建完成)。视图view被真正创建并进行数据绑定，data数据模型被创建

(3):①、beforeUpdate 更新前。data模型被更新，view视图未被更新。更新前的准备

②、updated 更新后。view和data都被更新。更新完成

(4):①、bbeforeDestroy 销毁前，做销毁前的准备

②、destroyed 销毁后。销毁完成

生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;

钩子函数

 beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

在这里插入图片描述

代码

<body>
    <div id="app">
        <div>
            {
  {msg}}
        </div>
        <ul>
            <li v-for="a in arr"></li>
        </ul>
        <button @click="fn">点我一下</button>
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script sr