Vue学习总结——侦听器和计算属性

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

<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>

Vue学习总结——侦听器和计算属性_第1张图片
通过上图可发现,使用此法,尽管修改的属性与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属性,并不会再额外的花费性能
Vue学习总结——侦听器和计算属性_第2张图片
可如此又造成了最开始,代码冗余的问题
于是我们使用计算属性——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>

在调试工具中修改属性的值
Vue学习总结——侦听器和计算属性_第3张图片
methods,watch,computed分别什么时候使用

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

你可能感兴趣的:(Vue.js,学习总结,前端)