Props watch 在 Vue 组合 api 中不起作用答案

【问题标题】：Props watch not working in Vue composition apiProps watch 在 Vue 组合 api 中不起作用
【发布时间】：2021-10-04 12:42:14
【问题描述】：

我有一个 state 对象作为来自另一个组件的道具传递。我按预期收到了state。然后我将props 存储在toRef() 中以进行反应。

我想要发生的是当state 中的数据发生变化时，我希望浏览器中的数据进行更新。就像现在一样，vue 开发工具中的数据确实得到了更新，我确实看到 state 对象发生了变化，但浏览器在我手动刷新浏览器之前不会反映这些变化，这是一个不受欢迎的结果。

为什么会这样：

组件：

<template>
      <div class="show-products">
        <Product
            v-for="data in products"
            :key="data.id"
            :product="data"
        />
      </div>
 </template>

<script>
import {computed, onMounted, toRefs, watch } from "vue";
import {useStore} from "vuex";
    
    export default {
      components: {Product},
      props: {
        state: Object
      },
      setup (props) {
        const store = useStore();
        const products = computed(() => store.getters.getProducts);
    
        let stateRef = toRefs(props).state;
    
        onMounted(() => {
          store.dispatch('getProducts');
        });
    
        watch(stateRef, (currentState, prevState) => {
          if (currentState.length !== prevState.length) {
            store.dispatch('getProducts');
          }
        })
    
        return {
          Product,
          products,
        }
      }
    }
</script>

【问题讨论】：

也许你可以指定你的道具，比如this solution
不要将其设置为参考，然后观看参考。像上述解决方案建议的那样直接观看道具。

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

观察数组长度需要深度观察者，所以一定要设置deep标志：

watch(stateRef, (currentState, prevState) => {/*...*/}, { deep: true })

另外，观察者回调只接收数据引用，所以如果你只是改变原始数组（例如，通过push() 或pop()），currentState 和 prevState 参数将是相同的参考，这会破坏长度检查的差异。

一个潜在的解决方案是删除长度检查，并始终在观察者中调度 getProducts 操作：

// ProductList.vue
watch(stateRef, (currentState, prevState) => {
  store.dispatch('getProducts')
}, { deep: true })

另一个不需要深度观察者的解决方案是为状态分配一个新数组，而不是在原始数组上使用push()/pop()：

// Parent.vue
addState(newValue) {
  state.value = [ ...state.value, newValue ]
}

demo

【讨论】：