考虑以下简单的应用程序：
<div id="app"> <counters :counter1="counter1" :counter2="counter2"> </counters> <button @click="onClick">Click Here</button> </div>JS：
Vue.component('counters', { template: '<h1>{{counter1.count}} {{counter2.count}}</h1>', //template: '<h1>{{count1}} {{count2}}</h1>', props: { 'counter1': { type: Object }, 'counter2': { type: Object } }, data: function() { return { 'count1': 0, 'count2': 0, } }, watch: { counter1: function(n, o) { console.log(JSON.stringify(n)); this.count1 = n.count; }, counter2: function(n, o) { console.log(JSON.stringify(n)); this.count2 = n.count; } } }); var vm = new Vue({ el: '#app', data: { counter1: { count: 0 }, counter2: { count: 0 } }, methods: { onClick: function() { this.counter1.count++; this.counter2.count++; } } });“柜台”需要两个道具counter1和counter2，两个对象。 counter1.count和counter2.count属性直接在模板中使用。 单击该按钮时，两个计数器都会加1。 这可以完美地运作，如下所示： jsfiddle
但是我想用“watch”来更新计数器。 所以我定义了反应属性count1和count2，并在counter1和counter2改变时更新它们。 出于某种原因，这不起作用。 虽然使用手表的效率较低，但我认为这两种方法都会产生相同的效果。 但可能我在这里遗漏了一些东西。 你可以解释吗？
Consider following trivial app:
<div id="app"> <counters :counter1="counter1" :counter2="counter2"> </counters> <button @click="onClick">Click Here</button> </div>JS:
Vue.component('counters', { template: '<h1>{{counter1.count}} {{counter2.count}}</h1>', //template: '<h1>{{count1}} {{count2}}</h1>', props: { 'counter1': { type: Object }, 'counter2': { type: Object } }, data: function() { return { 'count1': 0, 'count2': 0, } }, watch: { counter1: function(n, o) { console.log(JSON.stringify(n)); this.count1 = n.count; }, counter2: function(n, o) { console.log(JSON.stringify(n)); this.count2 = n.count; } } }); var vm = new Vue({ el: '#app', data: { counter1: { count: 0 }, counter2: { count: 0 } }, methods: { onClick: function() { this.counter1.count++; this.counter2.count++; } } });"counters" expects two props counter1 and counter2 , both objects. The properties counter1.count and counter2.count are used directly in template. On clicking the button both counters are incremented by one. This works flawlessly as can be seen here: jsfiddle
However I wanted to use "watch" for updating the counters. So I defined reactive properties count1 and count2 and updated them whenever counter1 and counter2 changed. For some reason this does not work. I was under impression both approaches should yield the same result although using watch is less efficient. But probably I am missing something here. Can you explain?
最满意答案
如果要监视对象的更改，则需要使用deep watcher ：
watch: { counter1: { handler(n, o) { this.count1 = n.count; }, deep: true }, counter2: { handler(n, o) { this.count2 = n.count; }, deep: true } }这是JSFiddle： https ：//jsfiddle.net/osyam658/
或者，您可以通过将属性名称包装在观察者的引号中来查看对象属性本身：
watch: { 'counter1.count': function(n, o) { this.count1 = n; }, 'counter2.count': function(n, o) { this.count2 = n; } }这是JSFiddle： https ：//jsfiddle.net/b7drpy7j/
If you want to watch for changes on an object you will need to use a deep watcher:
watch: { counter1: { handler(n, o) { this.count1 = n.count; }, deep: true }, counter2: { handler(n, o) { this.count2 = n.count; }, deep: true } }Here's the JSFiddle: https://jsfiddle.net/osyam658/
Alternatively you may watch the object property itself, by wrapping the property name in quotes in the watcher:
watch: { 'counter1.count': function(n, o) { this.count1 = n; }, 'counter2.count': function(n, o) { this.count2 = n; } }Here's the JSFiddle for that: https://jsfiddle.net/b7drpy7j/
更多推荐
发布评论