Vue对象的生命周期

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app" ref="app">
    {{ name }}
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "python",
        },
        beforeCreate() {
            //这里的代码执行时,vm对象尚未创建,所有data中的属性是无法操作的
            console.log("vm对象创建前：");
            console.log(this.name);  //此时找不到this.name
            this.name = 'java'; //此时设置this对象的属性不会生效
            console.log(this.$el);
            console.log(this.$data);
        },
        created() {
            //这里的代码执行时,vm对象已经创建完成,但是还没有把数据和视图模板进行绑定
            //这里可以用于写从后端获取数据的代码
            console.log("vm对象创建完成：");
            console.log(this.$el);
            console.log(this.$data);
        },
        beforeMount() {
            //这里的代码执行时,已经绑定了视图,但是没有更新视图中的数据
            console.log("vm对象链接模板前：");
            console.log(this.$el.innerHTML);
            console.log(this.$data);
        },
        mounted() {
            //这里的代码执行时,已经把data中的数据替换了模板中对应的内容了,等待执行最后一步渲染
            console.log("vm对象链接模板后：");
            console.log(this.$el.innerHTML);
            console.log(this.$data);
        },
        beforeUpdate() {
            //此时已经更改了模板中对于的内容,但是还没有更新到模板中,即页面还没有刷新
            console.log('页面渲染前:');
            let name = this.$refs.app.innerHTML;
            console.log('name:' + name);
        },
        updated() {
            console.log('页面渲染完成:');
            let name = this.$refs.app.innerHTML;
            console.log('name:' + name);
        },
        beforeDestory() {
            console.log("vm对象销毁前");
        },
        destoryed() {
            console.log("vm对象销毁后");
        }
    });
</script>
</html>
Vue对象的生命周期

猜你喜欢
