vue组件的生命周期钩子

　　一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue组件的生命周期钩子</title>
</head>
<body>
    <div id="app">
        <h1>一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法</h1>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div>
            <h2 @click="btnClick">{{ msg }}</h2>
        </div>
        `,
        data () {
            return {
                msg: '局部组件',
                x: 'x',
                y: 'y'
            }
        },
        methods: {
            btnClick () {
                console.log(this.msg)
            },
            zzz() {}
        },
        beforeCreate () {
            console.log('组件开始创建，数据和事件都未创建');
            console.log(this.msg);
            console.log(this.btnClick);
            console.log(this.$data);                                    
        },
       
        created () {
            console.log('组件已经创建完毕，数据与事件都准备就绪');    　　　　　　    <!--虚拟DOM准备完毕，真实DOM还没渲染，通常用在原始数据在加载前改成动态数据-->
            console.log(this.msg);
            console.log(this.btnClick);
            console.log(this.$data);                                          <!--访问整个data数据-->
            console.log(this.$options.methods);
            console.log(this.$options.pppp);
        },
    };                    


        mounted    (){                                                        <!--通过挂载点，真实DOM已把虚拟DOM替换完毕-->
            console.log();
            console.log(this.msg);
        }
    
    
    
    new Vue({
        el: '#app',
        components: {
            localTag,
        }
    })
</script>
</html>
day-79vue

vue组件的生命周期钩子

猜你喜欢
