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,这个对象也是深度响应的。