一、简介
通常，我们会将部分功能较为完整代码封装整合到一起，它们一般一整块地执行，可以接受适当的参数，并可以有一定的返回值，它就是函数。
vue 中，很多地方都涉及了函数，包括钩子函数（created/mounted/updated...）、指令（directive）、过滤器（filter）、方法（method），甚至框架暴露出来的 Vue 对象本身，也是一个函数。本文重点关注指令、过滤器和方法，这三者，因为相对来说，有些情况下，它们功能相近，有的时候可以完成彼此所需要完成的功能，以至于在开发的时候到底选用哪一个，可能会让人觉得无所适从。
二、基本用法
（一）filter
这几个中，可能 filter 的内容最少，也最容易使用。在使用之前，我们先进行相应的注册：
Vue.filter('dollar', function (val) {
return '$' + val;
});
Vue.filter 接收两个参数，第一个作为起名字兼 id，第二个则基于函数作为其处理程序。然后是在模板中使用它：
<div id="app">
<div>{{23 | dollar}}</div>
</div>
只需要在需要使用它的地方加一个 “|” ，后面在跟上这个 filter 的名字即可，调用的时候， “|” 前面的值将自动作为参数传入到这个 filter 的处理函数中，而函数的返回值将替换掉原来的值，渲染在模板中。如果需要更多的参数，模板中的处理函数也可以写成完整的函数执行的形式，并将参数传入其中，“|” 前面的值最终将作为第一个参数，传入的其它参数将在后面依次排列。
<div id="app">
<div class="fruit">{{'apple' | join('watermelon', 'orange', 'cherry')}}</div>
</div>
...
var vm = new Vue({
el: '#app',
filters: {
join: function () {
return Array.prototype.join.call(arguments, ', ');
}
}
});
渲染结果：
<div id="app">
<div class="fruit">apple, watermelon, orange, cherry</div>
</div>
（二）method
vue 实例会自动代理 data/computed/methods 等属性下的内容，其中 data/computed 一般用于存放应用相关的数据，而 methods 则用于存放应用处理某些逻辑相关的代码，本身就体现出一种程序和数据分离的思路。最常见的情况下，我们会将 methods 用于响应浏览器的事件，如下：
<div id="app">
<button v-on:click="say">alert</button>
</div>
...
var vm = new Vue({
el: '#app',
methods: {
say: function () {
alert('hello world');
}
}
});
当点击了页面上的 button 的时候，会弹出提示“hello world”，这里是最常见的用法。
但是事实上，我们可以在任何需要的地方使用它：
<div id="app">
<div class="fruit">{{join('apple', 'watermelon', 'orange', 'cherry')}}</div>
</div>
...
var vm = new Vue({
el: '#app',
methods: {
join: function () {
return Array.prototype.join.call(arguments, ', ');
}
}
});
（三）指令
指令，相对于前两者来说复杂得多，像前面绑定事件的 v-on 实际上就是指令中的一种应用。vue 本身提供了如 v-bind 、 v-on 、v-cloak 等一系列指令，在此基础上，也向开发者提供了自定义指令的开发接口。一条完整的指令如下所示：
v-name:arg.modifiers="value"
其中：
- name：指令名，不包含前面的
v-部分内容； - arg：指令传递的参数，如
v-on:click中的click，用于绑定事件类型； - modifiers：修饰符，如
v-on:click.prevent中的prevent，用于阻止默认事件； - value：指令的绑定值。
除此之外，自定义指令还有自己的生命周期，拥有：bind、inserted等一系列钩子函数。
相对于前两者，指令显然复杂得多，但相应的功能也强大得多，因为其涉及的内容比较多，具体请参考 官网文档。
三、对比
（一）入参
- filter：“|” 前面的部分以及作为函数调用的时候传入的实参；
- method：传入的实参，当作为时间处理函数时，会被传入 event 对象；
- directive：可接受指令名、指令名后面的参数、指令修饰符、指令绑定值等多种“参数”，同时在钩子函数中也能获取到绑定该指令的 DOM 节点等信息。
从这一点上来看， 除了method会被传入特殊的event对象，其它的内容，这三者其实是可以相互模拟的。
（二）出参
- filter：用于替换掉“|”前面的内容；
- method：作为返回值，填充在它被执行的地方；
- directive：不要求。
（三）实际作用
结合出参、入参，我们分析一下它们的作用：
- filter：内容格式化，将输入的数据，按照某种规则进行输出，从这一层讲，感觉叫 formatter 可能更合适；
- method：数据、交互等的逻辑处理，相对 formatter 的功能更纯粹，一般结合“数据驱动”的理念，尽量不直接操作 DOM；
- directive：DOM 处理中心，拥有相对完整的生命周期，用于控制数据的流转，一般的 DOM 处理等内容都集中到此处。
但实际上，很多内容都是相互交叉的，比如用于处理用户交互的 method 需要通过 v-on 指令来绑定，它本身就是基于 directive 实现的，所以这里它们的作用都只是相对。
网友评论