在Vue3中实现子组件正确监听ref声明的变量

阅读提示：本文共计约4378个文字，预计阅读时间需要大约12分钟，由作者编程是学些什么东西编辑整理创作于2023年11月06日00时55分31秒。

内容：

在Vue 3中，通过ref声明变量并传递给子组件时，子组件可能无法直接监听到该变量的变化。为了解决这个问题，我们可以使用以下方法来实现子组件的正确监听。

1. 在父组件中使用provide/inject API将ref变量注入到子组件中。在父组件的setup函数中定义一个provide对象，其中包含需要注入的ref变量。然后，在子组件的setup函数中通过inject选项来接收这个provide对象。

// 父组件
<script lang="js">
import { provide } from 'vue';

export default {
  data() {
    return {
      myRef: '初始值'
    };
  },
  setup() {
    provide('myRef', this.myRef);
  }
};
</script>

// 子组件
<script lang="js">
import { inject } from 'vue';

export default {
  setup() {
    const myRef = inject('myRef');
    // 在这里可以监听myRef的变化
  }
};
</script>

2. 如果子组件需要更复杂的逻辑来处理ref变量的变化，可以使用watchEffect函数进行监听。watchEffect函数会监听其作用域内所有响应式依赖的变化，并在每次变化时执行提供的回调函数。

// 父组件
<script lang="js">
import { ref } from 'vue';

export default {
  data() {
    return {
      myRef: '初始值'
    };
  },
  setup() {
    const myRef = ref('初始值');
    // 在这里可以改变myRef的值
  }
};
</script>

// 子组件
<script lang="js">
import { watchEffect } from 'vue';

export default {
  setup() {
    watchEffect(() => {
      console.log('myRef发生了变化', this.myRef);
    });
  }
};
</script>

通过以上方法，子组件可以实现对ref变量的正确监听，并根据需要进行相应的处理。