以React 思想融合 Vue，这就是 mini-Vue，只需引入一个文件，就能实现完整开发

mini-vue：以React 思想融合 Vue，入门即上手

mini-vue 是一款精简版的 Vue 框架，它只包含了 Vue 最核心的功能，比如响应式数据、组件系统和路由系统。mini-vue 的目的是为开发者提供一个轻量级的、易于使用的框架，以便他们能够快速构建出高质量的 web 应用。

与 Vue 不同的是，mini-vue 采用了 React 的思想，即使用函数式编程的方式来构建组件。这使得 mini-vue 的代码更加简洁、易懂。同时，mini-vue 也保留了 Vue 的一些优点，比如模板语法和响应式数据。

在本章中，我们主要介绍 mini-vue 的 reactivity 模块。reactivity 模块提供了响应式数据的功能，允许我们创建能够自动更新的变量。这使得我们能够轻松地构建出交互式 web 应用。

ref：将对象和基础数据类型变成响应式的利器

ref 是 reactivity 模块提供的其中一个 API，它允许我们在组件中创建响应式变量。这些变量可以被组件的模板和方法访问。ref 的用法非常简单，我们只需要在组件中声明一个 ref 变量，然后将其赋值给一个对象或基础数据类型即可。例如：

import { ref } from "mini-vue";

const App = {
  setup() {
    const count = ref(0);

    return {
      count,
    };
  },

  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="count++">Increment</button>
    </div>
  `,
};

在这个示例中，我们创建了一个名为 count 的 ref 变量，并将其赋值为 0。然后，我们在组件的模板中使用了 count 变量，并在按钮的点击事件中调用了 count++ 方法。当用户点击按钮时，count 的值会自动增加，并且组件的模板也会自动更新。

ref 不仅可以用于对象，还可以用于基础数据类型，如数字、字符串和布尔值。例如：

import { ref } from "mini-vue";

const App = {
  setup() {
    const count = ref(0);
    const message = ref("Hello, world!");
    const active = ref(true);

    return {
      count,
      message,
      active,
    };
  },

  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="count++">Increment</button>
      <p>Message: {{ message }}</p>
      <button @click="message = 'Goodbye, world!'">Change message</button>
      <p>Active: {{ active }}</p>
      <button @click="active = !active">Toggle active</button>
    </div>
  `,
};

在这个示例中，我们创建了三个 ref 变量：count、message 和 active。然后，我们在组件的模板中使用了这些变量，并在按钮的点击事件中调用了相应的 setter 方法。当用户点击按钮时，这些变量的值会自动更新，并且组件的模板也会自动更新。

proxyRefs：不通过 value 直接访问响应式数据

在某些情况下，我们可能需要不通过 value 直接访问响应式数据。例如，我们可能需要在一个计算属性中使用响应式数据的原始值。在这种情况下，我们可以使用 proxyRefs。proxyRefs 是 reactivity 模块提供的另一个 API，它允许我们在组件中创建响应式变量的代理。

proxyRefs 的用法也非常简单，我们只需要在组件中声明一个 proxyRef 变量，然后将其赋值给一个对象或基础数据类型即可。例如：

import { proxyRefs } from "mini-vue";

const App = {
  setup() {
    const count = proxyRefs(0);

    return {
      count,
    };
  },

  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="count++">Increment</button>
    </div>
  `,
};

在这个示例中，我们创建了一个名为 count 的 proxyRef 变量，并将其赋值为 0。然后，我们在组件的模板中使用了 count 变量，并在按钮的点击事件中调用了 count++ 方法。当用户点击按钮时，count 的值会自动增加，并且组件的模板也会自动更新。

与 ref 不同的是，proxyRefs 允许我们在组件中直接使用响应式数据的原始值。例如，我们可以在计算属性中使用 proxyRefs 来计算一个新的值。例如：

import { proxyRefs } from "mini-vue";

const App = {
  setup() {
    const count = proxyRefs(0);

    const doubledCount = computed(() => {
      return count.value * 2;
    });

    return {
      count,
      doubledCount,
    };
  },

  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="count++">Increment</button>
      <p>Doubled count: {{ doubledCount }}</p>
    </div>
  `,
};

在这个示例中，我们创建了一个名为 count 的 proxyRef 变量，并将其赋值为 0。然后，我们在组件的模板中使用了 count 变量，并在按钮的点击事件中调用了 count++ 方法。我们还创建了一个名为 doubledCount 的计算属性，该属性返回 count 的值乘以 2。当用户点击按钮时，count 的值会自动增加，并且组件的模板也会自动更新。

总结

在本章中，我们介绍了 mini-vue 的 reactivity 模块。reactivity 模块提供了响应式数据的功能，允许我们创建能够自动更新的变量。ref 和 proxyRefs 是 reactivity 模块提供的两个 API，它们允许我们在组件中创建响应式变量。ref 允许我们在组件中创建响应式变量，这些变量可以被组件的模板和方法访问。proxyRefs 允许我们在组件中创建响应式变量的代理，我们可以直接使用这些变量的原始值。