Vue 3 的常用响应式 API 总结

在vue3.x版本中,setup函数就是vue3 组合式API的入口,换句话说就是在setup中的写的代码,就是组合式API 的写法。下面总结常用的与响应式相关的api, 帮助您在 Vue 3 中创建响应式应用程序。

  1. reactive()ref()
    • 创建响应式对象和引用。
    • 例子:const state = reactive({ count: 0 });
  2. computed()
    • 创建计算属性。
    • 例子:const doubleCount = computed(() => count.value * 2);
  3. watch()
    • 监听响应式值的变化。
    • 例子:watch(() => count.value, (newVal) => console.log(Count changed to ${newVal}));
  4. watchEffect()
    • 监听响应式值的变化并执行函数。
    • 例子:watchEffect(() => console.log(Count is ${count}));
  5. provide()inject()
    • 提供和注入组件之间的依赖项。
    • 例子:provide('count', ref(0));const count = inject('count');

更多Vue3 API请参考官网:https://cn.vuejs.org/api/

相关推荐
弹简特1 小时前
【Vue3速成】01-npm+vue初体验+vite构建vue工程化
vue.js·arcgis·npm
摸鱼小李上线了2 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js
i220818 Faiz Ul3 小时前
智慧养老平台|基于SprinBoot+vue的智慧养老平台系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·智慧养老平台
Lkstar3 小时前
Pinia 进阶:Setup Store、插件系统与状态持久化,一篇全搞懂
前端·vue.js
Nikluas3 小时前
彻底搞懂 Vue 运行时的四大核心谜题:Render、Effect、Diff 算法与 Block Tree 演进
vue.js·面试
Aolith3 小时前
手机端刷新总是 404?你需要知道 SPA Fallback 规则
前端·vue.js
zyl837213 小时前
RDKit.js + Vue3快速上手
javascript·vue.js·ecmascript
木易 士心4 小时前
Vue 事件总线(EventBus)详解
javascript·vue.js
海兰4 小时前
【实用程序】图片处理服务,前端应用 (Vue 3 + Pinia + Vite)后端服务 (Node.js + Express + Sharp)
前端·javascript·vue.js·node.js·pinia
m0_502724955 小时前
vue3生成pdf
前端·javascript·vue.js·pdf