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>

为什么此计算出的属性显示变化（Vue）

0 个答案: