Skip to content
Vue 3 定时刷新响应式数据 logo

Vue 3 定时刷新响应式数据

在 Vue 3 的 <script setup> 语法中,使用 setInterval 定期执行函数并更新 ref 响应式变量,确保数据在模板中自动更新。

SKILL.md

Full skill instructions

Vue 3 定时刷新响应式数据

在 Vue 3 的 <script setup> 语法中,使用 setInterval 定期执行函数并更新 ref 响应式变量,确保数据在模板中自动更新。

Prompt

Role & Objective

Vue 3 前端开发助手。帮助用户在 <script setup> 中实现定时任务(如 Token 刷新)并保持数据响应式。

Operational Rules & Constraints

  1. 必须使用 <script setup> 语法。
  2. 使用 ref 定义响应式变量。
  3. 使用 setInterval 设置定时器,在回调中通过 .value 更新变量值。
  4. 在 return 语句中返回 ref 对象本身,而不是 .value,以保持响应性并避免 vue/​no-ref-as-operand 错误。
  5. 确保从 'vue' 导入 ref。

Anti-Patterns

  • 不要在 return 中解构 ref 或返回 .value,这会丢失响应性。
  • 除非有明确的计算逻辑,否则不要为了解决 ref 错误而强行使用 computed。

Interaction Workflow

  1. 询问用户具体的获取数据函数(如 getToken)和刷新间隔。
  2. 提供完整的 <script setup> 代码示例。

Triggers

  • vue 定时执行代码
  • script setup setInterval
  • vue 定时刷新 token
  • vue ref 保持最新状态

More Productivity & Planning skills

brainstorming logo
Productivity & Planning

brainstorming

Structured design dialogue that validates ideas before implementation begins.

295.4K 385.7K
View
ui-ux-pro-max logo
Productivity & Planning

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K
View
writing-plans logo
Productivity & Planning

writing-plans

Comprehensive implementation plans for multi-step tasks, breaking down specs into bite-sized, testable steps.

295.4K 268K
View
using-superpowers logo
Productivity & Planning

using-superpowers

Introduction to the obra skills system with mandatory skill invocation rules and best practices.

295.4K 259.8K
View
executing-plans logo
Productivity & Planning

executing-plans

Execute a written implementation plan with critical review and task checkpoints.

295.4K 229.1K
View
dispatching-parallel-agents logo
Productivity & Planning

dispatching-parallel-agents

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K
View
using-git-worktrees logo
Productivity & Planning

using-git-worktrees

Isolated git worktrees with smart directory selection and safety verification.

295.4K 205.2K
View
webapp-testing logo
Productivity & Planning

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

179.7K 170.6K
View
content-strategy logo
Productivity & Planning

content-strategy

Plan searchable and shareable content that drives traffic, builds authority, and generates leads.

53.3K 150.9K
View
repo-intake-and-plan logo
Productivity & Planning

repo-intake-and-plan

README-first repository scanner that extracts commands and classifies reproduction candidates without executing them.

497 139.6K
View
marketing-ideas logo
Productivity & Planning

marketing-ideas

Brainstorm and prioritize marketing strategies tailored to your SaaS stage, budget, and goals.

53.3K 137.2K
View
site-architecture logo
Productivity & Planning

site-architecture

Plan and optimize your website's page hierarchy, navigation, URL structure, and internal linking.

53.3K 112.8K
View

Productivity AI tools

Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View
SaveDay logo
Productivity

SaveDay

Capture, organize, and utilize your knowledge effortlessly.

Free
View
A
Productivity

Any Summary

Instant Summaries of Audio & Video Interviews with AnySummary

Freemium
View
M
Productivity

Map This

Transform PDFs into engaging mind maps.

Freemium
View
ChatPDF logo
Productivity

ChatPDF

Chat with any PDF instantly

Free
View
I
Productivity

intellisay

Create an optimal daily plan using your voice

Paid
View
A
Productivity

Aurora AI

A productivity platform to centralize organizational knowledge and workflows with contextual AI assistance.

Paid
View
AskYourPDF logo
Productivity

AskYourPDF

AskYourPDF Pricing Plans: Tailored to Your Needs

Free
View