Vue3_语法糖—— <script setup>以及unplugin-auto-import自动引入插件

<script setup>

import { ref , onMounted} from 'vue';
    let obj = ref({
      a: 1,
      b: 2,
    }); 
    let changeObj = ()=>{
      console.log(obj)
      obj.value.c = 3 //ref写法
    }
    onMounted(()=>{
      console.log(obj)
    })
    

</script>

里面的代码会被编译成组件 setup() 函数的内容。

相当于


<script>

import { ref } from 'vue';

export default {    
    setup(){
        let obj = ref({
              a: 1,
              b: 2,
        }); 
        let changeObj = ()=>{
              console.log(obj)
              obj.value.c = 3 //ref写法
        }
        return {obj,changeObj}
    }
    mounted() {
        console.log(this.obj) 
    }
   
    
}
</script>

使用语法糖插件可以简化import的步骤

unplugin-auto-import - npm

不使用时:

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

使用时:

const count = ref(0)
const doubled = computed(() => count.value * 2)

下载

cnpm i unplugin-auto-import --D

根据官网中不同打包工具的配置进行配置

vue-cli创建的项目配置:

//vue.config.js
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({
        imports: ['vue', 'vue-router', 'vuex'],
        eslintrc: {
          enabled: false, // 默认false, true启用。生成一次就可以,避免每次工程启动都生成
          filepath: './.eslintrc-auto-import.json', // 生成json文件,eslintrc中引入
          globalsPropValue: true,
        },
      }),
    ],
  },
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/59421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客网Verilog刷题——VL51

牛客网Verilog刷题——VL51 题目答案 题目 请编写一个十六进制计数器模块&#xff0c;计数器输出信号递增每次到达0&#xff0c;给出指示信号zero&#xff0c;当置位信号set 有效时&#xff0c;将当前输出置为输入的数值set_num。模块的接口信号图如下&#xff1a; 模块的时序图…

Redis的Java客户端

目录 1.Jedis的使用 前置工作-ssh进行端口转发 JedisAPI的使用 Jedis连接池 2.SpringDataRedis的使用 1.创建项目 2.配置文件 3.注入RedisTemplate对象 4.编写代码 3.SpringRedisTemplate 哈希结构用法 ​总结 1.Jedis的使用 Jedis&#xff1a;以Redis命令作为方法…

mysql重置和修改密码 Ubuntu系统

忘记密码要重置密码 cat /etc/mysql/debian.cnf/etc/mysql/debian.cnf这个只有Debian或者Ubuntu服务器才有&#xff0c;里面有mysql安装后自带的用户&#xff0c;作用就是重启及运行mysql服务。我们用这个用户登录来达到重置密码的操作 使用上面的那个文件中的用户名和密码登…

强化学习分享(一) DQN算法原理及实现

摘要&#xff1a;主要讲解DQN算法的原理&#xff0c;伪代码解读&#xff0c;基于pytorch版本的DQN小游戏编程&#xff0c;同时对该代码进行详细标注&#xff0c;以及奉上原码。 &#xff08;一&#xff09;强化学习算法介绍 DQN&#xff0c;顾名思义&#xff0c;Deep Q Learni…

SpringCloud《Eureka、Ribbon、Feign、Hystrix、Zuul》作用简单介绍

概述 SpringCloud是一个全家桶&#xff0c;包含多个组件。 本文主要介绍几个重要组件&#xff0c;也就是Eureka、Ribbon、Feign、Hystrix、Zuul这几个组件。 一、业务场景介绍 业务流程&#xff0c;支付订单功能 订单服务改变为已支付订单服务调用库存服务&#xff0c;扣减…

中国农村程序员学习此【正则表达式进阶】发明cahtGPT,购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录 限制可能的用户名匹配空白字符匹配非空白字符指定匹配的上限和下限只指定匹配的下限指定匹配的确切数量检查全部或无正向先行断言和负向先行断言检查混合字符组使用捕获组重用模式使用捕获组搜索和替换删除…

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现WOA鲸鱼算法同步优化特征选择结合支持向量机分类预测…

Windows 系统无法复制粘贴则么处理

