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/

相关推荐
pepedd86443 分钟前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
前端缘梦1 小时前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试
HWL56791 小时前
pnpm(Performant npm)的安装
前端·vue.js·npm·node.js
柯南95272 小时前
Vue 3 reactive.ts 源码理解
vue.js
柯南95272 小时前
Vue 3 Ref 源码解析
vue.js
小高0072 小时前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js
JayceM3 小时前
Vue中v-show与v-if的区别
前端·javascript·vue.js
HWL56793 小时前
“preinstall“: “npx only-allow pnpm“
运维·服务器·前端·javascript·vue.js
秃头小傻蛋4 小时前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
复苏季风4 小时前
vite里把markdown文件渲染成vue组件
vue.js·markdown