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

为了深入一些, 就百度了一下, 发现https://segmentfault.com/a/1190000015890245

image.png

如我划线的地方, 作者的意思是, 父子组件的生命周期是同步执行的, 我觉得不太可能, 简单测试了一个, 结果并不是同步的.
不禁感叹, 百度文章, 误人子弟