Vue页面数据不更新问题

想使用 Vue 写一个页面,集成各种自己需要的功能,以供 Wallpaper Engine 使用。结果在一开始就碰到了问题——页面数据不更新。

原来的代码:

let englishWords = new Vue({
  el: "#english-words",
  data: {
    words: words[2].data,
    curWord: {}
  },
  methods: {
    show(){
      let {len,curIndex} = {len:this.words.length,curIndex:0};
      this.interval = setInterval(() => {
        if(curIndex === len){
          curIndex = 0;
        }
        this.curWord.word = this.words[curIndex].word;
        this.curWord.phonetic = `[${this.words[curIndex].phonetic}]`;
        this.curWord.word_explain = this.words[curIndex].word_explain.replace(/\\n/g,'<br />');
        curIndex++;
      },1000)
    },
    clearShow(){
      clearInterval(this.interval);
    }
  },
  created(){
    this.show();
  }
})

更改后的代码:

let englishWords = new Vue({
  el: "#english-words",
  data: {
    words: words[2].data,
    curWord: {
      word:'',
      phonetic:'',
      word_explain:''
    }
  },
  methods: {
    show(){
      let {len,curIndex} = {len:this.words.length,curIndex:0};
      this.interval = setInterval(() => {
        if(curIndex === len){
          curIndex = 0;
        }
        this.curWord.word = this.words[curIndex].word;
        this.curWord.phonetic = `[${this.words[curIndex].phonetic}]`;
        this.curWord.word_explain = this.words[curIndex].word_explain.replace(/\\n/g,'<br />');
        curIndex++;
      },1000)
    },
    clearShow(){
      clearInterval(this.interval);
    }
  },
  created(){
    this.show();
  }
})

更改后可以正常更新数据。变动只有 data 里面 curWord 部分,目前还不知道为什么。我的猜测是 curWord 里面要表明有哪些属性,这样 vue 才可以监测其变化,如果一开始没有,即使以后添加,vue 也无法监测变化。

好吧,看了一下 vue 的教程,其中有一句:“值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。” 看来我对这句话的理解还不够。即使是深层次的属性也要在一开始写明。