-
数据绑定时，可以使用简单的表达式实现数据的2次处理；如根据 num 判断奇偶
<div>{{ num }} is {{ num % 2 ? 'odd' : 'even' }}</div>
逻辑复杂时，应该使用计算属性实现
需要引入 computed 包
- Feature
-
计算属性是响应式数据，会触发页面更新
计算属性返回的值是派生状态，可以把它看作是一个“临时快照”；每当源状态发生变化时，就会创建一个新的快照
计算属性返回的值是只读的，且永远不应该被更改 - 应该更新它所依赖的源状态以触发新的计算
- [] 判断奇偶
-
<div>{{ num }} is {{ res }}</div>
import { ref, computed } from 'vue';
const num = ref(0);
const res = computed(() => num.value % 2 === 0 ? 'even' : 'odd')
- [] 判断性别
- [] 参照B站规则处理关注、粉丝、点赞和播放数量
- [] 标签页内联样式 - 根据当前导航项动态移动指示器；ind 是导航项的索引
-
结构中直接使用数据；逻辑应该加带使用.value
传统方案 - 直接拼接样式
<div class="indicator" :style="{ transform: `translateX(${ind * 80}px)` }"></div>
使用计算属性 - 计算出当前导航项的偏移量 trans
<div class="indicator" :style="{ transform: trans }"></div>
let trans = computed(() => `translateX(${ind.value * 80}px)`)
- 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>