首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

理解 Vue 的 setup 应用程序钩子

编程知识
2024年09月30日 11:31

title: 理解 Vue 的 setup 应用程序钩子
date: 2024/9/30
updated: 2024/9/30
author: cmdragon

excerpt:
摘要:本文详细介绍了Vue 3中setup函数的应用,包括其概念、特性、使用方法及重要性。setup函数作为组合API的核心,在组件实例化前被调用,用于设置响应式状态、计算属性、方法和生命周期钩子,支持在SSR和CSR中使用。

categories:

  • 前端开发

tags:

  • Vue
  • setup
  • 组件
  • 响应式
  • 计算属性
  • 生命周期
  • 方法

image
image

扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

在 Vue 3 中,setup 函数是组合 API 的核心部分,它为开发者提供了一种新的方式来组织和使用组件的逻辑。在 setup 函数内,可以定义组件的响应式状态、计算属性、方法以及生命周期钩子等

目录

  1. 什么是 setup 函数?
  2. setup 函数的特性
  3. 如何使用 setup 函数
  4. 总结

什么是 setup 函数?

setup 是一个特殊的生命周期函数,在组件实例化之前调用,用于设置组件的响应式状态、计算属性、方法和其他功能。当组件被创建时,Vue 会先调用 setup 函数,并将其返回的对象作为组件的响应式属性。

作用范围

  • 服务器端和客户端setup 可以在服务器端渲染(SSR)和客户端渲染(CSR)中使用。

setup 函数的特性

  1. 提前执行setup 在组件实例创建之前调用。
  2. 返回值:可以返回一个对象,这些值将作为组件的属性和方法可以在模板中使用。
  3. 访问 props 和 contextsetup 函数接收两个参数:propscontext(包含 attrs, slots, 和 emit)。
  4. 支持响应式 API:可以直接使用 Vue 的响应式 API,比如 refreactive

如何使用 setup 函数

1. 创建响应式状态

使用 refreactive 进行状态管理:

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

2. 定义计算属性

计算属性可以通过 computed 来定义:

<template>
  <div>
    <h1>{{ doubledCount }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const doubledCount = computed(() => count.value * 2);
</script>

3. 定义方法

可以在 setup 中定义方法,并将其返回:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');

const changeMessage = () => {
  message.value = 'Message Changed!';
};
</script>

4. 使用生命周期钩子

可以在 setup 中使用生命周期钩子,比如 onMountedonUnmounted

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

// 使用 onMounted 生命周期钩子
onMounted(() => {
  console.log('Component is mounted!');
});

// 使用 onUnmounted 生命周期钩子
onUnmounted(() => {
  console.log('Component is unmounted!');
});
</script>

总结

setup 函数是 Vue 3 中一个非常强大的功能,允许开发者以更灵活和模块化的方式组织组件逻辑。通过合理使用 setup 函数及其提供的 API,你可以提高组件之间的可重用性和可维护性。

关键要点

  1. 响应式状态管理:使用 refreactive 轻松管理状态。
  2. 计算属性和方法:通过 computed 定义计算属性以及在 setup 中定义方法。
  3. 生命周期钩子:可以在 setup 中使用各种生命周期钩子来处理组件的生命周期。
  4. 优化性能setup 函数的使用能够在组件之间更好地组织逻辑,提高性能和可维护性。

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:理解 Vue 的 setup 应用程序钩子 | cmdragon's Blog

往期文章归档:

From:https://www.cnblogs.com/Amd794/p/18441608
本文地址: http://www.shuzixingkong.net/article/2415
0评论
提交 加载更多评论
其他文章 记一次Razor Pages无法编译问题及解决
解决方案写在前面:更新Visual Studio及相关组件,本人版本自17.8.0更新至17.11.4 缘起于公司的一个业务接口,在有一些信息需要在应用内嵌的webview中展示,信息不少,涉及的前端技术不复杂,但是拼字符串太罗嗦,所以想到了添加一个Razor页面,所以,常规逻辑,在服务上注册&#3
记一次Razor Pages无法编译问题及解决 记一次Razor Pages无法编译问题及解决 记一次Razor Pages无法编译问题及解决
PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(三)
作为“贴代码”力推的一个CRUD实践项目PasteTemplate,在对现有的3个项目进行实战后效果非常舒服!下面就针对PasteForm为啥我愿称为最佳CRUD做一些回答: 哪里可以下载这个PasteForm的项目案例 目前“贴代码”对外使用PasteForm的项目有&quot;贴Builder(
PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(三) PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(三) PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(三)
.NET 开源 EF Core 批处理扩展工具,真好用
前言 Entity Framework Core(EF Core)作为 .NET 生态系统中受欢迎的对象关系映射器(ORM),其轻量级、可扩展性和支持多个数据库引擎而备受青睐。 本文将介绍一款.NET 的开源 EF Core 批处理扩展工具,它极大地提升了数据处理的效率和性能。来看看如何轻松集成到我
.NET 开源 EF Core 批处理扩展工具,真好用 .NET 开源 EF Core 批处理扩展工具,真好用 .NET 开源 EF Core 批处理扩展工具,真好用
从零开始学机器学习——逻辑回归
首先给大家介绍一个很好用的学习地址:https://cloudstudio.net/columns 在之前的学习中,我们学习了直线线性回归与多项式回归,我们今天的主题则是逻辑回归,我记得在前面有讲解过这两个回归的区别,那么今天我们主要看下逻辑回归有哪些特征需要我们识别的。 逻辑回归 逻辑回归主要用于
从零开始学机器学习——逻辑回归 从零开始学机器学习——逻辑回归 从零开始学机器学习——逻辑回归
Js运算符(操作符)
算数运算符 a = 1 + 1 // 2 a = 10 - 5 // 5 a = 10 / 5 // 2 a = 10 / 0 // js中除以0不会报错,结果是Infinity a = 2*2 // 4 a = 2**2 // a = 10 % 4 // 取余,2 js中算数运算,除了字符串的加法
linux内核调试痛点之函数参数抓捕记
1.linux内核调试工具crash并不能直接显示函数参数,而这个对调试又非常重要 下面是工作中一个实际的问题,我们的进程hang在如下一个内核栈中了,通过栈回溯可知是打开了一个nfs3的网盘文件或者目录,已知客户机器的NAS盘不可访问了,只要访问就会hang住,但我们的进程理论上是不会访问该NAS
linux内核调试痛点之函数参数抓捕记 linux内核调试痛点之函数参数抓捕记 linux内核调试痛点之函数参数抓捕记
五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操)
五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操) @目录五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操)1. ActiveRecord 模式2. ActiveRec
五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操) 五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操) 五,MyBatis-Plus 当中的 “ActiveRecord模式”和“SimpleQuery工具类”(详细实操)
只写后台管理的前端要怎么提升自己
本人写了五年的后台管理。每次面试前就会头疼,因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过,但是站在现在的时间点回想以前,发现有很多事情可以做的更好,于是有了这篇文章。 本文首发在 https://juejin.cn/post/7360528073631318027 写优雅的代码 一道面试题 大