解决vue2.0 wacth深度监听新值与旧值相同问题

原创

于 2022-04-18 16:16:39 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了在Vue.js中，如何避免对象监听时新值与旧值相同的尴尬问题。通过介绍使用计算属性进行深拷贝的方法，解决了对象深度监听的问题，确保了正确获取新旧值差异。

<template>
  <div>
    {
  
  {Obj}}
    {
  
  {a}}
    <button @click="Obj.a=2,a=2">点击改变</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Obj: {
        a: 1,
      },
      a: 111,
    };
  },

  watch: {
    Obj: {
      handler: function (newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true,
    },
  },
  //   watch: {
  //     a: function (newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //     },
  //   },
};
</script>

<style lang="scss" scoped>
</style>

在上述代码中我们可以看到这是我们正常写的深度监听，但是你会发现当你监听简单数据类型的时候可以获取到旧值与新值，但是当我们监听对象的时候就出问题了问题如下(新值与旧值相同)