Vue

new Vue({

el:'#id',

data(){　　　　　　//数据对象

return {
        demo: {
          name: ''
        }，
　　　　　user:'',

      };

}，

mounted: function () {     //页面加载完成后执行的方法

},

methods: {　　　　//盒子中所有方法

}，

created() {　　　　//实例被创建时候执行

}，

computed: {

newName() {
        return this.demo.name;
      }

},

watch: {　　　　//监听数据前后变化
　　firstName: function (val, oldVal) { //如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成
　　
　　}　　　　　　　　　　　　//或者在键路径加上引号
‘demo.name’:function (val, oldVal) {

}

　　user: function (val, oldVal) { 　　//数据前后变化

　　}

},

})

　　　　　　beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》'); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
        },

        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
        }

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载