Vue的四个常用选项

柒小莫

已于 2023-02-04 18:31:01 修改

阅读量1.7k

点赞数 25

文章标签： vue.js javascript 前端

于 2022-12-14 07:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_71170351/article/details/128300405

版权

文章目录

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

前言

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

柒小莫

关注

25
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
45
评论
Vue的四个常用选项

本文讲解了vue.js中的四个常用选项，4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察），如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。提示：以下是本篇文章正文内容，下面案例可供参考我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。
复制链接

扫一扫