计算属性 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: {
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只需要写一个拼接方法即可实现