vue对象的生命周期钩子函数

最新推荐文章于 2023-10-25 15:49:14 发布

骑猪去兜风z1

最新推荐文章于 2023-10-25 15:49:14 发布

阅读量3.4k

点赞数

分类专栏： vue大全(更订中) 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52385631/article/details/122821894

版权

vue大全(更订中) 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

0. 生命周期介绍：

每个Vue对象在创建时都要经过一系列的初始化过程。

在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

1. 声明周期的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        //$(function(){})()  $.ready() -- window.onload = function(){}
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            beforeCreate:function(){
                console.log("beforeCreate,vm对象尚未创建,num="+ this.num);  //undefined，就是说data属性中的值还没有放到vm对象中
                this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0
              	console.log(this.$el) //undefined
            },
            created:function(){
              	// 用的居多，一般在这里使用ajax去后端获取数据，然后交给data属性
                console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num );  // 0 也就是说data属性中的值已经放到vm对象中
                this.num = 20;
                console.log(this.$el) //undefined
            },
            beforeMount:function(){
                console.log( this.$el.innerHTML ); // <p>{{num}}</p> ,vm对象已经帮我们获取到了这个视图的id对象了
                console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20,也就是说vm对象还没有将数据添加到我们的视图中的时候
                this.num = 30;
            },
            mounted:function(){
              	// 用的居多，一般在这里使用ajax去后端获取数据然后通过js代码对页面中原来的内容进行更改 
                console.log( this.$el.innerHTML ); // <p>30</p>
                console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30,也就是说vm对象已经将数据添加到我们的视图中的时候
            },
            
          	// 后面两个简单作为了解吧，测试的时候最好单独测试下面两个方法
            beforeUpdate:function(){
                // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
                console.log( this.$el.innerHTML );  // <p>30</p>
                console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31
                
            },
            updated:function(){
                console.log( this.$el.innerHTML ); // <p>31</p>
                console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31
            },
        });
    }
    </script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <button @click="num++">按钮</button>
    </div>
</body>
</html>

2. 总结：

1. 在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
2. mounted阶段就是在vm对象已经把data数据实现到页面以后。

3. 一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的axios请求。

4. 另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

骑猪去兜风z1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue对象的生命周期钩子函数

0. 生命周期介绍：每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。1. 声明周期的类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> .
复制链接

扫一扫