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/

相关推荐
谁点的猪脚饭13 分钟前
vue2 element-ui 中 el-radio 单选框点击事件失效问题
vue.js·elementui·vue2
苹果酱05671 小时前
redis系列--1.redis是什么
java·vue.js·spring boot·mysql·课程设计
琦遇2 小时前
Vue3使用AntvG6写拓扑图,可添加修改删除节点和边
前端·javascript·vue.js
南囝coding2 小时前
做Docx预览,一定要做这个神库!!
前端·vue.js·面试
樊小肆2 小时前
Vue3 在线 PDF 编辑 1.0 保存、下载
前端·vue.js
樊小肆2 小时前
Vue3 在线 PDF 编辑 1.0 文字、圆、矩形批注
前端·vue.js
李大3 小时前
uniapp怎么进行代码混淆
前端·javascript·vue.js
柚子8163 小时前
用transform给vue加点功能
前端·vue.js·vite
wordbaby3 小时前
Vue 图片重试指令 (v-img-retry) 增强:集成 visibility 控制,实现无缝加载过渡
前端·vue.js·http
ZhZhXuan3 小时前
micro-app环境下,子系统加载vxe-table样式被吞解决方法
vue.js