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/

相关推荐
千里码aicood8 分钟前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191142 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
橙某人5 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
冲刺逆向6 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
西木之斤6 小时前
vue和react实例简单对比
vue.js·react.js
慧一居士6 小时前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js
晴殇i6 小时前
解锁Web Workers:解决90%前端性能瓶颈的利器
前端·javascript·vue.js
Sheldon一蓑烟雨任平生7 小时前
Vue3 透传 Attributes
vue.js·vue3·透传attributes·禁用attributes继承·深层组件继承
慧一居士8 小时前
在Vue项目中平滑地引入HTML文件
前端·vue.js