VUE非模板下使用（坑!!!）

 html文件中引用vue.js使用ajax时要使用同步方法不然无法调用Vue实例

vue生命周期详细打印

var app = new Vue({
	el: '#app',
	beforeCreate: function () {

		console.group('beforeCreate 创建前状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(state);
	},
	created: function () {
		this.fetch();
		console.group('created 创建完毕状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(state);
	},
	beforeMount: function () {
		//this.fetch();
		console.group('beforeMount 挂载前状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
	},
	mounted: function () {
		console.group('mounted 挂载结束状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
		// this.message = 'change';
	},
	beforeUpdate: function () {
		console.group('beforeUpdate 更新前状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
		// this.message = 'change2';
	},
	updated: function () {
		console.group('updated 更新完成状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
	},
	beforeDestroy: function () {
		console.group('beforeDestroy 销毁前状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
	},
	destroyed: function () {
		console.group('destroyed 销毁完成状态===============》');
		var state = {
			'el': this.$el,
			'data': this.$data,
			'message': this.tableDate
		}
		console.log(this.$el);
		console.log(state);
	},
	data:{
			loading:false,
			name: "hello! ",
			alexa: "10000",
			columns,
			tableData:[]
	},
	/*data: {
	      name: "hello! ",
	      alexa: "10000",
		columns,
		data:[]
	},*/

	methods: {
	      details: function(value) {
	            return  this.name + "好好学习，天天向上。"+value;
	      },
		getData:function(){
			console.log(app.tableData);
		},
		fetch(){
			this.loading = true;
			$.ajax({
				url:"/recommend/getAllRecommendPersonList",
				contentType:'application/json;charset=UTF-8',
				dataType:'json',
				type:"GET",
				/*async:false,*/    //不能使用一步ajax
				success:function(data){
					console.log(app);
					app.$data.tableData = data.rows;
					if(data != null){
						app.$data.loading = false;
					}
					//app.cacheData =  data.rows.map(item => ({ ...item }))
					/*	console.log(app.tableData);
    
		}

	},


});