vue生命周期常用函数

最新推荐文章于 2023-08-09 10:07:46 发布

闲人不梦卿

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量804

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/107439598

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

vue 生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子

1.created

实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用

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

    </script>
    <script>
         var b ="123";
         var app = new Vue({
             el: "#app",
             data: {a:"11"},
             created()
             {
                 alert(b);
             },
             mounted()
             {
                 
             }

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

在这里插入图片描述

2.mounted

el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始

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

    </script>
    <script>
         var b ="123";
         var app = new Vue({
             el: "#app",
             data: {a:"11"},
             created()
             {
                 alert(b);
             },
             mounted()
             {
                alert(this.$el);
             }

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

在这里插入图片描述

3.beforeDestroy

实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
下面的示例代码，跳转页面和刷新页面都没有监听到beforeDestory,带解决。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

         <a href="vue实例.html">点我到第二个页面</a>

         <p>{{date}}</p>
    </div>
    <script src="vue.js">

    </script>
    <script>
         var b ="123";
         var app = new Vue({
             el: "#app",
             data: {date:new Date()},
             created()
             {
                // alert(b);
             },
             mounted()
             {
                 var _this = this;
                 this.timer = setInterval(function(){_this.date = new Date()},1000);
               
             },
             beforeDestory()
             {
                debugger
                console.log("执行 beforeDestory");
                 if (this.timer)
                 {
                     debugger
                     console.log("执行 beforeDestory 2");
                     clearInterval(this.timer);   
                 }
             }

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

在这里插入图片描述

闲人不梦卿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue生命周期常用函数

vue 生命周期每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子1.created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid
复制链接

扫一扫