解析vue3的ref,reactive的使用和原理

目录

• 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

https://rondsjinhuajin.github.io/DemoVue/#/

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