Vue手表嵌套属性

Question

如何查看Vue中组件属性上的嵌套字段？ 在数据项上，代码可以正常工作，但是当我尝试观看道具时，什么也没发生。

export default {
  data: () => ({
    dataitem: {
      nested: "",
    },
  }),
  
  props: {
    propitem: {
      type: Object,
      default() {
        return {
          nested: "",
        };
      },
    },
  },

  watch: {
    // it is working
    "dataitem.nested": function(val) {
        console.log(val);
      }
    },

    // and it's not
    "propitem.nested": function(val) {
        console.log(val);
      }
    },
  },
};

Answer 1

对于这样的嵌套数据，您应该使用deep：true：

    watch: {
        dataitem: {
                    handler: function (val) {
                 console.log(val);  
                    },
                    deep: true
                },
    }