Vue基础7之生命周期

已于 2022-12-23 16:07:14 修改
阅读量507 收藏
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
于 2022-12-20 17:58:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/128367449
版权

Vue基础7

生命周期

引出生命周期

请添加图片描述

用css animation实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    .normal{
      animation: use 2s linear infinite;
    }
    @keyframes use{
      to{
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <h2 class="normal">欢迎学习Vue</h2>
  </div>
</body>
</html>

用定时器实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
  </div>
</body>
<script>
    const vm=new Vue({
      el:"#app",
      data:{
        opacity:1
      }
    });

    //通过外部的定时器实现（不推荐）
    setInterval(()=>{
      vm.opacity-=0.01
      if(vm.opacity<=0) vm.opacity=1
    },16)
  </script>
</html>

错误：用methods实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    {{change()}}
  </div>
</body>
<script>
    const vm=new Vue({
      el:"#app",
      data:{
        opacity:1
      },
      methods:{
        change(){
          setInterval(()=>{
            this.opacity-=0.1
            if(this.opacity<=0) this.opacity=1
          })
        }
      }
    })
  </script>
</html>

请添加图片描述
原因：
请添加图片描述
所以上述方法不可行

使用生命周期函数mounted实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <h2 v-if="test">测试在Vue二次解析模板时，是不会调用mounted的</h2>
    <button @click="test=!test">测试是否重复调用mounted</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      opacity:1,
      test:false
    },
    //Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted
    mounted(){
      console.log("mounted被调用，其中this是：",this);
      setInterval(()=>{
        this.opacity-=0.1
        if(this.opacity<=0) this.opacity=1
      },200)
    }
  })
</script>
</html>

请添加图片描述

生命周期定义

生命周期：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
  4. 生命周期函数中的this指向是 vm 或 组件实例对象。

分析生命周期

请添加图片描述

挂载流程

beforeCreate()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      debugger
    },
    // created() {
    //   console.log("created，this._data：",this._data);
    //   debugger
    // },
    // beforeMount() {
    //   console.log("beforeMount");
    //   document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
    //   // debugger
    // },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

created()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      debugger
    },
    // beforeMount() {
    //   console.log("beforeMount");
    //   document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
    //   // debugger
    // },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

beforeMount()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      debugger
    },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

mounted()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      debugger
    },
  })
</script>
</html>

请添加图片描述

template的作用

没有加template时的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app" :x="n">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      // document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      // document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      // debugger
    },
  })
</script>
</html>

请添加图片描述
使用template时候的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app" :x="n">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    template:"<div></button><div id='number'>当前的n值是：{{n}}</div><button @click='add'>点我+1</button></button></div>",
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      // document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      // document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      // debugger
    },
  })
</script>
</html>

请添加图片描述
请添加图片描述

更新流程

beforeUpdate()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>更新流程</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdated");
      console.log("this.n：",this.n);
      debugger
    },
  })
</script>
</html>

请添加图片描述

updated()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>更新流程</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdated");
      // console.log("this.n：",this.n);
      // debugger
    },
    updated() {
      console.log("updated");
      console.log("this.n：",this.n);
      debugger
    },
  })
</script>
</html>

请添加图片描述

销毁流程

beforeDestroy()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        console.log("add");
        this.n++
      },
      bye(){
        console.log("bye");
        this.$destroy()
      }
    },
    beforeDestroy() {
      console.log("beforeDestroy");
      this.add()
    },
    destroyed() {
      console.log("destroyed");
    },
    
  })
</script>

请添加图片描述

生命周期总结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>透明度案例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="stopS">点我停止变换</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      opacity:1
    },
    methods: {
      stopS(){
        this.$destroy()
      }
    },
    mounted() {
      console.log("mounted");
      this.timer=setInterval(() => {
        console.log("setInterval");
        this.opacity-=0.01
        if(this.opacity<=0)  this.opacity=1
      },16)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      console.log("vm即将驾鹤西去了");
    },
  })
</script>
</html>

请添加图片描述
常用的生命周期钩子：

  1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

  1. 销毁后借助用Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
