响应式数据

声明

<script setup>
import { ref } from 'vue'
const show = ref(true)
// 任意类型
const list = ref([])
// 对象
const obj = reactive({})

</script>

修改

<script setup>
import { ref } from 'vue'

show.value = false

list.value.push(1)

obj.name = '张三'
</script>

项目里配置了自动引入,import { ref } from 'vue'可以不写。

解包

<script setup>
import { ref, toRefs } from 'vue'

const data = ref({
show: true,
list: [],
})

const { show, list } = toRefs(data)

show = false

list.push(1)

</script>