【vue】生命周期函数

• beforeCreate
• created
  Vue实例已经创建完成，但尚未挂载，vm.$el不可访问
• beforeMount
• render
• mounted
  Vue实例已挂载，可访问vm.$el
• beforeUpdate
• updated
• beforeDestroy
• destroyed

import Vue from "vue";
import Helloworld from "./src/helloworld.vue";

const data = {
    a:"hello",
    b:"world"
}
const vm = new Vue({
    data:data,
    beforeCreate:function(){
        console.log("enter beforeCreate");
    },
    created:function(){ 
        console.log("enter created",", get $el:",this.$el);
    },
    beforeMount:function(){
        console.log("enter beforeMount")
    },
    render:(h) => {
        console.log("enter render");
        return h(Helloworld);
    },
    mounted:function(){
        console.log("enter mounted",", get $el:",this.$el);
    }
}).$mount("#root");

生命周期函数里慎用箭头函数

import Vue from "vue";
import Helloworld from "./src/helloworld.vue";

const data = {
    a:"hello",
    b:"world"
}
const vm = new Vue({
    data:data,
    render:(h) => h(Helloworld),
    // mounted:() => {
    //     console.log(this); //返回undefined
    // }
    mounted:function(){
        console.log(this);//返回Vue实例
    }
}).$mount("#root");