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

 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,怎么能够先传递数据,在运行计算里的

回答:

用watch替换 computed

clipboard.png

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

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

回答:

这个是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;
    });
 }

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注