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/

相关推荐
Lee川26 分钟前
从“DOM 操作”到“数据驱动”:Vue 如何重塑前端开发思维
前端·vue.js
sibylyue1 小时前
Typescritpt、ES6
前端·javascript·vue.js
sxq1 小时前
Flow Render: 像调用异步函数一样渲染 UI 组件
vue.js·react.js
小小程序员mono1 小时前
JS 与 Vue Router 导航方式对比
开发语言·javascript·vue.js
李剑一1 小时前
解决 Cesium 网络卡顿!5 分钟加载天地图,内网也能流畅用,附完整代码
前端·vue.js·cesium
肉肉不吃 肉2 小时前
Vue Router 路由模式
前端·javascript·vue.js
北寻北爱2 小时前
Vue-Router
前端·javascript·vue.js
天天向上10242 小时前
vue 页面内实现el-table和div自动滚动
前端·javascript·vue.js
wing983 小时前
用 AI 实现图片懒加载,这也太简单了!
前端·vue.js·图片资源
前端小菜鸟也有人起3 小时前
Vue2父子组件通信方法总结
javascript·vue.js·ecmascript