Windows 系统无法复制粘贴如何恢复呢&#xff1f; 今天小编遇到一个问题&#xff0c;就是自己的电脑突然无法复制、粘贴&#xff0c;这样的问题我遇到很多次&#xff0c;重启电脑虽然能解决问题&#xff0c;但是不能一直通过重启来解决这样的问题&#xff0c;很浪费时间的。今…

Filebeat+ELK 部署

Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.8.10 Elasticsearch Kibana Node2节点&#xff08;2C/4G&#xff09;&#xff1a;node2/192.168.8.11 Elasticsearch Apache节点&#xff1a;apache/192.168.8.13 …

2023年电赛---运动目标控制与自动追踪系统(E题)发挥题思路

前言 &#xff08;1&#xff09;因为博客编辑字数超过1W字会导致MD编辑器非常卡顿。所以我将发挥题和基础题的思路拆开了。 &#xff08;2&#xff09;更新日记&#xff1a; <1>2023年8月4日&#xff0c;9点20分。分离发挥题思路和基础题思路&#xff0c;增加了博主Huiye…

2020-2023中国高等级自动驾驶产业发展趋势研究

1.1 概念界定 2020-2023中国高等级自动驾驶产业发展趋势研究Trends in China High-level Autonomous Driving from 2020 to 2023自动驾驶发展过程中&#xff0c;中国出现了诸多专注于研发L3级以上自动驾驶的公司&#xff0c;其在业界地位也越来越重要。本报告围绕“高等级自动…

【雕爷学编程】MicroPython动手做(29)——物联网之SIoT 2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

Java实现数据库表中的七种连接【Mysql】

Java实现数据库表中的七种连接【Mysql】 前言版权推荐Java实现数据库表中的七种连接左外连接右外连接其他连接 附录七种连接SQL测试Java测试转换方法类 Cla1类 Cla2类Cla3 最后 前言 2023-8-4 16:51:42 以下内容源自《【Mysql】》 仅供学习交流使用 版权 禁止其他平台发布时…

vue 混入(mixin)的使用

在 vue 组件内&#xff0c;如果想将一些公共功能&#xff0c;如组件、方法、钩子函数等复用&#xff0c;混入是一个很好的选择。 现在开始我们的混入使用吧 1、我们可以创建一个目录mixins&#xff0c;在创建一个comment.js文件如图&#xff1a; // 在 common.js 里写你想共享…

SQL 表别名 和 列别名

列表名 列表名之后 order by 可以用别名 也可以用原名&#xff0c; where 中不能用别名的 SQL语句执行顺序&#xff1a; from–>where–>group by -->having — >select --> order 第一步&#xff1a;from语句&#xff0c;选择要操作的表。 第二步&#xff1…

matlab编程实践18、19

浅水方程 浅水方程可以建立起海啸和浴缸中波浪的数学模型。浅水方程建立了水或者其它不可压缩液体受扰动时传播的模型。隐含的假设是&#xff0c;液体的深度和波浪的长度、扰动等相比是很小的。 在这样的记号下&#xff0c;浅水方程为双曲守恒定律的一个例子。 使用拉克斯-冯特…

ssm机动车维修站车辆维护管理系统java汽车报修备案jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 ssm机动车维修站车辆维护管理系统 系统有2权限&#…

iOS16.0:屏幕旋转

此文写于2022年08月03日&#xff0c;距离iOS16正式版推出还有一个多月的时间&#xff0c;iOS16 beta版本有很多API的修改&#xff0c;今天讨论的是屏幕旋转&#xff0c;基于Xcode 14.0 beta4。 之前的屏幕旋转会报错&#xff1a; [Orientation] BUG IN CLIENT OF UIKIT: Settin…

MinIO

MinIO 1.MinIO安装 Minio 是个基于 Golang 编写的开源对象存储服务&#xff0c;存储非结构化数据&#xff0c;如&#xff1a;图片&#xff0c;视频&#xff0c;音乐等 官网地址&#xff1a;https://min.io/ 中文地址&#xff1a;http://minio.org.cn 官网文档&#xff08; …

Istio 安全 mTLS认证 PeerAuthentication

这里定义了访问www.ck8s.com可以使用http也可以使用https访问&#xff0c;两种方式都可以访问。 那么是否可以强制使用mtls方式去访问&#xff1f; mTLS认证 PeerAuthentication PeerAuthentication的主要作用是别人在和网格里的pod进行通信的时候&#xff0c;是否要求mTLS mTL…