vue --- > vue中的几个钩子属性

1.创建前:beforeCreate

 <div id="app">{{name}}</div>
  <script>
    let app = new Vue({
        el:'#app',
        data:{
            name:31231312
        },
        beforeCreate(){
            console.log('挂在前');
            console.log(this.$data);
            console.log(this.$el);
        }
    })
 </script>
 // beforeCreate()是在Vue挂载前,执行的函数,此时:data和el属性都还没有.故是undefined

2.创建成功:created

 <div id="app">{{name}}</div>
  <script>
    let app = new Vue({
        el:'#app',
        data:{
            name:31231312
        },
        created(){
            console.log('创建成功');
            console.log(this.$data);
            console.log(this.$el);
        }
    })
 </script>
 // 此时,name数据生成,但dom并未渲染.故会有一个undefined

3.即将挂载:beforeMount

// 替换created
beforeMount(){
    console.log('即将挂载');
    console.log(this.$el);
}
// 此时dom渲染完毕,但name属性还未被渲染成3123312

4.挂载成功:mounted

// 替换beforeMount
mounted(){
    console.log("挂载成功");
    console.log(this.$el);
}
// 

参考
https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654443&idx=1&sn=0da7f6dbd34f4dc5c609137730db154d&chksm=872c4314b05bca02b30e0ea9e9430118e5022a5f18d6e3ee66469e3ad1cbc2f31fdb2c724b0a&scene=21#wechat_redirect