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

相关推荐
用户26124583401612 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川2 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术3 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再4 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了4 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂4 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷4 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401615 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
慧一居士5 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku5 小时前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js