Vue2——Vue的生命周期

_洋

已于 2024-02-29 19:37:53 修改

阅读量139

点赞数

分类专栏： vue2+vue3 文章标签： vue.js javascript 前端

于 2022-07-19 10:01:26 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/125861853

版权

vue2+vue3 专栏收录该内容

50 篇文章 7 订阅

订阅专栏

文章目录

生命周期的引入
补充：template配置
生命周期的流程

生命周期的引入

需求实现：文字的透明度从1逐渐变成0的效果：

普通实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 :style="{opacity:opacity}">欢迎，yang</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
            opacity:1,
        },
        methods: {
        },

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

问题：逻辑代码写在vue实例外面，不推荐这样写。
尝试将定时器写在methods中，并在页面中调用，这样写会造成函数的无限调用，不能实现。

使用mounted实现

Vue完成模板的解析并把初始的真实DOM元素放入页面后（即挂载完毕后）调用mounted，
所以mounted只会调用一次，且是在程序开始运行的时候，所以我们把定时器放在mounted中即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 :style="{opacity:opacity}">欢迎，yang</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
            opacity:1,
        },
        methods: {
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入页面后（即挂载完毕后）调用mounted
        mounted(){
            setInterval(()=>{
                vm.opacity -=0.01
                if(vm.opacity<=0)vm.opacity = 1
            },16) 
        }

      });

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

vue的生命周期定义

实际上 vue中不止有mounted函数，他前面有很多vue提供的函数，后面也有很多vue提供的函数。这些函数做成了vue的生命周期
在这里插入图片描述
vue的生命周期又名:生命周期回调函数、生命周期函数、生命周期钩子。
vue的生命周期就是Vue在关键时刻帮我们调用的一些特殊名称的函数。

特点：

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

补充：template配置

使用template配置，可以将模板代码直接写在template中。
eg：
在这里插入图片描述
template配置的内容最外层一定要有一个根元素，即需要用<div></div>包一下

生命周期的流程

流程示意图

生命周期的流程有11个钩子，下面是8个常用的钩子流程：（红色框里的是钩子）
在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>


    <div id="root">
      <h2>当前值是{{n}}</h2>
      <button @click="addn">点我n+1</button>
      <button @click="bye">点我销毁vm</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        // template:`<div>
        //     <h2>当前值是{{n}}</h2>
        //     <button @click="addn">点我n+1</button>
        //   </div>`,
        data: {
            n:1
        },
        methods: {
            addn(){
                this.n++;
            },
            bye(){
              console.log("bye")
              this.$destroy()
            }
        },
        // 此时:无法通过vm访问到data中的数据、methods中的方法。
        beforeCreate() {
            console.log("beforeCreate")
            console.log(this)
        },
        // 此时:可以通过vm访问到data中的数据、methods中配置的方法。
        created(){
            console.log("create")
            console.log(this)
            // debugger;//断点
        },
        // 1.页面呈现的是未经Vue编译的DOM结构。⒉所有对DOM的操作，最终都不奏效。
        beforeMount() {
            console.log("beforeMount")
            console.log(this)
        },

        // Vue完成模板的解析并把初始的真实DOM元素放入页面后（即挂载完毕后）调用mounted
        mounted(){
           console.log("mounted")
            console.log(this)
            // debugger;//断点
        },

        // 此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
        beforeUpdate() {
          console.log("beforeUpdate")
            console.log(this)
            // debugger;//断点
        },
        // 此时:数据是新的，页面也是新的，即:页面和数据保持同步。
        updated() {
          console.log("updated")
            console.log(this)
            // debugger;//断点
        },
        beforeDestroy() {
          console.log("beforeDestroy")
            console.log(this)
        },
        destroyed() {
          console.log("destroyed")
        },

      });


    </script>
  </body>
</html>

控制台
在这里插入图片描述

销毁函数：destroyed

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

调用：vm.$destroy()

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效,但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

生命周期流程分析

vm的生命周期∶

将要创建===>调用beforeCreate函数。
创建完毕===>调用created函数。
将要挂载===>调用beforeMount函数。
(重要)挂载完毕===>调用mounted函数。【重要的钩子】
将要更新===>调用beforeUpdate函数。
更新完毕===>调用updated函数数。
(重要)将要销毁===>调用beforeDestroy函数数。【重要的钩子】
销毁完毕===>调用destroyed函数。

常用的生命周期钩子:

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

生命周期流程例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 :style="{opacity:opacity}">欢迎，yang</h2>
      <button @click="opacity=1">透明度设置为1</button>
      <button @click="stop">点我停止变化</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
            opacity:1,
        },
        methods: {
          stop(){
            this.$destroy()
          }
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入页面后（即挂载完毕后）调用mounted
        mounted(){
            this.timer = setInterval(()=>{
                vm.opacity -=0.01
                if(vm.opacity<=0)vm.opacity = 1
            },16) 
        },
        beforeDestroy() {
          clearInterval(this.timer)
        },

      });
    </script>
  </body>
</html>

在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2——Vue的生命周期

实际上vue中不止有mounted函数，他前面有很多vue提供的函数，后面也有很多vue提供的函数。这些函数做成了vue的生命周期vue的生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。vue的生命周期就是Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象。......
复制链接

扫一扫

专栏目录