vue的四个常用选项 filter、computed、methods、watch

vue的基本语法

                <script src="vue.js"></script>
                <div id="app">

		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {

				}
			})
		</script>

vue的四个常用选项

filter 过滤器

过滤器实际上就是对web资源进行拦截，做一些处理后再交给下一个过滤器或servlet处理 通常都是用来拦截request进行处理的，也可以对返回的response进行拦截处理

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

在这个例子中，`filterA` 被定义为接收单个参数的过滤器函数，表达式 `message` 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 `filterB`，将 `filterA` 的结果传递到 `filterB` 中。

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

语法 2: {{ message | filterA('arg1', arg2) }}

这里，`filterA` 被定义为接收三个参数的过滤器函数。其中 `message` 的值作为第一个参数，普通字符串 `'arg1'` 作为第二个参数，表达式 `arg2` 的值作为第三个参数。

语法 3 {{a,b,|filter}}

{{a,b,|filter}}

filters:{ filter:function(value1,value2){

return value1 + value2

}
},

computed 计算【计算属性】

计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解，计算属性是基于它们的响应式依赖进行缓存的

应用求和

		<div id="app">
			总和:{{sum}}
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				//挂载元素
				el: '#app',
				//实例vm的数据
				data: {
					num1: 1,
					num2: 3,
					num3: 6

				},
				//计算属性  
				computed: {
					//sum:function(){
					//sum=()=>{// 在computed属性中不能用箭头函数
					sum() {
						return this.num1 + this.num2 + this.num3
					}
				}
			})
		</script>

methods 方法

基本用法

                               let vm = new Vue({
				methods:{
                                    方法名:{
                                    
                                    }
				}
			})

应用累加

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

watch 观察【控制台】

	let vm=new Vue({
				el:'#app',
				data:{
					
				},
				
				//观察（监听）值的变化，将结果显示在控制台
				watch:{
					a(){
						console.log('值发生变化，最新值:'+this.a)
						
					}
				}
			})

computed、methods、watch的区别

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

computed 属性与 methods 的区别在模板文件中，computed 属性只需要写{{reverseMessage}}，而 methods 需要写成{{reverseMessage()}}，最明显的区别就是 methods 是方法，需要执行；computed 属性只有在依赖的 data 放生变化时，才会重新执行，否则会使用缓存中的值，而methods 是每次进入页面都要执行的，有些需要每次进入页面都执行的方法，需要使用methods，而 computed 属性比较节约

总结

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

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

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