Vue 3 的 setup 函数使用及避坑指南

Vue 3 的 setup 函数是 Vue 3 Composition API 的核心部分,它使得代码的复用和组织变得更加简单。

  1. setup 的基本用法:
    setup 函数是在组件实例被创建之后,但是在其被挂载之前被调用的。setup 函数接收两个参数:props 和 context。props 是父组件传递给当前组件的属性,而 context 是一个包含三个属性的对象:attrs、slots、emit。

例如:

<script>
export default {props: {msg: String},setup(props, context) {console.log(props.msg) // 打印从父组件传递下来的msg属性console.log(context.attrs) // 打印非prop属性}
}
</script>
  1. setup 与生命周期:
    Vue 3 提供了几个新的函数,如 onMounted、onUpdated 和 onUnmounted,这些函数在 setup 函数内部使用,用来处理组件生命周期。例如,onMounted 函数会在组件被挂载到 DOM 后调用。

例如:

<script>
import { onMounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component is mounted!')})}
}
</script>
  1. setup 中定义的响应式数据或函数如何使用:
    在 setup 函数中,你可以使用 ref 和 reactive 函数来创建响应式数据。这些数据可以在模板中直接使用。而在 setup 函数中定义的函数,可以在模板中作为事件处理函数。

例如:

<template><button @click="increment">{{ count }}</button>
</template><script>
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {count.value++}return { count, increment }}
}
</script>

容易出现的坑:

  1. 不要在 setup 函数外部访问响应式数据。因为 setup 函数在组件初始化阶段执行,此时还没有响应式数据。
  2. 在 setup 函数中,所有的数据和方法都应该通过 return 返回,否则无法在模板中使用。
  3. 注意生命周期钩子的使用,错误的使用可能会导致意想不到的问题。例如,如果在 onUnmounted 钩子中访问了已经被销毁的实例属性,可能会引发错误。
  4. 注意 props 的更新。由于 props 是响应式的,如果你在 setup 函数中对 props 进行了复制操作,那么你的复制将不会更新。

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

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

相关文章

使用 Python进行自动备份文件

文件备份对数据保护至关重要&#xff0c;让我们使用 shutil 模块创建一个简单的备份脚本 这段代码的作用就是将指定源目录中的所有文件备份到目标备份目录中&#xff0c;并在备份目录中创建带有时间戳的子目录&#xff0c;通过定期运行这段代码&#xff0c;可以实现自动备份文…

省去烦恼!轻松实现一台电脑登录多个微信号的秘诀揭秘!

你知道如何在同一台电脑上登录多个微信号&#xff0c;并实现聚合聊天吗&#xff1f; 今天&#xff0c;我将分享一个多微管理神器——个微管理系统&#xff0c;帮助你解决这一问题&#xff01; 1、多号同时登录&#xff0c;聚合聊天 无论你有多少个微信号&#xff0c;都可以一…

【React】React 的useDebugValue作用是什么,怎么使用

React的useDebugValue是一个Hook,它主要用于在开发过程中帮助开发者调试自定义Hook。它的主要作用是将自定义Hook中的某些值暴露给React开发工具(如React DevTools),以便于开发者在调试时能够更直观地查看和理解组件的状态。 useDebugValue的作用: 调试自定义Hook:useDe…

安全测试框架

安全测试框架是一套系统化的方法和工具集合&#xff0c;旨在帮助测试团队在软件或系统的开发过程中进行安全相关的测试。以下是关于安全测试框架的详细解释&#xff0c;包括其主要内容和特点&#xff1a; 一、安全测试框架的定义 安全测试框架是指在进行安全测试时&#xff0…

[Day 9] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的主要應用場景 區塊鏈技術自2008年首次由中本聰提出以來&#xff0c;已經迅速發展並應用於各個領域。它的去中心化、透明和不可篡改等特性使其在金融、供應鏈、醫療健康、物聯網、數字身份等多個方面展現出巨大的潛力。本文將深入探討區塊鏈的主要應用場景&#xff0c;…

2024年【安全生产监管人员】试题及解析及安全生产监管人员考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产监管人员试题及解析是安全生产模拟考试一点通总题库中生成的一套安全生产监管人员考试试题&#xff0c;安全生产模拟考试一点通上安全生产监管人员作业手机同步练习。2024年【安全生产监管人员】试题及解析及…

智慧停车场定位导航系统的实现与优化

随着城市车辆数量的激增&#xff0c;大型停车场的运营挑战日益严峻。维小帮停车场导航定位系统通过集成先进的室内定位技术和大数据分析&#xff0c;为停车场提供了一套高效、便捷的导航定位服务方案&#xff0c;有效解决了停车难、找车难、管理难等问题。 一、系统核心功能的…

Zookeeper: 配置参数解读

