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/

相关推荐
前端小趴菜0518 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer33 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码36 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克1 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee1012 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒293 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树4 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin4 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑5 小时前
axios无感刷新token
前端·javascript·vue.js