前言

本文讲解了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]进行监控，一般用在控制台对
变量进行监控