VUE3之Composition API（一）

reactive API

使用reactive包裹数据使之成为响应式的：

<template>
    <div>
        <h2>当前计数: {{state.counter}}</h2>
        <button @click="increment">+1</button>
    </div>
</template>

<script>
import {reactive} from 'vue';
    export default {
        setup() {
            const state = reactive({
                counter:100
            });
            // 局部函数
            const increment=()=>{
                state.counter++;
                console.log("button click",state.counter);
            }
            return {
                state,
                increment
            }
        }
    }
</script>

ref API

reactive API的弊端是，必须传入一个对象或者数组，对于number类型的例如100等不能进行响应式。ref API可以做到这一点，在使用上稍有不同：

<template>
    <div>
        home page
        <!-- 当在template中使用ref对象时，会自动解包counter->value -->
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
    </div>
</template>

<script>
import { ref } from 'vue';
    export default {
        setup() {
            // counter变成了ref可响应式的引用
            let counter = ref(100);
            
            const increment=()=>{
                // 但是在这里不会自动解包
                counter.value++;
                console.log("button click",counter.value);
            }
            return {
                counter,
                increment
            }
        }
    }
</script>

此处counter变成了一个ref对象，在代码中需要使用counter.value来获取值，但是在template中，vue3已经自动完成了解包的功能。这种解包是浅层的解包：

<template>
    <div>
        home page
        <!-- 当在template中使用ref对象时，会自动解包counter->value -->
        <h2>当前计数: {{counter}}</h2>
        <!-- ref解包是浅层解包 -->
        <h2>当前计数{{info.counter.value}}</h2>
        <!-- 用reactive包裹就可以解包 -->
        <h2>当前计数{{reactiveInfo.counter}}</h2>
        <button @click="increment">+1</button>
    </div>
</template>

<script>
import { reactive, ref } from 'vue';
    export default {
        setup() {
            // counter变成了ref可响应式的引用
            let counter = ref(100);
            const info ={counter};
            const reactiveInfo = reactive({
                counter
            })
            
            const increment=()=>{
                // 但是在这里不会自动解包
                counter.value++;
                console.log("button click",counter.value);
            }
            return {
                counter,
                info,
                reactiveInfo,
                increment
            }
        }
    }
</script>