vue钩子函数

时间：2020-06-26 23:19:00 阅读：88 评论：0 收藏：0 [点我收藏+]

官方截图，及参数：

技术分享图片

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
 
<div id="app">
     <p>{{ message }}</p>
</div>
 
<script type="text/javascript">
     
 
  var app = new Vue({
      el: ‘#app‘,
      data: {
          message : "xuxiao is boy"
      },
       beforeCreate: function () {
                console.group(‘beforeCreate 创建前状态===============》‘);
               console.log( "el     : " + this.$el); //undefined
               console.log("data   : " + this.$data); //undefined
               console.log("message: " + this.message)
        },
        created: function () {
            console.group(‘created 创建完毕状态===============》‘);
            console.log("el     : " + this.$el); //undefined
               console.log("data   : " + this.$data); //已被初始化
               console.log("message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group(‘beforeMount 挂载前状态===============》‘);
            console.log("el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("data   : " + this.$data); //已被初始化
               console.log("message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group(‘mounted 挂载结束状态===============》‘);
            console.log("el     : " + this.$el); //已被初始化
            console.log(this.$el);   
               console.log("data   : " + this.$data); //已被初始化
               console.log("message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group(‘beforeUpdate 更新前状态===============》‘);
            console.log("el     : " + this.$el);
            console.log(this.$el);  
               console.log("data   : " + this.$data);
               console.log("message: " + this.message);
        },
        updated: function () {
            console.group(‘updated 更新完成状态===============》‘);
            console.log("el     : " + this.$el);
            console.log(this.$el);
               console.log("data   : " + this.$data);
               console.log("message: " + this.message);
        },
        beforeDestroy: function () {
            console.group(‘beforeDestroy 销毁前状态===============》‘);
            console.log("el     : " + this.$el);
            console.log(this.$el);   
               console.log("data   : " + this.$data);
               console.log("message: " + this.message);
        },
        destroyed: function () {
            console.group(‘destroyed 销毁完成状态===============》‘);
            console.log("el     : " + this.$el);
            console.log(this.$el);
               console.log("data   : " + this.$data);
               console.log("message: " + this.message)
        }
    })
</script>
</body>
</html>

附带测试地址：http://jsrun.net/6YXKp/edit

根据控制台打印了解各个钩子函数调用顺序以及使用方法：

vue钩子函数

原文：https://www.cnblogs.com/971125zhang/p/13196579.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)