为什么在vue3中每个页面都需要引用ref，reactive的问题

为什么在vue3中每个页面都需要引用ref，reactive

        在 Vue 3 中，每个页面都需要引用 ref 和 reactive 的原因是因为 Vue 3 引入了 Composition API，这是一种新的组合式 API，提供了更灵活的方式来编写 Vue 组件。 ref 和 reactive 都是 Composition API 中用于创建响应式数据的函数。ref 用于创建单个值的响应式数据，而 reactive 则用于创建复杂对象的响应式数据。 使用 Composition API 可以让我们更灵活地组织组件的逻辑，将相关的逻辑聚合在一起，而不是按照固定的生命周期函数来组织。这样可以使代码更加清晰易懂，也更容易维护。 另外，使用 ref 和 reactive 还可以带来性能上的提升。在 Vue 3 中，对响应式数据的追踪和更新机制进行了优化，使得响应式数据的更新更加高效。这也是 Vue 3 与 Vue 2 相比的一个重要的改进之一。

为什么需要我们手动引入，而不是vue3自动引入？ 

        在 Vue 3 中，需要手动引入 ref 和 reactive，而不是自动引入，是因为 Vue 3 中引入了 Tree Shaking 机制，这种机制可以对无用的代码进行剪枝，从而减小打包后的文件体积。 如果 Vue 3 自动引入了 ref 和 reactive，那么无论我们是否使用这些 API，它们都会被打包进最终的代码中，这样就会增加打包后的文件体积。 而手动引入 ref 和 reactive，则可以让我们更加精细地控制打包后的文件大小。我们只需要在需要使用 ref 和 reactive 的地方手动引入它们即可，这样就可以避免引入无用的代码，减小文件体积。 此外，手动引入 ref 和 reactive 还可以提高代码的可读性和可维护性。我们可以在代码中清晰地看到每个 API 的引用位置，这样可以更方便地查找和修改代码。

如何自动导入？

        可以使用 unplugin-auto-import 插件

cnpm i unplugin-auto-import -D

vite中使用 ，于vite.config.js中配置

import vue from '@vitejs/plugin-vue';
// 引入插件
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
    plugins: [
		vue(),
		AutoImport({
		  	imports:['vue','vue-router']
		})
	]
});

webpack，于vue.config.js配置

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],
      })
    ]
  },
})