Vue学习总结——侦听器和计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41591033/article/details/104115214

前面学习我们知道可以通过插值表达式渲染页面

<body>
	<div id="app">
		姓名：{{ name }} 年龄：{{ age }}
	</div>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				name: '小明',
				age: 18,
				looks： 'handsome'
			}
		})
	</script>
</body>

可如果需要在页面的多个地方渲染该信息，频繁使用插值表达式未免使代码太过冗余，所以我们可以通过函数的方式

<body>
	<div id="app">
		{{ showMessage() }}
		{{ looks }}
	</div>

	<script>
		var app = new Vue ({
			el: '#app',
			data: {
				name: '小明',
				age: 18,
				looks: 'handsome'
			},
			methods: {
				showMessage: function() {
					console.log('---methods---');
					return `姓名：${this.name} 年龄：${this.age}`
				}
			}
		})
	</script>
</body>

在这里插入图片描述
通过上图可发现，使用此法，尽管修改的属性与showMessage方法无关，还是会调用该方法，未免太浪费性能
这时候我们可以考虑侦听器——watch

<body>
	<div id="app">
		{{ message }}
		{{ looks }}
	</div>

	<script>
		var app = new Vue ({
			el: '#app',
			data: {
				name: '小明',
				age: 18,
				looks: 'handsome',
				message: '姓名：小明 年龄：18'
			},
			watch: {
				name: function() {
					console.log('---watch---');
					this.message = `姓名：${this.name} 年龄：${this.age}`
				},
				age: function() {
					console.log('---watch---');
					this.message = `姓名：${this.name} 年龄：${this.age}`
				}
			}
		})
	</script>
</body>

这是再修改looks属性，并不会再额外的花费性能
在这里插入图片描述
可如此又造成了最开始，代码冗余的问题
于是我们使用计算属性——computed

<body>
	<div id="app">
		{{ message }}
		{{ looks }}
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				name: '小明',
				age: 18,
				looks: 'handsome',
			},
			computed: {
				message: function() {
					return `姓名：${this.name} 年龄：${this.age}`
				}
			}
		})
	</script>
</body>

在调试工具中修改属性的值
在这里插入图片描述
methods，watch，computed分别什么时候使用

methods：methods 方法表示一个具体的操作，主要书写业务逻辑（比如触发事件）
watch：主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；
computed：computed 并不是一个方法,而是依赖于属性的,就是一个属性的封装,主要当作属性来使用,属性的结果会被缓存,属性的值不变化,那么不会多次调用computed,除非依赖的响应式属性变化才会重新计算