常用 Composition API--工程文件及setup

news2025/1/16 0:47:11

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

分析工程结构

vue3新添加的东西或修改的内容

首先import { createApp } from 'vue'引入的不再是Vue的构造函数了,而是一个createAPP的工厂函数,什么是工厂函数?

 就是普通的函数还需要new一下,而这个不需要new了,而且首字母小写

 确实比之前的vm上的属性要少 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})

关闭语法检测

 用一个定时器,实现页面的卸载

注意vue2的写法 new一个对象实现挂载,在Vue3是不能用的,会报错的

 这个是v3跟v2的最大区别之一,v3组件中的模板结构可以没有根标签 

安装开发者工具

就去Google商店找最新的vue开发者工具就可以了

初始setup

理解:Vue3.0中一个新的配置项,值为一个函数。

setup是所有`<strong style="color:#DD5145">`Composition API(组合API)`</strong><i style="color:gray;font-weight:bold">`“ 表演的舞台 ”`</i>`。

组件中所用到的:数据、方法等等,均要配置在setup中。

setup函数的两种返回值:
  1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)


  2. `<span style="color:#aad">`若返回一个渲染函数:则可以自定义渲染内容。(了解)

 

使用vue自带的h,它里面有俩个值第一个是创建的标签,第二个是内容

当然v3是向下兼容,也可以用v2的写法

 注意点:
  1. 尽量不要与Vue2.x配置混用
     - Vue2.x配置(data、methos、computed...)中`<strong style="color:#DD5145">`可以访问到`</strong>`setup中的属性、方法。
     - 但在setup中`<strong style="color:#DD5145">`不能访问到`</strong>`Vue2.x配置(data、methos、computed...)。
     - 如果有重名, setup优先。
  2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

v2是能拿到v3的数据,但是v3不能拿到v2的数据,v2的数据是undefined

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【TimeSerias】Transformer

Sequence 1. rnn 和 cnn RNN 很难并行化CNN很难捕捉较远的信息 2. Self-attention 拿每个query q去对每个 key k做attention 计算输出 Self-attition 矩阵计算 qiWqaikiWkqiviWvaiQWqAKWkAVWvA(1.1)\begin{align*} q^i & W^q a^i \\ k^i & W^k q^i \\ v^i & W…

WordPress图片水印插件 Easy Watermark

1、概述 WordPress图片水印插件Easy Watermark 是一款实现上传图片自动添加水印LOGO功能的高效插件。当我们在WordPress网站后台上传图片文件到媒体库时&#xff0c;或者在发布文章上传图片时&#xff0c;Easy Watermark 都能为图片自动添加水印&#xff0c;同时&#xff0c;还…

《计算机网络-自顶向下》06. 链路层和局域网

文章目录链路层概述链路层提供的服务链路层在何处实现差错检测和纠正技术奇偶校验循环冗余检测多路访问协议信道划分协议随机接入协议时隙 ALOHAALOHA载波侦听多路访问 —— CSMA具有碰撞检测的载波侦听多路访问 —— CSMA/CDCSMA/CD 效率轮流协议DOCSIS&#xff1a;用于电缆因…

c++11 标准模板(STL)(std::stack)(五)

定义于头文件 <stack> template< class T, class Container std::deque<T> > class stack; std::stack 类是容器适配器&#xff0c;它给予程序员栈的功能——特别是 FILO &#xff08;先进后出&#xff09;数据结构。 该类模板表现为底层容器的包…

C++实现:学生管理系统(详细解析)

目录 1.题目要求 2.需求分析 3.整体设计 4.详细设计 主函数设计 学科科目类 主菜单 读取文件与写入文件 效果如下 添加学生信息 删除学生信息 ​编辑 修改学生信息 显示信息列表 显示学生列表 将学生列表按学号升序排列 将学生列表按平均分降序排列&#xff0c;平…

文件操作File类,OutputStream、InputStream、Reader、Writer的用法

文章目录File 类OutputStream、InputStreamInputStreamOutputStreamReader、WriterReaderWriter注意事项简单模拟实战File 类 Java标准库中提供的File类是对硬盘上的文件的抽象&#xff0c;每一个File对象代表了一个文件&#xff0c;因为文件在硬盘上存储&#xff0c;而直接操…

4月11日作业修订

A.这主要看你互斥锁锁的资源是那部分的&#xff0c;如果是进程内资源&#xff0c;则可以实现同一进程不同线程之间的互斥&#xff0c;而如果将共享内存作为互斥锁进行操作则可以实现不同进程之间的互斥。 B.这是必然的&#xff0c;加锁是为了防止数据的二义性 C.信号量同时使…

代码规范(以后会补充)