VillanelleS
关注
专栏目录
Vue基础/生命周期/路由
ZQD的博客
09-25 661
文章目录Vue基础知识点：生命周期：过滤器路由 vue-router前端路由核心：ui-router：vue中： Vue基础知识点： 1:全局的代表Vue.的 2:实例的代表this.或者new Vue(). 3:选项代表new Vue()的参数或者export default里边的属性 生命周期： 生命周期函数就是vue实例在某个时间点会自动执行的函数 beforeCreate created...
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
vue：基础：生命周期
1363648943的专栏
09-05 2322
vue生命周期、勾子函数、data 传值、实例
vue2vue3生命周期详解
qq_51649346的博客
09-21 4108
​ 用官方的话来说就是每一个vue实例从创建到销毁的过程。这个过程，vue经历了创建—初始化数据—编译模板—挂载dom—渲染、更新、渲染、卸载等一系列操作。先来看看官方给出的一张图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传相信这就是"万恶之源"的开始，让我们来仔细看看这到底是个什么意思。
Vue3的8大生命周期
大剑师兰特的GIS世界
02-27 656
CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。总的来说，通过合理利用这些生命周期钩子，开发人员可以更好地管理组件的状态、数据以及DOM操作，从而提高Vue应用程序的性能和可维护性。，这是 Composition API 的一部分，允许开发者在创建组件时更灵活地组织和复用逻辑。，为开发者提供了更灵活的逻辑复用和组织方式。此外，Vue3 还引入了新的生命周期钩子。
VUE与React的生命周期对比
大学生小郑的博客
07-08 1345
VUE与React的生命周期对比
vue基础--vue的生命周期
yookooi
07-27 5181
vue基础---vue的生命周期
Vue基础知识——生命周期
qq_28695495的博客
10-07 713
1、首先父组件由beforeCreated 执行到 beforeMount。2、然你后子组件由beforeCreated执行到mounted。不同点：created获取不到el，mounted可以获取到。相同点：都能获取到props和data的数据。有两个组件，一个是父组件一个子组件。3、最后父组件执行mounted。4个阶段，8个钩子。
vue2基础-生命周期方法
weixin_45002586的博客
11-10 495
vue 生命周期方法
三、Vue3基础[生命周期]
黑日里不灭的light
11-29 660
1.beforeCreate 详细信息：会在实例初始化完成、**props** 解析之后、**data()** 和 **computed** 等选项处理之前立即调用 ，此时**data**、**watcher**、**methods**都还没有生效
vue生命周期学习(基础原理)
DLGDark的博客
10-11 629
vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染—>更新—>渲染、销毁等一系列过程，我们称这是Vue的生命周期。 每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 下图为vue生命周期示意图： 具体各个生命周期的意义及用法 beforeCreated 这个时候数据还没有挂载，访问不到数据和真实的Dom，一般不做操作 created 这个时候可以使用数据及更改数据了，但不会触发updated函数，不会触发其他
Web前端框架应用：第2章 Vue开发基础-生命周期.pptx
06-06
2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;创建vm实例;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命...
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
11-27
Vue.js 是一款流行的前端JavaScript框架，它以组件...Vue实例、生命周期和vue-cli的使用是掌握Vue开发的关键点，它们共同构成了Vue应用程序的基础。通过深入理解和实践，开发者可以构建出高性能、易于维护的前端应用。
vue的基础内容，包括vue指令，vue组件，vue生命周期，vue路由，vue的工程化项目等内容。
02-10
Vue 生命周期是指 Vue 实例从创建到销毁的整个过程。该过程包括： * beforeCreate：实例创建之前 * created：实例创建后 * beforeMount：挂载之前 * mounted：挂载后 * beforeUpdate：更新之前 * updated：更新后 *...
腾讯IM SDK：TUIKit发送多张图片
q1003675852的博客
10-09 149
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 211
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1340
vue-live2d看板娘集成方案设计使用教程
Vue vben admin开源库中table组件tips
weixin_47454566的博客
10-09 300
Vue vben admin开源库
初识Vue
最新发布
m0_74742670的博客
10-09 246
Vue (发音为 /vju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。
Vue基础要点：生命周期与组件通信详解
本章节详细介绍了Vue框架中的基础知识点，对初学者和需要巩固基础的开发者具有重要意义。主要内容涵盖以下几个方面： 1. 生命周期钩子函数： - `beforeCreate`：在这个阶段，props和data中的数据还未初始化，只能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值