javascript - VueJS : Why this data property doesn't updated on click event in Dev Tools?

Question

在下面的代码中，getWidth 事件处理程序(在 methods 对象中定义)更新了 data.width 属性。随着它的更新，变量 width 应该在 VueJS 的 Chrome 插件中实时显示。

但是，该实时更新不会显示在 Vue DevTools 中。我不确定代码是否有问题或我做错了什么。附加组件不是问题，因为我也在 Firefox 中进行了测试。

HTML

<div id="app">
  <p :style="{width: 200 + 'px'}" class="box">{{msg}}</p>
  <button v-on:click="getWidth">New Width</button>
</div>

JS

new Vue({
  el: '#app',
  data: {
    msg: 'Test Message',
    mywidth: ''
  },
  methods: { 
    getWidth: function(){
      this.mywidth = 20 * 2;
    }
  }
})

Answer 1

发生这种情况是因为您实际上并没有在任何地方使用您的 mywidth 数据属性。

Vue DevTools仅在代码中访问时更新其对 Vue 组件数据属性的引用，而不是在设置时更新。

只需在某处使用该数据属性(例如将 {{ mywidth }} 放入模板中)，它将在 Vue DevTools 扩展中更新。