Vue3响应式进阶：深度探索Effect Scope与精准依赖追踪

一、Effect Scope核心原理

精细化响应式副作用管理的创新方案：

import { effectScope, ref, watch, onScopeDispose } from 'vue'

// 创建独立作用域
const scope = effectScope()

// 在作用域内执行响应式操作
scope.run(() => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  
  watch(count, (newVal) => {
    console.log('Count changed:', newVal)
  })
  
  // 作用域内注册的清理函数
  onScopeDispose(() => {
    console.log('Scope disposed')
  })
})

// 统一停止所有副作用
scope.stop()

// 嵌套作用域示例
const parentScope = effectScope()

parentScope.run(() => {
  const user = ref(null)
  
  const childScope = effectScope(true) // 自动继承父级
  
  childScope.run(() => {
    watch(user, fetchUserDetails) // 自动随父级停止
  })
})

核心优势：精准控制、自动回收、层级管理、性能优化

二、高级应用模式

1. 组件级状态管理

// 组合式函数中使用Effect Scope
export function useCounter() {
  const scope = effectScope()
  const count = ref(0)
  
  scope.run(() => {
    watch(count, debounce(() => {
      console.log('Debounced count:', count.value)
    }, 500))
  })
  
  // 提供清理方法
  const stop = () => scope.stop()
  
  return {
    count,
    stop
  }
}

// 组件中使用
const { count, stop } = useCounter()
onUnmounted(stop)

// 自动停止的变体
export function useAutoDisposeCounter() {
  const scope = effectScope()
  const count = ref(0)
  
  scope.run(() => {
    // 响应式逻辑...
  })
  
  // 自动绑定到当前组件上下文
  getCurrentScope()?.onStop(() => scope.stop())
  
  return { count }
}

2. 精准依赖追踪

// 依赖收集控制
import { pauseTracking, resetTracking } from 'vue'

function expensiveCalculation(dataRef) {
  // 临时暂停依赖收集
  pauseTracking()
  
  const result = performCalculation(dataRef.value)
  
  // 恢复依赖收集
  resetTracking()
  
  return result
}

// 细粒度响应式
const state = reactive({
  items: [],
  filteredItems: []
})

const filterScope = effectScope()

function applyFilter(filter) {
  // 先停止之前的过滤效果
  filterScope.stop()
  
  filterScope.run(() => {
    watch([() => state.items, filter], ([items, filter]) => {
      state.filteredItems = items.filter(item => 
        item.includes(filter)
      )
    }, { immediate: true })
  })
}

// 手动清理
onUnmounted(() => filterScope.stop())

三、实战应用案例

1. 动态表单验证引擎

// 动态表单验证作用域管理
export function useFormValidation(formState) {
  const scope = effectScope()
  const errors = reactive({})
  
  scope.run(() => {
    // 为每个字段设置验证器
    for (const field in formState) {
      watch(() => formState[field], (value) => {
        errors[field] = validateField(field, value)
      }, { immediate: true })
    }
    
    // 表单级验证
    watch(() => ({ ...formState }), debounce(validateForm, 300))
  })
  
  // 动态添加字段验证
  function addFieldValidation(field, validator) {
    scope.run(() => {
      watch(() => formState[field], (value) => {
        errors[field] = validator(value)
      })
    })
  }
  
  onUnmounted(() => scope.stop())
  
  return {
    errors,
    addFieldValidation
  }
}

// 组件中使用
const { user, password } = reactive({
  user: '',
  password: ''
})
const { errors } = useFormValidation({ user, password })