您现在的位置是:首页 > 正文

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

2024-02-01 01:15:37阅读 2

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

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

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

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

 

 

 

网站文章

  • 使用 kind 1 分钟启动一个本地 k8s 开发集群

    使用 kind 1 分钟启动一个本地 k8s 开发集群

    使用 kind 1 分钟启动一个本地 k8s 开发集群kind 简介Github 地址:https://github.com/kubernetes-sigs/kindkind 是一个快速启动 kube...

    2024-02-01 01:15:33
  • 【python】时间处理函数以及文件操作

    1. 时间函数模块(库)-使用流程:先导入,再引用1:导入 方式一:import 模块名 引用:模块名.函数名() 方式二:from 模块名 import 函数名/变量/类 ...

    2024-02-01 01:15:05
  • 宝塔部署来客电商时,出现“open_basedir restriction in effect”错误解决方案 出现如下错误:

    宝塔部署来客电商时,出现“open_basedir restriction in effect”错误解决方案 出现如下错误:

    宝塔部署来客电商时,出现“open_basedir restriction in effect”错误解决方案Application/LKT/webapp/_compile

    2024-02-01 01:14:59
  • 国外黑客站点收集

    著名的黑客站点 国外黑客安全 http://www.deadly.org/ 大量关于OpenBSD的资料文档教程 国外黑客安全 http://www.guninski.com/ 安全专家Guninsk...

    2024-02-01 01:14:51
  • C++ 动态开辟二维数组的的方法

    近日写到一个程序,用到了要动态开辟二维数组,一想,自己就会两种。一者:用new在堆上开辟;二者:用vector开辟。技巧没有多少,但是确实是折腾了我半天!首先,大家去网上搜一下,动态开辟二维数组的文章特别多,再加上我这篇就更多了,我本不想写这篇博文的。但看了网上各位“大虾”“大牛”写的,觉得还是有必要写一下!给各位讲清楚点,以防被网上质量残次不齐的文章误导了。 写...

    2024-02-01 01:14:44
  • jmeter结果合并_JMeter:生成多维度的HTML报告

    作者:wang.lan摘要:本篇文章主要讲解jmeter性能测试工具在生成测试报告方面一直有所欠缺,但是JMeter在3.0以后解决了这个问题.JMeter3.0以后引入了Dashboard Repo...

    2024-02-01 01:14:15
  • HystrixRPC保护的原理,HystrixCommand命令的执行方法

    HystrixRPC保护的原理,HystrixCommand命令的执行方法

    HystrixCommand命令的执行方法 前面讲到,独立使用HystrixCommand命令主要有以下两个步骤: (1)继承HystrixCommand类,将正常的业务逻辑实现在继承的run方法中,...

    2024-02-01 01:14:09
  • SpringBoot配置

    SpringBoot配置

    配置文件分类Spring boot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用application.properties或者 application.ym...

    2024-02-01 01:14:00
  • 【设计模式】桥接模式

    【设计模式】桥接模式

    设计模式大总结 桥梁模式是对象的结构模式。又称为柄体(Handle and Body)模式或接口(Interface)模式。桥梁模式的用意是“将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化”。一。简解桥接模式顾名思义,是在两个模块间搭的一个桥,这两个模块就是抽象化和实现 抽象由抽象类或者接口声明的,作为一类类的抽象 实现则是继承抽象类或者

    2024-02-01 01:13:32
  • Android中根据手机的分辨率dp和px之间的转换

    public class UnitUtil { /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dp2px(Context context, float dpValue) { final float scale = context.getResources().getDisplay...

    2024-02-01 01:13:24