Vue3's combined API, simply put, turns the original "method" API into a "function" API.
You only need to plug the original methods directly into the setup. Isn't it very simple?
But be aware that the combined API conflicts with the traditional template-based API, so Vue3 prohibits the use of both APIs at the same time by default. If you insist on using them at the same time, an error will be thrown.
Now we begin to formally introduce Vue3’s combined API.
The first is the setup function. This function is the core of the entire combined API. All logic should be implemented in this function.
<template>
<div>
<p>{
{
message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import {
reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello Vue3!',
});
const increment = () => {
state.count++;
};
const message = toRefs(state.message);
const count = toRefs(state.count);
return {
message, // 可以直接在模板中使用message变量
count, // 可以直接在模板中使用count变量
increment, // 可以直接在模板中使用increment函数
};
},
};
</script>
In the above code, we use the reactive function to create a responsive object, which contains two attributes, count and message. Then we convert these two attributes into ordinary variables through the toRefs function, so that they can be used directly in the template. Finally, we return these three variables together with a function so that they can be used directly in the template. Is not it simple?
Let's take a look at how computed properties should be implemented. In the composed API, computed properties need to be returned as a function instead of being directly defined in methods like the template-based API. The return value of this function is the value of the computed property.
<template>
<div>
<p>{
{
message }}</p>
<button @click="increment">Increment</button>
<p>{
{
reversedMessage }}</p>
</div>
</template>
<script>
import {
reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello Vue3!',
});
const increment = () => {
state.count++;
};
const reversedMessage = () => {
return state.message.split('').reverse().join('');
};
const message = toRefs(state.message);
const count = toRefs(state.count);
const reversedMessageRefs = toRefs(reversedMessage()); // 注意这里需要使用toRefs将函数转换成普通变量才能使用！否则会报错！
return {
message, // 可以直接在模板中使用message变量
count, // 可以直接在模板中使用count变量
reversedMessageRefs,
increment,
};
},
};
</script>
In the above code, we define a reversedMessagefunction as a computed property. This function returns messagethe reverse string of the attribute. Notice that when we use toRefsa function to reversedMessageconvert a function into an ordinary variable, we need to pass in the return value of the function, not the function itself. Otherwise, an error will be reported.
Next is the implementation of the watch listener. In the combined API, we need to use watchfunctions to listen for changes in a property. When the property value changes, watchthe callback function defined in the function will be triggered.
<template>
<div>
<p>{
{
message }}</p>
<button @click="increment">Increment</button>
<p>{
{
reversedMessage }}</p>
</div>
</template>
<script>
import {
reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello Vue3!',
});
const increment = () => {
state.count++;
};
const reversedMessage = () => {
return state.message.split('').reverse().join('');
};
const {
message, count, reversedMessageRefs, increment } = watch(() => {
console.log('message changed!');
return {
message, count };
}, newVal => {
console.log('message:', newVal.message);
console.log('count:', newVal.count);
});
return {
message, // 可以直接在模板中使用message变量
count, // 可以直接在模板中使用count变量
reversedMessageRefs, // 可以直接在模板中使用reversedMessage变量（注意这里需要使用reversedMessageRefs而不是reversedMessage）！注意这里需要使用toRefs将函数转换成普通变量才能使用！否则会报错！
increment, // 可以直接在模板中使用increment函数
};
},
};
</script>
In the above code, we use the watch function to monitor changes in the message attribute. When the message attribute changes, the callback function will be triggered. The first parameter of the callback function is a function, which will return the value we need to monitor. In this example, we return the message property.