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

相关推荐
記億揺晃着的那天5 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
Queen_sy7 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
技术钱8 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
Flash Dog9 小时前
【Vue】——路由
vue.js
羊羊小栈10 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的航空维修智能问答系统(vue+flask+AI算法)
vue.js·人工智能·python·语言模型·flask·毕业设计
喝拿铁写前端10 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
用户221520442780010 小时前
vue3组件间的通讯方式
前端·vue.js
tyro曹仓舒11 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
閞杺哋笨小孩12 小时前
Vue3 点击指令(防抖 / 节流)
前端·vue.js