我正在使用一些按钮更改属性。当我单击按钮时,数据将在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>