初识Vue生命周期函数

最新推荐文章于 2022-07-04 10:38:06 发布

原创最新推荐文章于 2022-07-04 10:38:06 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

博主开始折腾Vue，结合之前折腾React的经历，此次只谈Vue的生命周期函数。介绍了Vue官方文档给出的生命周期示意图，重点解析了beforeCreate和created两个生命周期函数，包括其调用时机及初始化完成的内容。

最近开始瞎折腾Vue，感觉良好，因为之前折腾过React，先不说这两者的关系，现在只谈谈Vue的生命周期函数。在Vue的官方文档上给出了Vue生命周期的示意图，官网生命周期函数示意图

beforeCreate

该生命周期函数在初始化Events和Lifecycle后调用，该函数调用时el和data还未初始化，由以下代码可以推断出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期函数</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{demo1}}</div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                demo1: 'demo1',
                demo2: 'demo2'
            },
            beforeCreate: function () {
                console.log('beforeCreate='+this.demo1+ '==' +this.$el);
                // beforeCreate=undefined==undefined el和data未被初始化
            }
        });
    </script>
</body>
</html>

以下内容只给出JavaScript代码

根据Vue源码，在beforeCreate调用时完成了下列内容的初始化：initLifecycle(vm); initEvents(vm); initRender(vm);

created

该生命周期函数在初始化injections和reactivity后调用

let vm = new Vue({
    el: '#app',
    data: {
        demo1: 'demo1',
        demo2: 'demo2'
    },
    beforeCreate: function () {
        console.log('beforeCreate='+this.demo1+ '==' +this.$el);
    },
    created: function () {
        console.log('created='+this.demo1+ '==' +this.$el);
        // created=demo1==undefined data已经初始化， el未初始化
    },
});