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/

相关推荐
jktantan6 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
小大宇9 小时前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
小大宇11 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
软件技术NINI11 小时前
基于SpringBoot和Vue的摇滚乐鉴赏网站
vue.js·spring boot·后端·spring·html·毕业设计·毕设
计算机毕设定制辅导-无忧学长12 小时前
《基于物品协同过滤的闲置书换购微信小程序设计开发》
java·vue.js·spring boot·微信小程序·uniapp·闲置书换购微信小程序·物品协同过滤算法
Dwzun12 小时前
基于SpringBoot3+Vue3的油莎豆种植管理系统
java·前端·vue.js·spring boot·后端·python·计算机网络
她说可以呀21 小时前
Vue插槽
前端·javascript·vue.js
qq_448011161 天前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
志尊宝1 天前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
兰亭妙微UI设计公司1 天前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js