Vue methods方法 计算属性和监视属性

在methods中定义方法

我们可以在使用methods属性定义方法

	<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
            <!-- 注意这里不要丢掉(),methods中定义的都是方法 -->
			全名：<span>{{fullName()}}</span>
		</div>
	</body>

	<script type="text/javascript">

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
                    //fullName可以访问data中元素的值
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>

计算属性的使用

顾名思义，计算属性就是通过对属性的计算加工得来的属性，因此它的本质也是属性，接下来我们实现一下

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
            <!-- 注意这里一定不要加(),计算属性也是属性 -->
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				fullName(){
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>

监视属性的使用

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					this.fullName = val + '-' + this.lastName
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>

既然以上三种方法都能实现功能，那么他们之间有什么区别呢？

首先，methods中定义的都是方法，每次vue解析模板时它都会被调用，而computed是根据属性的变化而调用的，只有其内部属性发生改变时才会调用，但是computed却有局限，不能实现异步操作，比如我们希望修改的数据延迟1s再更新到页面

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>

这里如果使用计算属性的话

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			computed:{
				fullName(){
                  setTimeout(()=>{
                    return this.firstName + '-' + this.lastName
                  },1000)
                 }
			}
		})
	</script>

我们发现，fullName的返回值被箭头函数所征用了，而计算属性恰恰就是靠return来返回数据的，这样写fullName无疑是废了。

总结

methods与computed的区别在于computed的效率会更高，

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。