reactive 中的数据依赖 ref 中的数据, 当 ref 发生变化的时候, reactive 不会发生变化
import { ref, reactive } from 'vue'
const indexRef = ref([1, 2, 3])
const arr = [1, 2, 3, 4, 5]
const data = reactive({
data: indexRef.value.map(i => arr[i])
})
console.log(data.data) // [2, 3, 4]
setTimeout(() => {
indexRef.value = [0] // 改变 ref 的值, reactive 依赖 ref, 却未发生变化
console.log(data.data) // [2, 3, 4]
}, 100)
因为此时的 data.data 是根据 indexRef 生成的固定好的数据, 已经失去其响应性了
解决办法, 写成函数的形式, 每次使用, 都重新计算一下
import { ref, reactive } from 'vue'
const indexRef = ref([1, 2, 3])
const arr = [1, 2, 3, 4, 5]
const data = reactive({
data: () => indexRef.value.map(i => arr[i])
})
console.log(data.data()) // [2, 3, 4]
setTimeout(() => {
indexRef.value = [0]
console.log(data.data()) // [1]
}, 100)
当然, 也可以使用计算属性的方式
import { ref, computed } from 'vue'
const indexRef = ref([1, 2, 3])
const arr = [1, 2, 3, 4, 5]
const data = computed(() => indexRef.value.map(i => arr[i]))
console.log(data) // [2, 3, 4]
setTimeout(() => {
indexRef.value = [0]
console.log(data) // [1]
}, 100)