文章目录

• 前言
• 一、四大选项简介
• 二、filters（过滤器）
• 三、computed（计算属性）
• 四、methods（方法）
• 五、watch（观察）
• 总结:

前言

本文讲解了vue.js中的四个常用选项，4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察），如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。

提示：以下是本篇文章正文内容，下面案例可供参考

一、四大选项简介

我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。

今天我们讲Vue实例常用的4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察）

二、filters（过滤器）

过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。

我们举个例子，如下 :

{{num1 | toInt}} 
{{num2 | cau | join2}} 
{{num3 | cails}} 
{{str | join | join2}}

语法1: {{ message | filterA | filterB }}

message 是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB 函数，最终结果显示是由filterB 返回的。

语法 2: {{ message | filterA(‘arg1’, arg2) }} 传递参数

{{num | join("10","22")}}
{{num,num3 | join}}

三、computed（计算属性）

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有四个数，但是需要展示的是这四个数字的和。这种情况，就适合用计算属性computed。computed 的定义语法和过滤器 filters类似，但是用法不一。

演示如下:

{{sum}}

四、methods（方法）

顾名思义，在methods中，我们可以定义一些方法，供组件使用。

methods 将被混入到 Vue 实例中。可以直接通过 app 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 add: ()=>this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

演示如下：

{{msg}}加1

五、watch（观察）

watch 选项是 Vue 提供的用于检测指定的数据发生改变的api。
上面点击按钮msg的值加1的例子，不就是数据发生变化了吗?我们就用watch 选项来监听数字msg是否发生了变化，如果监听到了变化，我们就在控制台输入msg的最新值。

演示如下：

{{msg}}加1

当需要数据在异步变化或者开销较大时，执行更新，使用 watch 会更好一些；而 computed 不能进行异步操作；

总结:

区别在于:

• 调用方法不同:computed 调用时不需要加()，而 methods 方法调用时需要加括号(),起名字

• 驻留内存的方式不同Computed 具有缓存功能,相关的属性会一直驻留内存，可以多次进入页面调用而不需要重新加载Methods 需要每次进入[刷新]页面都需要重新加载数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

• watch 的依赖则是单个的，它每次只可以对一个变量[mustache]进行监控，一般用在控制台对
  变量进行监控