Vue自定义指令和生命周期

自定义指令

1.自定义全局指令

在 Vue 中，可以自定义v-if v-focus等指令的行为，当然你也可以自己取指令的名字。

定义方式：在 js 中使用 Vue.derective 定义

Vue.directive('focus', {})

上述代码可以看出，directive 也是vue的内置方法，有两个参数，

• 第一个参数为指令名称（注意：这里的指令不需要带上 v- 的前缀）。
• 第二个参数为一个对象，里面有内置的钩子函数，可以在函数中定义指令的自定义行为。

Vue.directive('focus', {
	bind: function(el){}, //每当指令绑定到元素上，立即执行 bind 函数。注意：绑定时 DOM 树还未被构建。
	inserted: function(el){}, //inserted 表示元素插入到 DOM 中的时候（已经插入），执行 inserted 函数
	updated: function(el){} //当VNode更新时，会执行 updated
})

上述代码，在directive中输入了需要自定义的指令，使用了几个钩子函数，可以在其中规定自定义行为
在每一个钩子函数中，还可以传入参数，传入的第一个参数指向当前操作的 DOM 节点

还可以传入其他参数，如下
注意：binding 参数为一个对象

2.自定义私有指令

私有的自定义指令在vue实例对象中定义

//html
<p v-code> </p> //在 p 标签中使用自定的 v-code 指令

//js
let vm = Vue({
	//...
	directives:{ //实例内部的 directives 规定自定义指令
		'code': {
			bind: function(el,binding){},
			inserted: function(el,binding){},
			updated: function(el,binding){},
			// 这些指令同样可以使用 el , binding 等参数来获得你所需要的数据
		}
	}
	//...
})

生命周期

在进行小程序开发时，对于生命周期也有了解，在Vue中的生命周期也大同小异。

生命周期就是指从Vue实例被创建，运行再到销毁期间的事件，统称为生命周期
生命周期函数 = 生命周期钩子 = 生命周期事件

先来看看从创建Vue实例开始生命周期函数的执行流程

//Vue创建阶段
	//1.声明 Vue实例，准备创建Vue实例
	beforeCreate(){} 
	//2.Vue实例创建完成，初始化完毕
	created(){}      
	//3.编译VUE，判断是否有其他 templete，若没有,则将此 Vue实例编译为模板，此时并未将模板挂载至页面
	beforeMount(){}  
	//4.此时将编译好的模板替换到页面中去
	mounted(){}    
    //mounted 的执行代表Vue实例已经被创建完毕
    
//Vue运行阶段
	//1.当数据改变时
	beforeUpdata(){} // 执行它时，此时实例中的数据已经被更新，而页面中的数据还是被修改之前的
	//2.数据改变后
	updata(){} // 执行时，页面与实例的数据已经完全同步

//Vue销毁阶段
	//销毁之前
	beforeDestroy(){} 
	//已经销毁
	destroyed(){}  

在生命周期函数中，你可以编写自己想在某个周期中进行的操作

let vm = new Vue({
	//....
	beforeCreate(){} //在 Vue实例完全被创建出来之前，就会执行它。此时 data和 methods都未被初始化

	created(){}      //VUE实例已经被创建后，紧接着执行它。此时 data和 methods刚刚初始化完毕

	beforeMount(){}  //在 VUE实例被挂载之前执行。通俗的说，就是在此 VUE模板挂载至页面之前，它就会执行

	mounted(){}      //此时 Vue已经把页面渲染完毕，执行此生命周期函数

	beforeUpdata(){} // 执行它时，此时实例中的数据已经被更新，而页面中的数据还是被修改之前的
	
	updata(){} // 执行时，页面与实例的数据已经完全同步
	
	beforeDestroy(){} //执行此函数时，Vue实例还没有被销毁，数据和方法还都是可用状态
	
	destroyed(){}  //此函数的执行，代表Vue实例被销毁完毕。
	//....
}) 

注意： 在组件中，有根据keep-alive存在的两个额外生命周期

deactivated(){},   // 当组件被缓存时触发
activated(){}	   // 当组件被激活时触发
// 当组件是 keep-alive 状态时，created 和 deactivated 只会触发一次, 除非父组件或者根组件被销毁