如何在对象中使用 Vue watch答案

【问题标题】：how to use Vue watch in objects如何在对象中使用 Vue watch
【发布时间】：2019-07-22 07:57:40
【问题描述】：

我对@987654325@ 很陌生，并试图弄清楚为什么我的手表在作为对象访问时没有触发。我看到this 线程，但我不清楚我的问题是否相同。以下是我的简化示例（完整示例使用数组获得了更多属性和属性

<div id="app">
  <input type="text" v-model.lazy="userInfo.name"> {{userInfo.name}}
</div>

new Vue({
  el: "#app",
  data: {
  userInfo: {
            name: ''
  }

  },
  methods: {

  },
  watch: {
    userInfo : {
            name(oldVal, newVal){
            console.log(oldVal +" " + newVal)
      },
    },
     deep: true
  }
})

链接到JSFiddle

【问题讨论】：

vuejs.org/v2/api/#watch
Vue.js - How to properly watch for nested data的可能重复
把观察者改成这样}，深：真}`
感谢@Majid。那么文档很有意义。如果你想把它作为答案，我会接受答案。如果可能的话，你能分解一下它在文档中所说的内容吗，因为它很难理解 [vuejs.org/v2/api/#watch](watch)

标签： javascript vue.js

【解决方案1】：

把观察者改成这样：

new Vue({
  el: "#app",
  data: {
    userInfo: {
      name: "null"
    }
  },
  methods: {},
  watch: {
    "userInfo.name": function(oldVal, newVal) {
      console.log(oldVal + " " + newVal);
    }
  }
});

请参阅同一 here 的文档。检查最后一个示例。

【讨论】：

【解决方案2】：

下面是一个简短的例子：

new Vue({
  el: "#app",
  data: {
  userInfo: {
       name: 'null'
    }
  },
  computed: {
    name() {
      return this.userInfo.name;
    }
  },
  methods: {

  },
  watch: {
    name(newVal, oldVal) {
      alert(newVal);
      alert(oldVal);
    }
  },
})

【讨论】：