vue3.0新增了组合式API。今天想分享一下这个组合式API的使用场景以及使用方法。javascript
使用场景：当咱们的组件功能比较多的时候，对于相同逻辑的关注点的相关代码会比较分散，可能分布在生命周期钩子、watch、computed等，会增长咱们对组件的理解以及维护。vue
解决办法：咱们能够在组件中配置setup，将这些代码封装在一块儿。在执行setup时，组件是没有实例化的，因此没有this，也不能访问组件本地的状态、计算属性和方法。setup的返回内容能够暴露给组件的计算属性、方法、生命周期钩子、模板使用。经过ref建立一个响应式引用，使响应式变量在任何地方起做用。经过on+生命周期名字，能够在setup中注册生命周期钩子；能够添加watch、computed等。java
<template>
<div class="hello">
<!-- count 是setup中返回的count，能够使用在组件的模板中，并支持响应式 -->
<h1>{{count}}</h1>
<!-- 在组件的模板中，能够使用setup返回的add方法 -->
<button @click="add()">add count</button>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import { onMounted, ref, watch } from 'vue';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return {
}
},
setup(){
let count = ref(0);
let add = ()=>{
count.value++;
}
let sum = ()=>{
return 1+2;
}
watch(count,(val, old)=>{ // 在setup中添加watch
console.log(count.value);
console.log(old);
console.log(val);
})
onMounted(add);// 在setup中注册生命周期钩子
return {
//setup 返回的变量和方法能够在当前组件的计算属性、方法、生命周期钩子以及模板中使用
count,
add,
sum
}
},
created(){
// setup 返回的方法能够用在生命周期钩子中
console.log(this.sum());
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
</style>