【composition API】ref

142 阅读1分钟

ref接收一个值并返回一个具有响应的和可变的对象。ref对象有一个.value指向内部值的属性。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

通过ref()返回的对象,对它进行的读写都需要通过.value来操作。在setup方法中return返回这个对象在template模板插值中绑定不需要通过.value展示。

<template>
    <div>{{ count }}</div>
</template>
<script>
import { ref } from 'vue'
export default {
    setup() {
        const count = ref(0)
        return {
            count
        }
    }
 }
</script/>

如果一个对象赋值给ref的value,这个对象也是深度响应的。