内容:
reactive是一个函数,用来将普通对象/数组包装成响应式数据使用。
实列
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
{
{ item }}
</li>
</ul>
</template>
<script>
export default {
name: 'App',
setup() {
const arr = ['a', 'b', 'c']
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem
}
}
}
</script>
数据缺失是删除了,但是试图没更新,不是响应式的!
所以可以用reactive包装数组
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
{
{ item }}
</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const arr = reactive(['a', 'b', 'c'])
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem
}
}
}
</script>