目录
computed
使用方式
基本用法
computed用于声明一个响应式的计算属性,当依赖的响应式数据变化时自动重新计算
<script lang="ts" setup>
import { computed, ref } from 'vue'
let firstName = ref('张')
let lastName = ref('三')
let allName = computed(() => {
return firstName.value + lastName.value
})
</script>
可写计算属性
通过get,set函数实现可写计算属性
let num1 = ref('18')
let num2 = ref('19')
let allNum = computed({
get() {
return num1.value + '-' + num2.value
},
set(val) {
num1.value = val.split('-')[0]
num2.value = val.split('-')[1]
},
})
function changeAllNum() {
allNum.value = '35-99'
console.log(num1.value, num2.value)
}
面试重点
computed核心特性
- 响应式依赖追踪:自动追踪计算函数中的响应式依赖
- 缓存机制:依赖未变化时直接返回缓存值,避免重复计算,减少消耗
- 惰性求值:只有在被访问时才会计算值
computed与方法的区别
方法每次调用都会重新计算,computed只有被访问的时候才会计算
computed与watch的区别
- computed:声明一个依赖其他值的新值,适合同步计算
- watch: 监听值的变化并执行副作用（如异步操作）。
源码实现核心
- 基于
effect和ReactiveEffect实现依赖收集。- 通过
track/trigger实现依赖追踪- 通过 _
dirty标志和调度器（scheduler）实现缓存。
核心机制
-
依赖收集：
- 在
get value时，通过track收集当前计算属性的依赖。 - 计算属性的
getter中访问的响应式变量会被追踪。
- 在
-
缓存机制：
- 通过
_dirty标志判断是否需要重新计算。 - 依赖变化时，调度器将
_dirty标记为true，下次访问时重新计算。
- 通过
-
触发更新：
- 依赖变化时，调度器触发
trigger，通知依赖该计算属性的组件更新。
- 依赖变化时，调度器触发
