前言
本文讲解了vue.js中的四个常用选项，4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察），如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。
提示：以下是本篇文章正文内容，下面案例可供参考
一、四大选项简介
我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。
今天我们讲Vue实例常用的4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察）
二、filters（过滤器）
过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。
我们举个例子，如下 :
<body> <div class="app"> {{num1 | toInt}} <br> {{num2 | cau | join2}} <br> {{num3 | cails}} <br> {{str | join | join2}} </div> <script type="text/javascript"> let vm=new Vue({ el:'.app', data:{ num1:33.3, num2:25.3, num3:30.3, str:'hello world' }, filters:{ toInt(value){ return parseInt(value) }, cau(value){ return parseInt(value*0.1) }, cails(value){ return Math.ceil(value) }, join(value){ return "2023"+value+"必胜" }, join2(value){ return value+'ikun' } } }) </script> </body>
语法1: {{ message | filterA | filterB }}
message 是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB 函数，最终结果显示是由filterB 返回的。
语法 2: {{ message | filterA(‘arg1’, arg2) }} 传递参数
<body> <div class="app"> {{num | join("10","22")}} </div> <div id="app"> {{num,num3 | join}} </div> <script type="text/javascript"> let vm=new Vue({ el:'.app', data:{ num:2023 }, filters:{ join(value,num1,num2){ return value +'-'+ num1 +'-'+ num2 } } }) let vm2=new Vue({ el:'#app', data:{ num:2, num3:3 }, filters:{ join(value,value2){ return value +value2 } } }) </script> </body>
三、computed（计算属性）
有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有四个数，但是需要展示的是这四个数字的和。这种情况，就适合用计算属性computed。computed 的定义语法和过滤器 filters类似，但是用法不一。
演示如下:
<body> <div class="app"> {{sum}} </div> <script type="text/javascript"> let vm=new Vue({ el:'.app', data:{ num1:1, num2:2, num3:3, num4:4 }, computed:{ sum(){//不能用箭头函数 return this.num1+this.num2+this.num3+this.num4 } } }) </script> </body>
四、methods（方法）
顾名思义，在methods中，我们可以定义一些方法，供组件使用。
methods 将被混入到 Vue 实例中。可以直接通过 app 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 add: ()=>this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
演示如下：
<body> <div id="app"> {{msg}} <button type="button" v-on:click='add()'>加1</button> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ msg:0 }, methods:{ add(){ return this.msg++ } } }) </script> </body>
五、watch（观察）
watch 选项是 Vue 提供的用于检测指定的数据发生改变的api。
上面点击按钮msg的值加1的例子，不就是数据发生变化了吗?我们就用watch 选项来监听数字msg是否发生了变化，如果监听到了变化，我们就在控制台输入msg的最新值。
演示如下：
<body> <div id="app"> {{msg}} <button type="button" v-on:click='add()'>加1</button> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ msg:0 }, methods:{ add(){ return this.msg++ } }, watch:{//监测 msg(val){ console.log("值发生了变化"+val) } } }) </script> </body>
当需要数据在异步变化或者开销较大时，执行更新，使用 watch 会更好一些；而 computed 不能进行异步操作；
总结:
区别在于:
调用方法不同:computed 调用时不需要加()，而 methods 方法调用时需要加括号(),起名字
驻留内存的方式不同Computed 具有缓存功能,相关的属性会一直驻留内存，可以多次进入页面调用而不需要重新加载Methods 需要每次进入[刷新]页面都需要重新加载数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。
watch 的依赖则是单个的，它每次只可以对一个变量[mustache]进行监控，一般用在控制台对
变量进行监控
