学习Vue源码（三）手写Vue.directive、Vue.filter、Vue.component方法
1.Vue.directiveVue.directive(id,[definition]);1）参数`{string}id{函数|Object}[definition]`(2)注册或获取全局指令的用法。`Vue.directive('my-directive',{bind:function(){},inserted:function(){},update:function(){},componentUpdated:function(){},unbind:function(){},})Vue.directive('my-directive',function(){})varmyDirective=Vue.directive('my-directive');`(3)除了核心功能（v-model和v-show）的默认内置指令外，Vue.js还允许注册自定义指令。虽然代码重用和抽象的主要形式是组件，但在某些情况下，仍然需要对普通DOM元素进行低级操作，这时就会用到自定义指令。(4)Vue.directive方法的作用是注册或者获取全局指令，并不是让指令生效。不同的是，注册一条指令需要做的是将指令保存在某个位置，而要使指令生效是从某个位置取出指令执行。(5)实现`Vue.options=Object.create(null);Vue.options['指令']=Object.create(null);Vue.directive=function(id,definition){if(!definition){returnthis.options'directive';}else{if(typeofdefinition==='function'){definition={bind:definition,update:definition};}这。optins'指令'=定义；返回定义；}}`1。在Vue的构造函数上创建了options属性来存储选项，并在options中添加了一个新的指令方法用于存在性说明。2、Vue.directive方法接受id和definition两个参数，可以注册或者获取指令，取决于definition参数是否存在。3.如果定义参数不存在，则使用id从this.options['directive']中读取指令并返回。4.如果定义参数存在，说明是注册操作，再判断定义参数的类型是否为函数。5.如果是函数，默认会监听bind和update事件，所以在代码中，将定义函数赋值给对象中的bind和update方法，用这个对象覆盖定义。6、如果definition不是函数，则说明是用户自定义的指令对象。此时不需要任何操作，直接将用户提供的指令对象保存在this.optipns['directive']中即可。2.Vue.filterVue.filter(id,[定义]);(1)参数`{string}id{函数|Object}[definition]`(2)使用注册或获取全局过滤器`})varmyFilter=Vue.filter('my-filter');`(3)Vue.js允许自定义过滤器，可用于一些常见的文本格式。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应添加到Javascript表达式的末尾，由“管道”符号表示`{{message|capitalize}}
`（4）Vue.filter的作用只是注册或者获取全局的筛选。(5)实现`Vue.options['filters']=Object.create(null);Vue.filter=function(id,definition){if(!definition){returnthis.options'filters';}else{这个.optipns'过滤器'=定义；返回定义；}}`1。在Vue.options中添加filters属性来存储过滤器，在Vue.js中添加filter方法，它接受两个参数id和definition。2、Vue.filters方法可以注册或者获取过滤器，取决于定义参数是否存在。3.如果定义不存在，则使用id从this.options['filters']中读取filter并返回。4.如果定义存在，说明是注册操作，直接将参数保存到this.optipns['filters']。3.Vue.componentVue.component(id,[定义]);1）参数`{string}id{函数|Object}[definition]`(2)用于注册或获取全局组件。注册组件时，组件的名称也会自动设置为给定的id。`Vue.component('my-component',Vue.extend({/.../}));Vue.component('my-component',{/.../});varMyComponent=Vue.component('my-component');`Vue.extend之前我们已经讲过了。不明白的可以看这篇文章：学习vue源码（二）手写Vue.extend方法（三）Vue.component只是注册或者获取组件（四）原理`Vue.options['components']=Object.create(null);Vue.component=function(id,definition){if(!definition){returnthis.options'components';}else{if(isPlainObject(definition)){definition.name=definition.name||ID;definition=Vue.extend(定义);}this.optips'components'=定义；返回定义；}}`1、在Vue.options中添加components属性，用于存放组件，在Vue.js中添加component方法，接收两个参数id和definition。2、Vue.component方法可以注册或者获取过滤器，取决于定义参数是否存在。3.如果定义不存在，则使用id从this.options['components']中读取组件并返回。4.如果定义存在，说明是注册操作，所以组件需要保存在this.optipns['components']中。5、由于定义参数支持两个参数，分别是option对象和构造函数，而组件其实就是一个构造函数，是使用Vue.extend生成的子类，所以需要把参数定义当做构造函数来对待。6.如果定义参数是Object类型，调用Vue.extend方法使其成为Vue的子类，使用Vue.component方法注册组件。7.如果选项对象中没有设置组件名称，则自动使用给定的id设置组件名称。四、结合Vue.directive、Vue.filter、Vue.component代码`Vue.options=Object.create(null);ASSET_TYPES.forEach(type=>{Vue.options[type+'s']=Object.create(null);})ASSET_TYPES.forEach(type=>{Vue[type]=function(id,definition){if(!definition){returnthis.optionstype+'s';}else{if(type==='component'&&isPlainObject(definition)){definition.name=definition.name||id;definition=Vue.extend(definition);}if(type==='directive'&&typeofdefinition==='function'){definition={bind:definition,update:definition};}this.optips'components'=definition;returndefinition;}}})`文章参考：深入浅出Vue
