javascript - 为什么这个计算属性显示变化（Vue）

Question

我正在使用一些按钮更改属性。当我单击按钮时，数据会在 UI 中更新，甚至是. computed1，但不是console.log("computed1"). 我认为这是因为我正在更改它的属性而不是整个对象。但是如果没有触发，为什么 UI 会更新？你能给我解释一下吗？我在文档中找不到这样的东西。

代码： https ://jsfiddle.net/1hr7cy5d/

var example1 = new Vue({
  el: '#example',
  data: function() {
    return {
      item: {
        aaa: 'aaa',
        bbb: 'bbb',
        ccc: 'ccc'
      }
    }
  },
  computed: {
    computed1: function() {
      console.log("computed1");
      let item = this.item
      return item;
    },
  },
  methods: {
    method1() {
      console.log("method1")
      this.item.aaa = 'xxxx';
    },
    method2() {
      console.log("method2")
      this.item["bbb"] = 'yyyyy';
    },
    method3() {
      console.log("method3")
      this.$set(this.item, "ccc", "zzzzz")
    },
    method4() {},
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
  <button @click="method1()">method1</button>
  <button @click="method2()">method2</button>
  <button @click="method3()">method3</button>
  <button @click="method4()">method4</button>
  <pre>{{item}}</pre>
  <pre>{{computed1}}</pre>
</div>

标签： javascriptvuejs2computed-properties