- Introduction
-
数据绑定时，可以使用简单的表达式实现数据的2次处理；如根据 num 判断奇偶、根据折扣计算最终价格
<div>{{ num }} is {{ num % 2 ? 'odd' : 'even' }}</div>
<div>{{ price * (1 - discount) }}</div>
逻辑复杂时，应该使用计算属性实现
- Feature
-
需要引入 computed 包
import { computed } from 'vue';
计算属性是一个属性，不是方法，使用时不需要()
计算属性是响应式数据，会触发页面更新
计算属性返回的值是只读的，且永远不应该被更改 - 应该更新它所依赖的源状态以触发新的计算
计算属性返回的值是派生状态，可以把它看作是一个“临时快照” - deriving values from your reactive state；每当源状态发生变化时，就会创建一个新的快照
除了数据计算外，不应该有其它操作，如数据请求，DOM修改等副作用，即：只做一件事情
- [] 判断奇偶
-
<div>{{ num }} is {{ res }}</div>
import { ref, computed } from 'vue';
const num = ref(0);
const res = computed(() => num.value % 2 === 0 ? 'even' : 'odd')
- [] 判断性别
- [] 参照B站规则处理关注、粉丝、点赞和播放数量
- Computed Caching vs. Methods
方法可以没有返回，且每次执行方法都会导致页面渲染
- [] 执行2次方法 inc 和执行2次计算属性 dec
-
创建方法 inc 和计算属性 dec
import { computed } from 'vue';
const inc = () => {
console.log('do function inc');
}
const dec = computed(() => {
console.log('do computed dec');
})
使用2次方法；2次计算属性
<div>第1次 inc - {{ inc() }}</div>
<div>第2次 inc - {{ inc() }}</div>
<div>第1次 dec - {{ dec }}</div>
<div>第2次 dec - {{ dec }}</div>
分析
数据变化时，2次方法都会执行
数据变化时，计算属性仅第1次执行；第2次没有检测到数据变化，就不会执行
do function inc
do function inc
do function dec
使用 value 指定属性值
import { ref, computed } from 'vue';
let age = ref(18)
const res = computed(() => {
return age.value >= 18 ? 'adault' : 'teenage'
})
<div> {{ res }} </div>
- Advance
-
计算属性是一个属性，不是方法，所以不能直接传递参数
- [] 将资源服务器地址和图片路径拼接为一个完整的在线地址
-
const getUrl = computed(() => {
return (url) => {
return 'http://127.0.0.1:3000' + url
}
})
- [] 根据成绩求绩点
-
let score = ref(80)
const grade = computed(() => {
return (score) => {
switch (Math.floor(score / 10)) {
case 6:
return 'D'
case 7:
return 'C'
case 8:
return 'B'
case 9:
return 'A'
default:
return 'E'
}
}
})
以上逻辑有什么需要改进的地方
<div>grade {{ score }} - {{ grade(score) }}</div>
使用静态数据
<div>grade 55 - {{ grade(55) }}</div>
<div>grade 60 - {{ grade(60) }}</div>
<div>grade 71 - {{ grade(71) }}</div>
<div>grade 80 - {{ grade(80) }}</div>
<div>grade 90 - {{ grade(90) }}</div>
<div>grade 100 - {{ grade(100) }}</div>
