Vue：计算属性和方法的区别和watch监听器的使用

html

<div id="app">
	<div>{{firstName + " " + lastName}}</div>
</div>

js

<script>
	var app = new Vue({
		el:'#app',
		data:{
			firstName:"Min",
			lastName:"Box"
		}
	})
</script>

效果如下

不过我们不希望在模板中含有逻辑在里面，模板就是为了显示就好
如果我们增加一个fullName，虽然也能达到一样的小伙，那么代码会显的过于的冗余

html

<div id="app">
	<div>{{fullName}}</div>
</div>

js

<script>
	var app = new Vue({
		el:'#app',
		data:{
			firstName:"Min",
			lastName:"Box",
			fullName:"Min Box"
		}
	})
</script>

于是我们就衍生出了计算属性这样的一个概念，计算属性故名思意就是通过计算而得来的

html

<div id="app">
	<div>{{fullName}}</div>
</div>

js

<script>
		var app = new Vue({
			el:'#app',
			data:{
				firstName:"Min",
				lastName:"Box",
			},
			//计算属性
			computed:{
				fullName:function(){
					return this.firstName + " " + this.lastName
				}
			}
		})
</script>

这么写我们的代码就不会产生冗余了
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值，
我们对上面的代码进行修改增加一个age值

html

<div id="app">
	{{fullName}}
	{{age}}
</div>

js

<script>
	var app = new Vue({
		el:'#app',
		data:{
			firstName:"Min",
			lastName:"Box",
			age:18
		},
		//计算属性
		computed:{
			fullName:function(){
				console.log("计算了一次");
				return this.firstName + " " + this.lastName
			}
		}
	})
</script>

我们可以看到执行了一次刷新后控制台打印出了 “计算了一次”
当我们在控制台对age进行修改，可以发现页面并没有打印出 “计算了一次”

当我们对计算属性所依赖的值进行改变的时候发现控制台打印出了 “计算了一次”

我们通过使用方法同样能达到这样的效果，但是方法没有缓存，可以很明显的看出和计算属性和方法的差别

html

<div id="app">
	{{fullName()}}
	{{age}}
</div>

js

<script>
	var app = new Vue({
		el:'#app',
		data:{
			firstName:"Min",
			lastName:"Box",
			age:18
		},
		methods:{
			fullName: function(){
				console.log("计算了一次");
				return this.firstName + " " + this.lastName;
			}
		}
	})
</script>

效果如下

当我们在控制台中对age进行改变的时候

可以看出来方法没有像计算属性那样有缓存，控制台打印了一次 “计算了一次”

我们可以通过第三种方法来实现同样的功能，由此我们引入了 watch 监听器

html

<div id="app">
			{{fullName}}
			{{age}}
</div>

js

<script>
			var app = new Vue({
				el:'#app',
				data:{
					firstName:"Min",
					lastName:"Box",
					fullName:"Min Box",
					age:18,
				},
				watch:{
					firstName: function(){
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.lastName; 
					},
					lastName: function(){
						console.log("计算了一次");
						this.fullName = this.firstName + " " + this.lastName; 
					}
				}
			})

通过watch监听器可以和计算属性达到一样的效果，但是相比与计算属性，watch的代码相对来说有点复杂了