VUE 3.0源码之computed

soooyoung

于 2020-09-17 16:10:54 发布

阅读量683

点赞数

分类专栏： vue3 源码 vue 文章标签： vue

本文链接：https://blog.csdn.net/soooyoung/article/details/108643806

版权

本文详细探讨Vue 3.0中computed的实现原理，包括入口、实现过程及get、更新、value阶段的工作机制，强调了计算属性如何避免不必要的性能损失，并在getter触发时进行依赖收集和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 入口

computed方法首先调用_computed实现计算属性，然后调用recordInstanceBoundEffect记录当前的effect，方便当组件卸载时清除

import {
    computed as _computed } from '@vue/reactivity'

function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
   
  const c = _computed(getterOrOptions as any)
  recordInstanceBoundEffect(c.effect)
  return c
}