Vue学习系列 -- vue生命周期了解

Posted 2022-08-02 躬匠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- vue生命周期了解相关的知识，希望对你有一定的参考价值。

每个Vue实例在创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在适当的时候进行我们的业务逻辑处理。在JQueryz中，有一个很明显的前置钩子：ready()方法。

$(document).ready(function() 
     // 
)

同样，在Vue里也有各种生命周期钩子，常见的有以下三个：

created：vue实例创建完成之后会调用，此阶段时$el变量还不可用；当我们需要初始化一些数据时会比较有用
mounted：$el挂载到实例上之后调用，一般我们的第一个业务逻辑会写在这里
beforeDestroy：实例销毁之前调用，相当于前置钩子，主要进行一些资源释放、解绑操作

除了上面列出的三个钩子函数之外，还有其他的一些钩子函数，后期我们会再补充，下面上代码：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>vue生命周期学习</title>
    </head>
    <body>
        <div id="app1">
        </div>
        <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script>
            var app = new Vue(
                el : "#app1",
                data : 
                    
                ,
                created : function () 
                    //这个时候$el变量尚不可用,打印的是null
                    console.log(this.$el);
                    alert("this is created function");
                    console.log("created function  called");
                ,
                mounted : function () 
                   //这个时候$el变量可用,对应的就是#app1
                   console.log(this.$el);
                   console.log("mounted function callded");
                   alert("mounted function callded");
                ,
                beforeDestory : function() 
                   console.log("beforeDestory function callded");
                   alert("beforeDestory function callded");
                
            );
        </script>
    </body>
</html>

从上面的console log中我们可以看到上面三个钩子函数的调用顺序。

另外，对于vue实例，可以使用通过实例变量访问其属性值，例如上面的this.$el（this是指的当前vue实例）。

Vue学习系列

Vue学习系列 -- 基础知识了解

Vue学习系列 -- 常见事件/指令学习

Vue学习系列 -- 计算属性

以上是关于Vue学习系列 -- vue生命周期了解的主要内容，如果未能解决你的问题，请参考以下文章