Vue生命周期简易笔记

const app = new Vue({
			el: '#app',
			data: {
				msg: 'aaaa',
				className: 'redBG'
			},
			methods: {

			},


			// 创建之前
			// before：之前
			// create：创建
			beforeCreate() {
				//此时数据(data)和事件方法(methods)还为绑定到app对象上，可以在这里创建Ajax请求

				console.log('我是创建之前的beforeCreate')
				console.log(this)
				console.log(this.msg)
				//undefined，因为这个是在创建之前，创建之前msg还没有创建，数据还没有绑定进来
			},


			//创建完成
			created() {
				//数据和方法已经初始化完成，已经绑定到app对象上了

				console.log('我是创建created')
				console.log(this)
				console.log(this.msg)
			},


			//挂在之前创建
			beforeMount() {
				//渲染之前
				console.log('我是挂在之前创建的beforeMount')
				let dom = document.querySelector('.redBG')
				console.log(dom); //null, 渲染之前是拿不到DOM对象的

			},


			//安装/挂载之后
			mounted() {
				//渲染之后
				console.log('我是安装/挂载mounted')
				let dom = document.querySelector('.redBG')
				console.log(dom)// 渲染之后才可以拿到DOM对象

			},

			//更新前
			beforeUpdate() {
				//数据已经更改，但是内容未更改之前
				console.log('beforeUpdate')
			},

			//更新后
			updated() {
				//内容更新完毕
				console.log('updated')
			},

			//销毁之前
			beforeDestroy() {
				console.log('销毁之前：beforeDestory')
			},
			
			//销毁之后
			destroyed() {
				console.log('销毁之后：destroyed')
			},
		})