Vue_007_合理应用计算属性和监听器

计算属性 computed

特性

• 减少模板中计算逻辑
• 数据缓存
• 依赖固定的数据类型（响应式数据）

示例

<template>
	<div>
		<p>Reversed messageq1: "{{ reversedMessage1 }}"</p>
		<p>Reversed messageq2: "{{ reversedMessage2() }}"</p>
		<p> {{ now }}</p>
		<!-- 强制刷新模板 -->
		<button @click="() => $forceUpdate()"> forceUpdate </button>
		<br />
		<input v-model="message" />
	</div>
</template>
<script>
export default {
	data() {
		return {
			message: "hello vue"
		};
	},
	computed: {
		// message改变时才会执行
		reversedMessage1: function() {
			console.log(" 执行reversedMessage1 ")
			return this.message
				.split("")
				.reverse()
				.join("")
		}
	},
	methods: {
		// 每次模板刷新都会运行（计算量大）
		reversedMessage2: function() {
			console.log(" 执行reversedMessage2 ")
			return this.message
				.split("")
				.reverse()
				.join("")
		}
	}
}
</script>

监听器 watch

特性

• 更加灵活、通用
• watch 中可以执行任何逻辑，如函数节流、Ajax异步获取数据、操作DOM

示例

computed vs watch

• computed能做的，watch都能做，反之则不行
• 尽量使用computed

示例

• fullName示例：
  • watch需要同时监听firstName和lastNam
  • computed只需要写一个拼接方法即可实现