vue computed先执行，mounted后执行了，怎么解决

Question

 mounted: function(){
                this.$http.get('js/common1.json').then((response) => {
                    console.log(1);
                    vm.$data.imgS=response.data;
                });
            }
            
        

computed: {
            filteredStyle: function () {
                console.log(2);
                console.log(this.imgS);
                return this.imgS;
                }
          }
          
          运行后先是打印2，再打印出1，怎么能够先传递数据，在运行计算里的

Answer 1

用watch替换 computed

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

https://cn.vuejs.org/v2/guide/computed.html#观察-Watchers

Answer 2

这个是vue设计中最重要一点：生命钩子。不同钩子的执行顺序不一样，这样方便设计页面时执行不同的操作。

就像你的ajax请求可以放在beforeRouteEnter||created里面，异步请求先发出去，然后等待完成后渲染，提高用户体验。

created () {
      this.fetchData()
  },
  watch: {
// 如果路由有变化，会再次执行该方法
'$route': 'fetchData'
  },
fetchData(){
    this.$http.get('js/common1.json').then((response) => {
        console.log(1);
        vm.$data.imgS=response.data;
    });
 }

Answer 3

一开始的时候是会这样的，但是计算属性是根据相关依赖进行缓存的，当你的值发生变化的时候,计算属性里面的那个方法也会跟随着变化的