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/

相关推荐
小二·2 小时前
前端监控体系完全指南:从错误捕获到用户行为分析(Vue 3 + Sentry + Web Vitals)
前端·vue.js·sentry
+VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue在线音乐播放系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
+VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue律师咨询系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
苏瞳儿5 小时前
vue2与vue3的区别
前端·javascript·vue.js
在西安放羊的牛油果6 小时前
浅谈 import.meta.env 和 process.env 的区别
前端·vue.js·node.js
weixin_584121437 小时前
vue内i18n国际化移动端引入及使用
前端·javascript·vue.js
xkxnq7 小时前
第一阶段:Vue 基础入门(第 7 天)
前端·javascript·vue.js
光头闪亮亮7 小时前
企业协同办公系统(OA)-【图标选择器】模块开发详解
前端·javascript·vue.js
pas1367 小时前
22-mini-vue props
前端·javascript·vue.js
pas1368 小时前
23-mini-vue 实现 emit 功能
前端·javascript·vue.js