Javascript 将子组件检查状态从父组件更改为同步失败

请运行已完成的演示：

让myCheckbox=Vue.component（'my-checkbox'{
模板：`
{{checked}}
`,
道具：[“选中”]，
方法：{
更改（）{
这是.emit（'change'，event.target.checked）；
}
}
})
新Vue({
el:“#应用程序”，
数据：{
核对：对，
计数：1
},
方法：{
更改（已检查）{
这个，伯爵++
this.checked=isChecked
如果（this.count%2==0）{
//this.checked=！isChecked
设置超时（（）=>{
this.checked=！isChecked
}, 10);
}
}
},
组成部分：{
我的复选框
}
})

span{
背景：粉红色；
}

什么时候
{{count}}即使你的支票也会失败

勾选复选框时，（本机DOM）复选框会通过添加

v

（勾选符号）来更改其外观

当勾号发生时，它会发出

change

事件

请注意，此时，Vue中的

checked

属性尚未更改。当“某人”拾取

change

事件并相应地设置

选中的
时，将发生此更改。下面第4行就是这么做的：

methods: {                      // 1
  change(isChecked) {           // 2
    this.count++;               // 3
    this.checked = isChecked    // 4

现在，当
this.count
为偶数时，在没有设置超时的代码中，您可以立即将
this.checked
设置为其先前的值

因此，由于Vue发现执行方法后，
this.checked
没有改变，所以Vue知道没有更新（没有重新绘制）要做。这就是为什么勾选的符号（
v
以上）仍然（错误地）勾选：Vue没有重新绘制组件

作为证明，请尝试下面的演示。请注意，
更新的
生命周期处理程序从不执行：


让myCheckbox=Vue.component（'my-checkbox'{
模板：
`
{{checked}}
`,
道具：[“选中”]，
方法：{
更改（）{
这是.emit（'change'，event.target.checked）；
}
},
//未执行，因为“checked”从未更改（始终为true）
updated（）{console.log（'my-checkbox updated'）}
})
新Vue({
el:“#应用程序”，
数据：{
核对：对，
计数：1
},
方法：{
更改（已检查）{
这个.count++；
this.checked=isChecked
如果（this.count%2==0）{
this.checked=！isChecked
}
}
},
组成部分：{
我的复选框
}
})
span{
背景：粉红色；
}

什么时候
{{count}}即使你的支票也会失败选中：{{checked}}-它永远不会更改，始终为true，因此我的复选框永远不必更新/重新绘制。