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/

相关推荐
吠品7 小时前
STM32最小系统板引脚梳理与配置实操
前端·javascript·vue.js
Z小明7 小时前
第 9 章 Pinia 状态管理
vue.js
雪芽蓝域zzs7 小时前
第 13 章:对接后端真实接口(Axios 请求,替换 Mock 数据,完整业务闭环)
vue.js·echars
Aaswk8 小时前
从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记
前端·css·vue.js·html
+VX:Fegn08959 小时前
计算机毕业设计|基于springboot + vue图书借阅管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
星光开发者9 小时前
基于Spring Boot的充电桩管理系统的设计与实现-计算机毕设【课程设计】57105
vue.js·spring boot·vscode·mysql·django·php·express
ℋᙚᵐⁱᒻᵉ鲸落9 小时前
ETypeError: nameRef.value?.focus is not a functio. 设置el-input自动聚焦时报错
前端·javascript·vue.js·elementui
+VX:Fegn089519 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
老男孩游戏时光1 天前
Vue3 Composition API 最佳实践,别再乱写 setup 了
vue.js
+VX:Fegn08951 天前
计算机毕业设计|基于java+ vue共享单车信息系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计