Vue3, 复杂的watch实现,求解. 第二次悬赏提问了

Question

目的,监听数组中, 某个不确定位置(自定义位置)的元素,发生改变. 自定义以外的其它元素改变 不管
请用下面测试和修改, 多谢
另外,假如用户没有自定义要监听的位置,说明可以不去监听, 好象这个功能也不好实现

<template>

<div>
    <p>数组arr:{{arr}}</p>
    <p>监听arr数组,哪个位置的元素发生改变:<input type="text" v-model="position"></p>
    <p>arr数组,{{position}}位置的元素值更改为:<input type="text" v-model="arr[position]"></p>
    <p>监听情况报告:{{info}}</p>
</div>

</template>
<script>
import { reactive,  watch, toRefs } from 'vue'
export default {
  name:'Debug',
  setup(props){
    const data =reactive({
      arr:['a','b','c','d','e'],
      position:'', // 数组中的哪个元素
      info:'', // 提示信息
    })
    // 下面出错, 
    // 下面如果监听data.arr能正常工作, 但目的是要监听arr数组中的某个不确定的元素,不是要监听所有元素
    watch(data.arr[data.position],(newValue)=>{
      console.log('发生了变化')
      data.info =  '变化为新值:'+ newValue
       //.....//
    })
    // 下面这样改也不行
    // watch(()=>{data.arr[data.position]},(newValue)=>{
    //   console.log('发生了变化')
    //   data.info =  '变化为新值:'+ newValue
    // })

    return {
      ...toRefs(data),
    }
  }
}
</script>

Answer 1

<template>

  <div>
    <p>数组arr:{{arr}}</p>
    <p>监听arr数组,哪个位置的元素发生改变:<input
        type="text"
        v-model="position"
      ></p>
    <p>arr数组,{{position}}位置的元素值更改为:<input
        type="text"
        v-model="arr[position]"
      ></p>
    <p>监听情况报告:{{info}}</p>
  </div>

</template>
<script>
import { reactive, watch, toRefs } from "vue";
export default {
  name: "Debug",
  setup(props) {
    const data = reactive({
      arr: ["a", "b", "c", "d", "e"],
      position: "", // 数组中的哪个元素
      info: "", // 提示信息
    });
    // 下面出错,
    // 下面如果监听data.arr能正常工作, 但目的是要监听arr数组中的某个不确定的元素,不是要监听所有元素
    // watch(data.arr[data.position], (newValue) => {
    //   console.log("发生了变化");
    //   data.info = "变化为新值:" + newValue;
    //   //.....//
    // });
    // 下面这样改也不行
    watch(
      () => data.arr[data.position],
      (newValue) => {
        console.log("发生了变化");
        data.info = "变化为新值:" + newValue;
      }
    );

  

    return {
      ...toRefs(data),
    };
  },
};
</script>