响应式

除了一开始创建 HTML，Vue 还监控 data 对象的变化，并在数据变化时更新 DOM 。

<p>自从你打开这个页面，已经过了 {{seconds}} 秒</p>
<button v-bind:disabled="buttonDisabled" onclick="console.info('debug')">Button</button>

new Vue({
  el: '#app',
  data() {
    return {
      seconds: 0,
      buttonDisabled: true
    }
  },
  created() {
    setInterval(() => {
      this.seconds++;
      this.buttonDisabled = !this.buttonDisabled;
    }, 1000);
  }
});

有 3 种情况 Vue 监测不到 data 数据的变化，从而导致『响应式』失效，对于这 3 种情况我们在《专项问题》笔记中讲解、展示并提供解决方案。