真正理解vue的watch

1.watch的基础用法

<template>
  <div id="app">
    <div class="test1">
      test1+{{ content }} <button @click="handleChangeContent">改变内容</button>
    </div>
    <div class="test2">test2+{{ setContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "初始值",
      setContent: "",
    };
  },

  watch: {
    content(value) {
      this.setContent = value;
    },
  },

  methods: {
    handleChangeContent() {
      this.content = "改变值";
    },
  },
};
</script>

2.handler+immediate用法（立即执行）

理解为没渲染之前执行了watch的操作，也就是不只在改变之后执行，而是进入vue页面created默认执行一次watch改变

<template>
  <div id="app">
    <div class="test1">
      test1+{{ content }} <button @click="handleChangeContent">改变内容</button>
    </div>
    <div class="test2">test2+{{ setContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "初始值",
      setContent: "",
    };
  },

  watch: {
    content: {
      handler: "handleSetMessage",
      immediate: true,
    },
  },

  methods: {
    handleChangeContent() {
      this.content = "改变值";
    },

    handleSetMessage(value) {
      this.setContent = value;
    },
  },
};
</script>

3.handler+deep

watch没法监听对象深度超过一层的对象改变

<template>
  <div id="app">
    <div class="test1">
      test1+{{ content.one.two }}
      <button @click="handleChangeContent">改变内容</button>
    </div>
    <div class="test2">test2+{{ setContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        one: {
          two: "初始值",
        },
      },
      setContent: "",
    };
  },

  watch: {
    content: {
      handler: "handleSetMessage",
      deep: true,
    },
  },

  methods: {
    handleChangeContent() {
      this.content.one.two = "改变第二层的值";
    },

    handleSetMessage(value) {
      this.setContent = value.one.two;
    },
  },
};
</script>

4.handler+deep省性能用法

直接监听深层数据对象的指定值，这样防止了deep的深层遍历

<template>
  <div id="app">
    <div class="test1">
      test1+{{ content.one.two }}
      <button @click="handleChangeContent">改变内容</button>
    </div>
    <div class="test2">test2+{{ setContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        one: {
          two: "初始值",
        },
      },
      setContent: "",
    };
  },

  watch: {
    "content.one.two": {
      handler: "handleSetMessage",
    },
  },

  methods: {
    handleChangeContent() {
      this.content.one.two = "改变第二层的值";
    },

    handleSetMessage(value) {
      this.setContent = value;
    },
  },
};
</script>