vue常用的四个选项

一、filter 过滤器

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

语法 1: {{ message | filterA | filterB }}
message 是作为参数传给 filterA 函数，而 filterA 函数的返回值作为参数传给 filterB 函数，最终结
果显示是由 filterB 返回的。

<div id="app">
	{{num | filterA | filterB}}
</div>
<script type="text/javascript">
	let vm = new Vue({
		el:"#app",
		data:{
			num:2021
		},
		filters:{
			filterA(value){
				return value+"年"
			},
			filterB(value){
				return value+"good luck!"
			}
		}
	})
</script>

语法 2: {{ message | filterA(‘arg1’, arg2) }}
filterA自身也可以传入参数

<div id="app">
	{{num1 | join("10","22")}}
</div>
<script type="text/javascript">
	let vm = new Vue({
		el:"#app",
		data:{
			num1:2021
		},
		filters:{
			join(value,arg1,arg2){
				return `${value}-${arg1}-${arg2}`
			}
		}
	})
</script>

语法 3 {{a,b,|filter}}
将a,b作为两个形参传递给filter

<div id="app">
	{{a,b | filter}}
</div>
<script type="text/javascript">
	let vm = new Vue({
		el:"#app",
		data:{
			a:100,
			b:68
		},
		filters:{
			filter(value1,value2){
				return value1 + value2
			}
		}
	})
</script>

二、computed 计算 [属性]

从内存中取出值进行计算

求数组中各项总和

<div id="app">
	总和:{{sum}}
</div>
<script>
	let vm = new Vue({
		el:"#app",
		data:{
			arr:[1,2,3,4,5,6,7,8,9,10]
		},
		computed:{ //不能用箭头函数
			sum(){
				let res = this.arr.reduce(function(prev,curr){
					return prev+curr;
				})
				return res
				
			}
		}
	})
</script>

注：computed里面不能用箭头函数

三、methods[方法]

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

当点击按钮时，触发add()函数

<div id="app">
	{{a}}
	<button @click="add">加1</button>
</div>
<script>
	let vm = new Vue({
		el:"#app",
		data:{
			a:0
		},
		methods:{
			add(){
				return this.a++
			}
		}
	})
</script>

methods 内外数据交互访问

vue实例可以访问全局，全局也可以访问vue实例

<!-- 内部 -->
<div id="app">
	<p>{{a}}</p>
	<p>
		<button onclick="adds()">内部访问构造器外部的方法</button><br>	//内部访问外部用js绑定即可
		<button @click="add">VUE自己访问add方法</button>
	</p>
</div>
<!-- 外部 -->
<button onclick="app.add()">外部访问构造器内部的方法</button>		//外部访问内部 需要在前面加上vue实例 app

<script type="text/javascript">
	//外部
	function adds(){
		app.a++
	}
	//内部
	var app = new Vue({
		el:"#app",
		data:{
			a:1
		},
		methods:{
			add(){
				this.a++
			}
		}
	})
</script>

computed 属性与 methods 的区别

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

四、watch

对一个变量[mustache]进行监控，一般用在控制台对
变量进行监控

<div id="app">
	{{a}}
	<button v-on:click="add()">加1</button>
</div>
<script type="text/javascript">
	let vm = new Vue({
		el:"#app",
		data:{
			a:0
		},
		methods:{
			add(){
				return this.a++;
			}
		},
		//观察（监听）值的变化，将结果显示在控制台
		watch:{
			a(){		//这里的方法名字必须与要监控的变量名保持一致
				console.log("值发生变化了，最新值");
				console.log(this.a)
			}
		}
	})
</script>

computed 属性与 watch 的区别

当需要数据在异步变化或者开销较大时，执行更新，使用 watch 会更好一些；而 computed 不能
进行异步操作；
computed 可以用缓存中拿数据，而 watch 是每次都要运行函数计算，不管变量的值是否发生变
化，而 computed 在值没有发生变化时，可以直接读取上次的值