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

相关推荐
Sailing8 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
aol12125 分钟前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
用户669820611298230 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js
....49244 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
前端小白19951 小时前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
鹏多多1 小时前
前端项目eslint配置选项详细解析
前端·vue.js·react.js
zhong liu bin2 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
zhangzuying10262 小时前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong9512 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手2 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue