Vue3的ref和reactive如何实现响应式，其原理是什么？

本文共计340个文字，预计阅读时间需要2分钟。

目录

1.前言

2.比较

3.ref源码解析

4.reactive源码解析

- createReactiveObject - handles的组成 - get陷阱 - set陷阱

5.总结

1. 前言 Vue3新增了ref和reactive两个API，用于响应式数据。 Ref系列操作频繁度最高。

目录

• 1.前言
• 2.比较
• 3.ref源码解析
• 4.reactive源码解析
• createReactiveObject
• handles的组成
• get陷阱
• set陷阱
• 5.总结

1.前言

vue3新增了ref，reactive两个api用于响应式数据，Ref 系列毫无疑问是使用频率最高的 api 之一,响应式意味着数据变动，页面局部自动更新。数据类型有基本数据类型（string,number,boolean,undfined,null,symbol），引用数据类型（object,array,set,map等）。如何精准检测跟踪js中所有的数据类型变动，并且能够达到vnode的对比后真实dom的渲染？vue中是如何做到的呢？简单实例如下：

import { reactive, ref } from "vue"; import type { Ref } from "vue"; // 定义响应式数据 const count: Ref<number> = ref(0); function countClick() { count.value++; // 更新数据 }

// 定义引用类型数据标注 interface TypeForm { name: string; num: number; list?: Array<[]>; } const formInline: TypeForm = reactive({ name: "", num: 0, }); formInline.name = 'KinHKin' formInline.num = 100 formInline.list = [1,2,3,4]

效果图：

在线地址：

KinHKin

rondsjinhuajin.github.io/DemoVue/#/

但是，这只是简单的使用，配合了ts的类型标注，但是背后的原理是什么呢？