Vue3响应式原理-WatchAPI

最新推荐文章于 2024-11-22 19:02:06 发布

只爱喝白开水

最新推荐文章于 2024-11-22 19:02:06 发布

阅读量1.2k

点赞数 1

分类专栏： Vue 笔记文章标签： vue

本文链接：https://blog.csdn.net/gudeng007/article/details/124082332

版权

本文探讨Vue3的响应式原理，重点关注WatchAPI的使用，包括如何监测响应式对象、监视函数，详细解析回调执行时机以及watch中cleanup功能的实现，阐述在连续触发watch时如何进行清理操作。

摘要由CSDN通过智能技术生成

Vue3响应式原理-WatchAPI

watch的核心就是观测一个响应式数据，当数据变化时通知并执行回调（那也就是说它本身就是一个effect）

watch(state,(oldValue,newValue)=>{
    // 监测一个响应式值的变化
    console.log(oldValue,newValue)
})

监测响应式对象

function traverse(value,seen = new Set()){
   
    if(!isObject(value)){
   
        return value
    }
    if(seen.has(value)){
   
        return value;
    }
    seen.add(value);
    for(const k in value){
    // 递归访问属性用于依赖收集
        traverse(value[k],seen)
    }
    return value
}
export function isReactive(value){