Vue 3与Composition API:入门指南

Vue 3是Vue框架的最新版本,它引入了Composition API,这是一个全新的API,与Vue 2的Options API有很大的不同。下面是Vue 3和Composition API的一些重要变化和使用要点:

1. **Setup函数**
   - 在Vue 3中,每个页面的入口函数是`setup()`。
   - `setup()`函数中声明的变量或方法需要在`return`中返回,否则无效。

2. **响应式数据**
   - 在Vue 3中,简单声明的变量是普通变量,不具备响应式效果。
   - 若要创建响应式变量,需要使用`ref()`函数对变量进行包裹。
   - `ref()`函数需要先进行导入操作,如 `import { ref } from 'vue'`。
   - 使用`ref()`创建的变量需要`.value`才能获取具体值。
   - 对于引用数据类型,可以使用`reactive()`声明,获取值时不需要`.value`操作。
   - 不推荐用`reactive()`声明基本数据类型。

3. **箭头函数和变量调用**
   - 箭头函数可以省略`function`关键字,如 `(参数) => { 函数体 }`。
   - 在Vue 3的`setup()`中,直接使用变量名调用方法或其他变量,不需要使用`this`。

4. **注意事项**
   - 在同一个标签内不建议同时使用`v-if`和`v-for`,因为在Vue 3中,`v-if`的优先级高于`v-for`。
   - `setup()`中声明的变量或方法需要在`return`中返回,否则不会生效。
   - 尽量避免在`reactive()`中声明基本数据类型。

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

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

相关文章

统一观测丨使用 Prometheus 监控 Memcached 最佳实践

作者:啃唯 Memcached 简介 Memcached 是什么? Memcached 是一个免费开源、高性能、分布式内存对象缓存系统,支持将任意数据类型的 chunk 数据以键值对的方式存储。本质上 Memcached 是通用于所有的应用的,但最初用于存储被经常…

GD32F4标准外设库

学习目标 了解标准库来源熟悉模板搭建流程掌握在已有模板基础下进行开发学习内容 标准外设库获取 标准固件库获取我们可以从官网进行下载。 下载链接:兆易创新GigaDevice-资料下载兆易创新GD32 MCU 找到 GD32F4xx Firmware Library 这个压缩包 下载完成后,进行解压,解压…

【期末复习向】n元gram的应用

当 n 1 时, 即出现 在 第 i 位 上 的基 元 w i 独 立于 历 史 。 一元文法也 被 写 为 uni-gram 或 monogram; 当 n 2 时 , 2-gram ( bi-gram ) 被称 为 1 阶 马 尔 可夫 链; 当 n 3 时 , 3-gram( tri-gram ) 被称为 2 阶马尔 可 夫 链 &am…

2024 年科技领域的重大创新思想

智能能源网格、语音先行的伴侣应用、可编程药品、针对儿童的 AI 工具。我们向 a16z 的超过 40 位合作伙伴征询了他们认为将在 2024 年成为创新动力的重要理念。 美国的活力 21 世纪的公共安全 技术的发展不仅提升了我们的生活标准,也提高了我们对安全社会的期待。…

人工智能多模态:看、听、说,智能感知的全方位融合

导言 人工智能多模态技术是指通过整合视觉、听觉、语言等多个感知模态的信息,实现对丰富、多样化数据的理解与处理。本文将深入研究人工智能多模态的技术原理、应用场景以及对未来感知智能的影响。 1. 简介 人工智能多模态技术通过整合多个感知模态的信息&#xff…

后缀数组模板之高度数组

高度数组 1.理解相关数组的含义 rk[i]:表示原始下标为i的后缀字符串排序后对应的下标(也就是原始下标为i的后缀字符串排序后为第rk[i]小) height[i]:表示排名为i和i-1的后缀字符串的最长公共前缀的长度,注意这里的i是…

红帽认证RHCE9.0版本2023年12月的红帽9.0版本RHCSA题⽬+答案,本人已过,全国通用

红帽认证9版本2023年12月的红帽9.0版本RHCSA题⽬答案,本人已过,全国通用 需要完整的RHCSA和RHCE的考试答案的题目以及RHCE9考试的模拟环境和考试笔记教材的请添加微信,需备注来自csdn,不然通不过 1、配置⽹络设置? 将?node1?…

