请一步一步的讲解一下“Vue3中，核心代码位于 @vue/reactivity 模块下，如下几个部分：reactive函数，effect函数、ref函数、computed函数的原理和示例”

在 Vue3 中，核心的响应式代码位于 `@vue/reactivity` 模块下，主要包括 `reactive` 函数、`effect` 函数、`ref` 函数和 `computed` 函数。下面我将逐一介绍它们的原理和示例。

## reactive 函数

`reactive` 函数用于将一个普通对象转换为响应式对象。它的实现方式基于 ES6 中的 Proxy，会拦截对象上的所有属性的 get 和 set 操作，并在这些操作中进行依赖收集和触发更新。具体而言，`reactive` 函数的实现方式如下：

import { reactive } from '@vue/reactivity'

const state = reactive({
  count: 0
})

console.log(state.count) // 0

state.count++

console.log(state.count) // 1

这个例子中我们使用 `reactive` 函数将一个普通对象转换为响应式对象，然后可以像访问普通对象一样访问它的属性。当我们修改这个对象的属性时，Vue3 会自动检测到这个修改，并触发相应的更新操作。

## effect 函数

`effect` 函数用于创建一个响应式的副作用函数，会自动收集依赖关系并在依赖发生变化时重新执行。具体而言，`effect` 函数的实现方式如下：

import { reactive, effect } from '@vue/reactivity'

const state = reactive({
  count: 0
})

effect(() => {
  console.log(state.count)
})

state.count++ // 输出 1

这个例子中我们使用 `effect` 函数创建了一个副作用函数，它会自动收集 `console.log(state.count)` 这个表达式的依赖关系，并在 `state.count` 发生变化时重新执行这个表达式。因此，当我们执行 `state.count++` 操作时，会输出 `1`。

## ref 函数

`ref` 函数用于创建一个可变的响应式对象。它的实现方式基于 ES6 中的 Proxy，会拦截对象上的 get 和 set 操作，并在这些操作中进行依赖收集和触发更新。具体而言，`ref` 函数的实现方式如下：

import { ref } from '@vue/reactivity'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

这个例子中我们使用 `ref` 函数创建了一个可变的响应式对象 `count`，并可以通过 `count.value` 访问它的值。当我们修改 `count.value` 的值时，Vue3 会自动检测到这个修改，并触发相应的更新操作。

## computed 函数

`computed` 函数用于创建一个计算属性，会自动收集依赖关系并在依赖发生变化时重新计算。具体而言，`computed` 函数的实现方式如下：

import { reactive, computed } from '@vue/reactivity'

const state = reactive({
  count: 0
})

const doubled = computed(() => {
  return state.count * 2
})

console.log(doubled.value) // 0

state.count++

console.log(doubled.value) // 2

这个例子中我们使用 `computed` 函数创建了一个计算属性 `doubled`，它会自动收集 `state.count` 这个响应式对象的依赖关系，并在 `state.count` 发生变化时重新计算。因此，当我们执行 `state.count++` 操作时，会输出 `2`。

综上所述，`reactive` 函数、`effect` 函数、`ref` 函数和 `computed` 函数是 Vue3 响应式系统的核心部分，它们的实现方式基于 ES6 中的 Proxy 和依赖收集，并能够帮助我们更加方便地处理数据的变化。