Zookeeper中的配置文件zoo.cfg中参数含义解读如下&#xff1a; tickTime&#xff1a;通信心跳时间&#xff0c;Zookeeper服务器与客户端心跳时间&#xff0c;单位毫秒。 initLimit: LF初始通信时限 Leader和Follower初始连接时能容忍的最多心跳数。 syncLimit: LF同步通信时…

dos下命令行批量修改文件名

1、文件夹下执行获取所有文件名: dir *.* /b > AAA.txt 2、复制aaa.txt文件内容&#xff0c;在excel 下加工成这种格式&#xff08;多行脚本&#xff09;&#xff1a; rename IMG_1561.JPG 20240614会考_005.jpg 3、执行多行脚本

STM32学习和实践笔记(35):内部温度传感器实验

1.STM32F1内部温度传感器介绍 1.1 STM32F1内部温度传感器简介 STM32F1内部含有一个温度传感器&#xff0c;可用来测量 &#xff08;STM32芯片的&#xff09;CPU 及周围的温度(TA)。&#xff08;实际并不用来测周围的温度&#xff0c;仅用来测试CPU的温度&#xff09; 此温度传…

以keepalived为例说明程序不能正常被gdb调试的原因

现象 通过gdb att $keepalived_pid发起对当前运行keepalived的调试&#xff1b; 在放行keepalived继续执行后&#xff0c;想通过CtrlC按键中断执行&#xff0c;观察下被调试程序的当前内部状态&#xff0c; 但是&#xff0c;在终端输入CtrlC后&#xff0c;导致keepalived被调…

通过语言大模型来学习LLM和LMM(四)

一、大模型学习 新的东西&#xff0c;学习的东西就是多&#xff0c;而且最简单最基础的都需要学习&#xff0c;仿佛一点基础知识都要细嚼慢咽&#xff0c;刨根问底&#xff0c;再加上一顿云里雾里的吹嘘&#xff0c;迷迷糊糊的感觉高大上。其实就是那么一回事。再过一段时日&a…

【Mongodb-02】springboot整合mongodb(详解)

springBoot整和mongodb 一&#xff0c;springboot整合mongodb1&#xff0c;依赖加入2&#xff0c;yml文件配置3&#xff0c;_class 字段过滤(可选)4&#xff0c;实体类定义5&#xff0c;索引创建6&#xff0c;数据插入6.1&#xff0c;insert方式6.2&#xff0c;使用save的方式实…

awtk如何实现键盘和输入框

1.创建默认键盘 新建窗体-keyboard 2.新建编辑框 3.设置编辑框属性 4.点击编辑框即可打开默认键盘&#xff0c;若想修改键盘样式可以在默认键盘修改或自定义键盘 5.获取输入字符 widget_t* wifi_edit widget_lookup(win, "edit", TRUE);//获取单行编辑控件 widge…

解决Windows中端口占用导致服务启动失败

解决Windows中端口占用导致服务启动失败 在cmd窗口中使用netstat -ano | findstr "3306"来查看哪个线程占用了3306端口。 下面的图片里面表示一个pid为5196的进程占用了端口 接着可以在cmd窗口中使用tasklist | findstr "5196" 根据pid查询进程名称 通过…

0-1 构建用户画像数仓

目录 前言 一、用户画像概述 1.1 用户画像 1.2 用户标签 1.3 用户群组 二、建设标签和标签体系 2.1 标签体系 2.1.1 统计类标签 2.1.2 规则类标签 2.1.3 机器学习挖掘类标签 2.2 标签建设流程 2.2.1 需求收集与分析 2.2.2 产出标签需求文档 2.2.3 标签的开发 H…

ffmpeg封装和解封装介绍-(8)解封装和封装重构

头文件&#xff1a; xformat.h #pragma once/// 封装和解封装基类#include <mutex> struct AVFormatContext; struct AVCodecParameters; struct AVPacket; struct XRational {int num; ///< Numeratorint den; ///< Denominator }; class XFormat { public:/// &…

安装docker+mysql的一些坑

yum -y install docker 提示missing signature(docker客户端太老了) 参考这里 https://www.8a.hk/news/content/8235.html 卸载旧的docker sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotat…

【数据结构(邓俊辉)学习笔记】图03——拓扑排序

文章目录 0. 概述1. 零入度算法1. 1 拓扑排序1. 2 算法 2. 零出度算法2.1 算法2.2 实现2.3. 复杂度 0. 概述 学习下拓扑排序 1. 零入度算法 1. 1 拓扑排序 首先理解下拓扑排序 其实老师经常干这事&#xff0c;如编讲义&#xff0c;将已经知道的知识点串起来变成讲课序列。那…

比特币全节点搭建

比特币全节点搭建 参考: https://www.cnblogs.com/elvi/p/10203927.html