Vue生命周期

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

一、Vue生命周期函数

二、创建阶段

1.beforeCreate

生命周期函数中的第一个函数，这个函数他在执行Vue实现的，仅仅完成了自身事件的绑定和生命周期函数的初始工作，这时候实例里还没有el，data，methods这些相关属性

<script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
      },
      beforeCreate(){
        console.log(this.msg);
      }
 </script>

可以看到控制台并未打印msg的内容。

2.created

生命周期函数中的第二个函数，这个函数在执行的时候，Vue实例已经初始化了data和methods中的属性

<script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        }
      },
      beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      }
    })
  </script>

这时候可以看到控制台输出了msg的内容，说明Vue实例的属性已经初始化了，而且在此之前，msg还在处于未初始化的{{msg}}形式

三、挂载阶段

3.beforeMount

生命周期中的第三个函数，这个函数在执行Vue将el中指定范围作为模板翻译

开始挂载编译生成的HTML到对应位置时触发的钩子函数。但此时还未将编译出的HTML渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
  </div>

</body>
</html>

  <script src="../lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        }
      },
     beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      },
      beforeMount(){
        console.log('beforeMount'+document.getElementById('h1').innerText);

      }
    })
  </script>

控制台打印 结果如下

4.mounted

生命周期中的第四个函数，这个函数在执行过程中，已经将数据渲染到界面中，并且已经更新页面。将编译好的HTML挂载到页面完成后执行的钩子函数，此时可以发送ajax请求获取数据的操作进行数据初始化。但mounted在整个实例声明内只执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
  </div>

</body>
</html>

  <script src="../lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        }
      },
      beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      },
      beforeMount(){
        console.log('beforeMount'+document.getElementById('h1').innerText);

      },
      mounted(){
        console.log('mounted'+document.getElementById('h1').innerText);
      }
    })
  </script>

控制台打印

四、运行阶段

5.beforeUpdate

生命周期中的第五个函数，这个函数是data中的数据发生变化时候进行的，这个事件执行仅仅是Vue实例中data数据变化页面显示的仍然是原始数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg">
  </div>

</body>
</html>

  <script src="../lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        }
      },
      beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      },
      beforeMount(){
        console.log('beforeMount'+document.getElementById('h1').innerText);

      },
      mounted(){
        console.log('mounted'+document.getElementById('h1').innerText);
      },
      //运行阶段
      beforeUpdate(){
        console.log("beforeUpdate" + this.msg);
        console.log("beforeUpdate" + document.getElementById('h1').innerText);
      }
    })
  </script>

可以看到，当改变数据的时候，函数中得到的标签中的数据仍然是未更新过的原始数据

6.updated

生命周期中第六个函数，这个函数是data中数据发生变化时候执行，页面中的数据已经和data中的数据保持一致，是更新过的新数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg">
  </div>

</body>
</html>

  <script src="../lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        }
      },
      beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      },
      beforeMount(){
        console.log('beforeMount'+document.getElementById('h1').innerText);

      },
      mounted(){
        console.log('mounted'+document.getElementById('h1').innerText);
      },
      //运行阶段
      beforeUpdate(){
        console.log("beforeUpdate" + this.msg);
        console.log("beforeUpdate" + document.getElementById('h1').innerText);
      },
      updated(){
        console.log('updated' + this.msg);
        console.log('updated' + document.getElementById('h1').innerText)
      }
    })
  </script>

效果如下

五、销毁阶段

7.beforeDestory

生命周期钩子函数中的第七个函数。当执行beforeDestory钩子函数时，Vue实例就已经从运行阶段进入销毁阶段，此时，组建中所有data、methods以及过滤器，指令等都处于可用状态，此时还未真正执行销毁过程

8.destroyed

生命周期函数中的第八个函数，该函数执行的时候，Vue实例彻底被销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg">
  </div>

</body>
</html>

  <script src="../lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'恕瑞玛'
      },
      methods:{
        show(){
          alert('弹窗来啦');
        },
        display(){
          console.log('哈哈啊哈');
        }
      },
      beforeCreate(){
        console.log(this.msg);
      },
      created(){
        console.log(this.msg);
        this.show();
      },
      beforeMount(){
        console.log('beforeMount'+document.getElementById('h1').innerText);

      },
      mounted(){
        console.log('mounted'+document.getElementById('h1').innerText);
      },
      //运行阶段
      beforeUpdate(){
        console.log("beforeUpdate" + this.msg);
        console.log("beforeUpdate" + document.getElementById('h1').innerText);
      },
      updated(){
        console.log('updated' + this.msg);
        console.log('updated' + document.getElementById('h1').innerText)
      },
      beforeDestroy(){
        console.log('执行了销毁前beforeDestroy');
        this.display();
      },
      destroyed(){
        console.log('执行了销毁后destroyed');
        this.display();
      }
    })
  </script>

控制台输出如下，当我们执行完vm.$destroy()销毁函数后，beforeDestory 和 destroyed 都被执行，然后再输入框里输入内容，<h1>{{msg}}<h1> 不再会同步展示，因为Vue实例已经被彻底销毁了。

Bugman.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
Vue生命周期详解
Phoneix的博客
06-25 9989
目录 前言： 一、生命周期流程图详解 1.beforeCreate、Created 2.编辑模板过程 3.beforeMount、Mounted 4.beforeUpdate、Updated 5.beforeDestroy、Destroyed 二、生命周期代码 1.父子组件加载生命周期 2.父子组件更新生命周期 3.父子组件销毁生命周期 前言： 1、什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
Vue 生命周期
weixin_47227886的博客
04-14 3万+
主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。...
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
Vue3生命周期
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
VUE生命周期
qq_48984694的博客
10-31 1031
Vue生命周期
vue生命周期
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
vue 生命周期
qq_64209130的博客
05-07 1286
vue声明周期就是一个vue实例对象从创建到销毁的过程, 从创建vue , 初始化vue对象,初始化vue属性和方法 , 创建模板字符串 , 渲染页面 , 更新 , 销毁 这个过程 生命周期方法分为三大类 1.创建期间的生命周期方法 beforeCreate(创建前) created(创建后) beforeMount(挂载前) mounted(挂载后) 2.运行期间的生命周期方法 beforeUpdate(更新前) updated(更新后) 3.销毁时的生命周期方法 before.
VUE 生命周期
weixin_45628827的博客
02-23 1917
vue生命周期就是每一个vue实例从创建到销毁的过程，在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 通俗来说就是vue实列创建了，经历了一些列的事件，然后销毁了这样的过程。 一般来说vue生命周期分为8钩子函数： ...
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1015
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 415
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 626
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 263
el-table实现。
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值