vue3_02ref操作简单类型

vue3中提供了ref()函数可以把数据转换为响应式数据。

<template>
    <div>
        {{ num }}
    </div>
    <button @click="add">这是按钮</button>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
export default defineComponent({
    setup() {
        // let num = 10//这样定义的数据不是双向绑定的，数据更新无法触发视图更新
        let num: Ref<number> = ref(20)//这样定义num就成为了vue内部定义的响应式对象，.value才能真正拿到数据
        //可以通过Ref<类型>来规定类型或者通过ref<类型>ref<number>,不写编译器会自动识别
        const add = () => {
            num.value++//在JS中要操作这种响应式数据需要.value,但是模板上不需要，vue在编译模板的时候已经用.value获取了
            console.log(num);

        }
        return {
            num,
            add
        }
    }

}) 
</script>

<style lang="scss" scoped>

</style>