伙计们。我正在阅读vue.js的威严的书2.我对书中的一个例子感到困惑。
我的问题是 - 为什么upvote按钮可以修改vue实例的数据，而vue实例则显示了pre tag中显示的，而喜欢的按钮不能？
据说，最爱是通过V-Bind指令绑定的，这是数据绑定的一种方式，意味着孩子无法与父母同步数据。但是故事是如何更新的？两种数据绑定像V模型一样？
这是代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div v-cloak id="app">
<div class="container">
<h1>Let's hear some stories!</h1>
<ul class="list-group">
<story v-for="story in stories" :story="story" :favorite="favorite"></story>
</ul>
<pre>{{ $data }}</pre>
</div>
</div>
</body>
<template id="story-template">
<li class="list-group-item">
{{ story.writer }} said "{{ story.plot }}"
Story upvotes {{ story.upvotes }}.
<button v-show="!story.voted" @click="upvote" class="btn btn-default">Upvote</button>
<button v-show="!isFavorite" @click="setFavorite" class="btn btn-primary">Favorite</button>
</li>
</template>
<script src="../../vue.js"></script>
<script type="text/javascript">
Vue.component('story', {
template: "#story-template",
props: ['story', 'favorite'],
methods: {
upvote: function () {
this.story.upvotes += 1;
this.story.voted = true;
},
setFavorite: function () {
this.favorite = this.story;
}
},
computed: {
isFavorite: function () {
return this.story === this.favorite
}
}
});
window.app = new Vue({
el: '#app',
data: {
stories: [
{
plot: 'My horse is amazing.',
writer: 'Mr. Weebl',
upvotes: 28,
voted: false
},
{
plot: 'Narwhals invented Shish Kebab.',
writer: 'Mr. Weebl',
upvotes: 8,
voted: false
},
{
plot: 'The dark side of the Force is stronger.',
writer: 'Darth Vader',
upvotes: 49,
voted: false
},
{
plot: 'One does not simply walk into Mordor',
writer: 'Boromir',
upvotes: 74,
voted: false
}
],
favorite: {}
}
})
</script>
</html>
这与对象在JavaScript中的工作方式有关。存储在变量中时，先生，您可以参考该对象。因此，当您将其传递时，实际上您只会传递参考。这意味着更改对象（而不是覆盖！），在所有地方都在变化。
您的示例中发生的事情是您修改故事对象。您会更改其键，但不要覆盖对象本身。看到该应用程序对故事对象具有相同的引用。显示了更改。
但是，对于最喜欢的情况。您将通过喜欢的对象的引用。但是，一旦单击"喜欢的"按钮。它交换了变量以引用故事，但仅在本地。该应用程序仍然包含旧参考。这是因为您仅传递引用本身，而不是父对象。
这是像Vuex这样的州经理来放置的地方。