vue computed与watch实战

2019-06-26

总结, 当需要监视一个异步返回的值, 使用watch, 使用computed时会报错, 但是好像程序也能正常运行

image.png

data(){
  form: null
},
mounted(){
  axios.get('xxxx').then(res => this.form =res) // 这个时候的form就是非空了
},
computed:{ 
  newForm(){
      return this.form.a // 就是这个会报错, 不能依赖异步来的a属性,只能依赖this.form
  },
}
watch:{
    'form.a': { // 注意点. 这里不需要写this. 
      //  ps: 监视对象数组的变动, 可以监视数组的length属性, 比如this.list.length.但如果监视this.list的话,可能需要deep:true
        handler(){
          this.newForm = this.form.a
        },
      // deep: true
    }
}

,写到这里的时候, 想顺便写一下以前遇到的异步props的坑, 但是因为学业不精, 同时代码早就忘记了, 所以百度了一下,
https://juejin.im/post/5c4fc3356fb9a049a97a1a48
我不确定我遇到的异步props是不是这个问题, 但还是贴出来, 因为百度搜索到有用的, 正确的文章太少了.不能错过.
文章中有个图:

image.png

image.png