vue3的CompositionAPI是啥怎么使用

Vue 3中的Composition API是一组新的API,它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与Vue 2中的Options API(如data、methods、computed等选项)相比,Composition API提供了一种更加灵活和可组合的方式来编写组件逻辑。

下面是Composition API的一些主要方法和使用示例:

setup:这个函数在组件实例初始化之前被调用,可以在这里声明数据、计算属性、方法、生命周期钩子等。

javascript

export default {

setup() {

let name = "张三";

function greet() {

console.log(`Hello, ${name}!`);

}

return { name, greet }; // 必须在这里return,模板中才能使用

}

}

在模板中,你可以使用{{ name }}来显示name的值,以及<button @click="greet">Greet</button>来触发greet方法。

  1. ref和toRefs:ref用于定义一个基本类型的响应式数据,而toRefs则可以将响应式数据包装成一个普通的对象,使得在模板中可以直接使用对象的属性。

javascript

import { ref, toRefs } from 'vue';

export default {

setup() {

const count = ref(0);

const state = toRefs({

name: '张三',

age: 30

});

return { count, ...state };

}

}

computed:用于定义计算属性,只有当依赖的数据发生变化时才会重新计算。

javascript

import { ref, computed } from 'vue';

export default {

setup() {

const base = ref(1);

const doubled = computed(() => base.value * 2);

return { base, doubled };

}

}

watch和watchEffect:用于监听数据变化。watch可以监听特定的响应式数据,而watchEffect则会自动收集依赖并执行回调函数。

javascript

import { ref, watch, watchEffect } from 'vue';

export default {

setup() {

const count = ref(0);

watch(count, (newVal, oldVal) => {

console.log(`Count changed from {oldVal} to {newVal}`);

});

watchEffect(() => {

console.log(`Count is ${count.value}`);

});

return { count };

}

}

生命周期钩子:虽然Composition API本身没有直接提供生命周期钩子的方法,但你可以通过onMounted、onUpdated等函数在setup中使用它们。

javascript

import { onMounted, onUpdated } from 'vue';

export default {

setup() {

onMounted(() => {

console.log('Component mounted');

});

onUpdated(() => {

console.log('Component updated');

});

}

}

在使用Composition API时,需要注意的是,由于setup函数在组件创建之前执行,因此其中的this关键字不会指向当前组件实例,而是undefined。如果需要与父组件通信,可以通过setup函数的参数来获取props和context。

Composition API提供了一种更为灵活和可复用的方式来组织Vue组件的逻辑,尤其适用于大型和复杂的Vue应用。

相关推荐
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端10 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿10 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉10 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan201513 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation13 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|13 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js