Question

我有一个绑定到Vue实例的布尔JavaScript变量。当我更改该布尔值时，Vue看不到更改。但是，当我从一开始就在Vue中声明布尔值时，Vue确实会看到更改。为什么会有所不同？

在我的示例中，Vue没有看到someBoolean发生变化。它确实看到vueBool发生了变化。单击该按钮应翻转两个布尔变量。

JavaScript：

let someBoolean = true;

let vInstance = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    vueBool: true,
    vSomeBoolean: someBoolean
  }
})

document.getElementById("btnBooleanToggle").addEventListener("click", function(){
    somBoolean = !someBoolean;
    vInstance.vueBool = !vInstance.vueBool;
})

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <p>
  Boolean declared inside Vue: {{vueBool}}
  </p>
  <p>
  Boolean declared outside Vue: {{vSomeBoolean}}
  </p>

  <button id="btnBooleanToggle">
  Toggle booleans
  </button>
</div>

Link to jsfiddle

Answer 1

这就是Vue的工作原理。 Vue为实例内部的数据创建访问器属性，以便它知道数据何时更改。 Vue无法设置任何内容来跟踪其系统外部任何内容的数据。

当变量在vue之外更改时，Vue为什么没有看到布尔变量更改？

1 个答案: