methods vue过滤器 和_vue.js - 指令（directive）、过滤器（filter）和方法（method）

一、简介

通常，我们会将部分功能较为完整代码封装整合到一起，它们一般一整块地执行，可以接受适当的参数，并可以有一定的返回值，它就是函数。

vue 中，很多地方都涉及了函数，包括钩子函数(created/mounted/updated...)、指令(directive)、过滤器(filter)、方法(method)，甚至框架暴露出来的 Vue 对象本身，也是一个函数。本文重点关注指令、过滤器和方法，这三者，因为相对来说，有些情况下，它们功能相近，有的时候可以完成彼此所需要完成的功能，以至于在开发的时候到底选用哪一个，可能会让人觉得无所适从。

二、基本用法

(一)filter

这几个中，可能 filter 的内容最少，也最容易使用。在使用之前，我们先进行相应的注册：Vue.filter('dollar', function (val) {    return '$' + val;

});

Vue.filter 接收两个参数，第一个作为起名字兼 id，第二个则基于函数作为其处理程序。然后是在模板中使用它：

{{23 | dollar}}

 

只需要在需要使用它的地方加一个 “|” ，后面在跟上这个 filter 的名字即可，调用的时候， “|” 前面的值将自动作为参数传入到这个 filter 的处理函数中，而函数的返回值将替换掉原来的值，渲染在模板中。如果需要更多的参数，模板中的处理函数也可以写成完整的函数执行的形式，并将参数传入其中，“|” 前面的值最终将作为第一个参数，传入的其它参数将在后面依次排列。

{{'apple' | join('watermelon', 'orange', 'cherry')}}

...

var vm = new Vue({

el: '#app',

filters: {

join: function () {            return Array.prototype.join.call(arguments, ', ');

}

}

});

渲染结果：

apple, watermelon, orange, cherry

(二)method

vue 实例会自动代理 data/computed/methods 等属性下的内容，其中 data/computed 一般用于存放应用相关的数据，而 methods 则用于存放应用处理某些逻辑相关的代码，本身就体现出一种程序和数据分离的思路。最常见的情况下，我们会将 methods 用于响应浏览器的事件，如下：

alert

...var vm = new Vue({

el: '#app',

methods: {

say: function () {

alert('hello world');

}

}

});

当点击了页面上的 button 的时候，会弹出提示“hello world”，这里是最常见的用法。

但是事实上，我们可以在任何需要的地方使用它：

{{join('apple', 'watermelon', 'orange', 'cherry')}}

...

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 实现的，所以这里它们的作用都只是相对。

作者：江湖z

链接：https://www.jianshu.com/p/37aa912f9620