vue-源码-生命周期

vue

发布日期: 2021-02-08

文章字数: 285

阅读时长: 1 分

<body>
    <div id="app">

        <h1>{{name}}</h1>
    </div>
</body>

<script>

    let app = new Vue({
        el: '#app',
        data: function () {
            return {
                name: '小明'
            }
        },
        beforeCreate() {
            console.log(this);
        },
        created() {
            console.log(this);
        },
        beforeMounte() {
            console.log(this);
        },
        mounted() {
            console.log(this);
        }
    })

</script>

constructor(options) {

    //生命周期函数beforeCreate
    if (Object.prototype.toString.call(options.beforeCreate) === "[object Function]") {
        options.beforeCreate.call(this);
    }

    //生成data 
    //函数写法
    if (Object.prototype.toString.call(options.data) === "[object Function]") {
        this.$data = options.data();
        //对象写法
    } else if (Object.prototype.toString.call(options.data) === "[object String]") {
        this.$data = options.data;
    }


    //生命周期函数created
    if (Object.prototype.toString.call(options.created) === "[object Function]") {
        options.created.call(this);
    }

    //生命周期函数
    if (Object.prototype.toString.call(options.beforeMounte) === "[object Function]") {
        options.beforeMounte.call(this);
    }

    //生成el
    this.$el = document.querySelector(options.el);

    //编译渲染
    this.compile(this.$el)

    //生命周期函数
    if (Object.prototype.toString.call(options.mounted) === "[object Function]") {
        options.mounted.call(this);
    }


}