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应用。

相关推荐
rui锐rui31 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
前端wchen2 小时前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js
程序员秘密基地3 小时前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
江城开朗的豌豆4 小时前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
Hexene...15 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情15 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w90892585915 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端