目录 为什么要规范代码 不规范的代码有什么特点 ​编辑 不规范的坏处 规范代码是什么样的 如何规范代码 1.代码中不要出现莫名其妙的数字 2.深度嵌套 3.注释 4.避免创建大函数 5.重复代码 6.变量命名 7.函数命名 8.命名时注意动词的使用 9. 常量值所有都大写 10. 避免变…

Bossies 2016:最佳开源大数据工具

导读在今年的 Bossie开源大数据工具中&#xff0c;你会发现最新最好的方法是利用大型集群进行索引、搜索、图形处理、流处理、结构化查询、分布式OLAP和机器学习&#xff0c;因为众多处理器和RAM可降低工作量级。 处理大数据可能会遇到各种各样的问题&#xff0c;目前没有任何工…

SpringMVC简介及入门

SpringMVC SpringMVC简介 一、三层架构和MVC 1、三层架构概述 &#xff08;1&#xff09;开发架构&#xff1a;一是 C/S 架构 (客户端/服务器)&#xff0c;二是B/S架构&#xff08;浏览器/服务器)。在JavaEE开发中&#xff0c;几乎全部是基于 B/S架构的开发。在B/S 架构中&…

最简单IDEA社区版构建SpringBoot项目

一、环境准备 IDEA Community Edition jdk8 maven 二、下载SpringBoot项目 https://start.spring.io/ 项目名称自己修改下。 点击ADD DEPENDENCIES&#xff0c;添加Web依赖。 下载构建好的SpringBoot项目的压缩包 三、idea中打开SpringBoot项目 使用maven加载依赖。 四、测…

【数据库原理 • 三】关系数据库标准语言SQL

前言 数据库技术是计算机科学技术中发展最快&#xff0c;应用最广的技术之一&#xff0c;它是专门研究如何科学的组织和存储数据&#xff0c;如何高效地获取和处理数据的技术。它已成为各行各业存储数据、管理信息、共享资源和决策支持的最先进&#xff0c;最常用的技术。 当前…

4.7 AOP底层源码原理

4.7.1 AOP源码 进入到这里 F8跳过assertBeanFactoryActive方法&#xff0c;因为spring它方法调用太乱了&#xff0c;如果不挑“核心”去看&#xff0c;很快你就会被绕晕&#xff0c; 那么我们怎么判断这个assertBeanFactoryActive不是核心&#xff0c;注意前面getbean方法返回…

《淘宝网店》:计算总收益

目录 一、题目 二、思路 1、当两个年份不一样的时候 &#xff08;1&#xff09;from年剩余之后的收益 &#xff08;2&#xff09;中间年份的全部收益 &#xff08;3&#xff09;to年有的收益 2、同一个年份 三、代码 详细注释版本&#xff1a; 简化注释版本&#xff…

RC滤波器

前阶段&#xff0c;因项目解干扰问题&#xff0c;和同事聊起来RC滤波。所以&#xff0c;今日借此机会&#xff0c;通过文章的方式再一次给大家简单的普及一下RC滤波的知识。 关于滤波&#xff0c;其目的还是为了尽可能多的让有用信号做到无衰减&#xff0c;无用信号衰减至近乎…

云南计算机专升本经验分享

一、概述 经验分享 越早准备越好&#xff0c;切勿过分迷信同学的学习进度。 英语(97) 在云南专升本里面&#xff0c;英语在90以上已经是不错了&#xff0c;我由于自身基础不好原因&#xff0c;导致我刚开始一度想放弃英语&#xff0c;所以对英语的学习也是极尽节俭&#xff0…

Python每日一练(20230416)

目录 1. 有效数字 &#x1f31f;&#x1f31f;&#x1f31f; 2. 二叉树的最大深度 &#x1f31f; 3. 单词搜索 &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 …

【RabbitMQ】图解RabbitMQ是如何保证消息可靠性的

目录 一、概述 1、消息可靠性 2、SpringBoot整合RabbitMQ配置文件 二、生产者---RabbitMQ服务器如何保证信息不丢失 1、confirm确认模式 1.说明 2.SpringBoot代码实现 2、return退回模式 1.说明 2.SpringBoot代码实现 三、RabbitMQ服务器如何保证消息不丢失 四、Ra…

Logstash:使用自定义正则表达式模式

有时 Logstash Grok 没有我们需要的模式。 幸运的是我们有正则表达式库&#xff1a;Oniguruma。在很多时候&#xff0c;如果 Logstash 所提供的正则表达不能满足我们的需求&#xff0c;我们选用定制自己的表达式。 定义 Logstash 是一种服务器端数据处理管道&#xff0c;可同时…

zabbix客户端配置

一、zabbix客户端配置 1.实验环境&#xff1a;关闭防火墙和安全模块 systemctl disable --now firewalld setenforce 0 2.服务端和客户端都要时间同步 yum install -y ntpdate #注意安装需要用网络源安装&#xff0c;不能用本地源 ntpda…