reactive 依赖 ref 却未发生变化

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)