VUE基础(二) - Vue | Asuhe = Born in poverty, died of numbness

# Vue 的生命周期

Vue 总共有 11 个生命周期，下文只介绍 8 个生命周期

根据官网给的图可以大致将 Vue 的生命周期分为四个阶段：初始化阶段、挂载阶段、更新阶段、销毁阶段。而每个阶段又可以分为前、后两个阶段。

vue生命周期

beforeCreate () 钩子可以让我们在初始化之前进行一些操作。在这个阶段，数据还没有被代理到我们创建的实例中，所以此时我们无法获取 data 里的数据。

created () 钩子可以让我们在初始化完成时进行一些操作。在这个阶段，数据完成了代理，此时我们可以获取 data 中的数据。

	const vm = new Vue({
	el:'#app',
	data(){
	return {
	msg:'asuhe'
	}
	},
	beforeCreate(){
	console.log(msg); // 此时数据还未被代理无法获取 msg 属性的值，输出 undefined
	},
	created(){
	console.log(msg); // 数据已经被代理，输出 asuhe
	}
	})

beforeMount () 钩子可以让我们在 DOM 实际渲染到页面前进行一些操作，这时挂载点的数据已经被渲染好了，但还没有实际插入页面，我们无法获取到 DOM 节点。

mounted () 钩子可以让我们的在 DOM 实际渲染到页面后进行一些操作，** 此时 DOM 节点已经挂载，我们可以获取到 DOM 节点。** 通常这时我们会向服务器发送请求获得数据、挂载事件等等

	<div id="app">
	<p ref="pp"></p>
	</div>

	const vm = new Vue({
	el:'#app',
	data(){
	return {}
	},
	beforMount(){
	console.log(this.$refs.pp) //undefined
	},
	mounted(){
	console.log(this.$refs.pp) //<p ref="pp"></p>
	}
	})

当数据更新的时候，data 配置项里的数据是马上更新的，但页面上的数据并不是能马上更新。所以有 beforeUpdate () 和 updated () 这两个钩子供我们在页面数据更新前后进行操作。

	const vm = new Vue({
	el:'#app',
	data(){
	return {
	isOk:true
	}
	},

	beforUpdate(){
	console.log(this.$refs.pp) // 输出空
	},
	updated(){
	console.log(this.$refs.pp) //<p ref="pp"></p>
	}
	})

	<div id="app">
	<p ref="pp" v-show="isShow"><!--swig0--></p>
	<button @click="destroy">点击销毁实例</button>
	</div>
	const vm = new Vue({
	el:'#app',
	data(){
	return {
	isShow:true
	}
	},
	methods: {
	destroy(){
	this.$destroy(); // 这里触发两个销毁阶段的钩子，同步回调
	// 最后执行
	console.log('正在清理');
	}
	},
	mounted(){
	this.timer = setInterval(()=>{
	this.isShow = !this.isShow;
	},2000)
	},
	// 销毁阶段的两个钩子
	beforeDestroy() {
	// 销毁阶段进行清理工作
	clearInterval(this.timer);
	this.timer = null;
	console.log('销毁了定时器');
	},
	destroyed(){
	console.log('销毁完毕');
	}
	})
	// 点击销毁按钮后输出顺序是：销毁了定时器销毁完毕正在清理

自定义指令分为定义全局指令和局部指令，全局自定义指令在任何一个 Vue 实例中都可以使用，而局部自定义指令只能在特定的 Vue 实例中使用

定义全局指令

参数： 1、指令名称（不包含 v- 只能是全小写） 2、回调函数

（参数 1 使用这个指令的那个节点，2 这个指令使用的表达式的值以及表达式的集合）

	Vue.directive('upper',function(node,bindings){
	// console.log(node,bindings)
	node.textContent = bindings.value.toUpperCase();
	})

	Vue.filter('timeFormat',function(value,format='YYYY-MM-DD hh:mm:ss'){
	return moment(value).format(format)
	})
	const vm = new Vue({
	el:'#app',
	data(){
	return {
	timeNow: Date.now()
	}
	}
	})