「Verilog学习笔记」RAM的简单实现

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 timescale 1ns/1ns module ram_mod(input clk,input rst_n,input write_en,input [7:0]write_addr,input [3:0]write_data,input read_en,input [7:0]read_addr,output reg…

关于uview-ui的u-tabs标签滑块不居中的问题

在uniapp中,打开文件 uni_modules/uview-ui/components/u-tabs/u-tabs.vue 然后在style中添加以下代码即可 /deep/ .u-tabs__wrapper__nav__line {left: 18rpx; } 之前效果图: 之后效果图: 注意,代码中的18rpx需要自行调整

语音机器人话术设计重点

要使用语音机器人,首先得要先准备一套业务的话术脚本,这个话术脚本的设计,可能直接决定了语音机器人后续的使用效果。这个脚本的编写一般不是机器人厂家直接能完成的,只有业务的使用方,他们才最了解自己的业务&#xf…

报错“找不到mfc100u.dll,程序无法继续执行”的解决方法,完美解决

在软件操作过程中,部分用户可能遇到"计算机缺失mfc140u.dll导致无法启动程序"的困扰。这种情况常常发生在启动某特定应用,特别是需要VC Redistributable支持的软件时。以下为详尽解决策略,让用户轻松应对这类技术难题,重…

LeetCode-739. 每日温度【栈 数组 单调栈】

LeetCode-739. 每日温度【栈 数组 单调栈】 题目描述:解题思路一:单调栈,顺序遍历数组维护单调递减栈,在出栈的时候得出答案。可以参考[LeetCode-503. 下一个更大元素 II【栈 数组 单调栈】](https://blog.csdn.net/qq_45934285/a…

【1】自动化测试环境配置(ARM服务器)

想要从事 or 了解自动化测试开发、装备开发的小伙伴,本专栏内容将从0到1学习如何针对ARM服务器产品进行自动化测试平台的搭建,包括:测试界面的实现(GUI)、测试项的功能实现(压力测试、接口测试、版本更新&a…

【轻松掌握】Swoole简单入门教程,让你成为PHP高手!

Swoole简单入门示例 Swoole可以让PHP 开发人员可以编写高性能的异步并发 TCP、UDP、Unix Socket、HTTP,WebSocket 服务。Swoole 可以广泛应用于互联网、移动通信、企业软件、云计算、网络游戏、物联网(IOT)、车联网、智能家居等领域。 前提 使用Composer构建项目…

企业异地组网选新型技术SD-WAN还是传统方式MPLS?

案例背景: 某集团企业决定扩大其商业版图,在国内新开了几家分公司。然而,在面对如何进行组网的问题上,陷入了纠结。究竟选择传统的MPLS(多协议标签交换)还是尝试SD-WAN(软件定义广域网这个新兴…

LeetCode 每日一题 Day 12 (Hard)|| 二维前缀和二维差分

2132. 用邮票贴满网格图 给你一个m x n的二进制矩阵 grid ,每个格子要么为 0 (空)要么为 1 (被占据)。 给你邮票的尺寸为 stampHeight x stampWidth 。我们想将邮票贴进二进制矩阵中,且满足以下 限制 和 …

PhotoMaker——通过堆叠 ID 嵌入定制逼真的人像照片

论文网址链接:https://arxiv.org/abs/2312.04461 详情网址链接:PhotoMaker 开源代码网址链接:GitHub - TencentARC/PhotoMaker: PhotoMaker 文本到图像AI生成的最新进展在根据给定文本提示合成逼真的人类照片方面取得了显着进展。然而&#…

Ubuntu20.04 配置NTP服务器

# 安装ntp服务 sudo apt-get install ntp ntpdate # 修改ntp服务配置文件 sudo vi /etc/ntp.conf # /etc/ntp.conf, configuration for ntpd; see ntp.conf(5) for help # driftfile记录时间差异 driftfile /var/lib/ntp/ntp.drift# Leap seconds definition provided by tz…

day17 二叉树的所有路径

void traversal(TreeNode* cur, vector<int>& path, vector<string>& result) { path.push_back(cur->val); // 中&#xff0c;中为什么写在这里&#xff0c;因为最后一个节点也要加入到path中 // 这才到了叶子节点 if (cur->left NULL &&a…

Java: OpenWeatherMap json Deserialization of Java Objects

openweathermap.json {"coord": {"lon": 114.0683, "lat":22.5455},"weather":[ {"id": 803, "main":"Clouds", "description":"多云", "icon":"04d"}],&quo…