vue data复杂结构怎么用 watch

在 Vue 中，我们可以使用 `watch` 选项来监听 `data` 数据的变化。如果 `data` 是一个简单的数据类型，那么 `watch` 也比较简单，直接监听 `data` 的变化即可。

如果 `data` 是一个复杂的数据类型，比如对象或数组，那么我们需要使用深度监听来监听其属性的变化。以下是一个示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, world!",
      list: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" }
      ]
    };
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`);
    },
    list: {
      handler: function(newValue, oldValue) {
        console.log(`list changed from ${oldValue} to ${newValue}`);
      },
      deep: true
    }
  }
};
</script>

在上面的示例中，我们定义了 `message` 和 `list` 两个数据属性，并使用 `watch` 来监听它们的变化。对于 `message`，我们只需要简单的监听即可；而对于 `list`，我们需要使用 `deep` 选项来进行深度监听，以便在其属性变化时能够触发回调函数。

需要注意的是，在数据结构非常复杂的情况下，深度监听会带来性能问题。因此，最好还是尽可能避免使用深度监听，或者使用其他方式来提高性能。