uni-app computed快于onload问题

uni-app computed快于onload问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

很奇怪computed 快于 onload 然后computed就不再更新了两个相同的页面其中一个坏了？

具体是这样:

onload 获取到e.id，this.id=e.id

computed里写的

xx(){  
console.log(this.id)  
  if(this.id){  
   return '有id'  
  }else{  
   return '无id'  
  }  
}

预期结果：

id变化时computed也更新

实际结果：

id变化时computed不更新，且computed中的console快于onload的console


![Image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20231215/705ec630a9f9dbdacc0c762a63fa6dd7.png)

### bug描述：

很奇怪computed 快于 onload 然后computed就不再更新了两个相同的页面其中一个坏了？

具体是这样:

onload 获取到e.id，this.id=e.id

computed里写的

```javascript
xx(){  
console.log(this.id)  
  if(this.id){  
   return '有id'  
  }else{  
   return '无id'  
  }  
}

更多关于uni-app computed快于onload问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

发现和watch有关系

更多关于uni-app computed快于onload问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，computed 属性和 onLoad 生命周期钩子的执行顺序和时机是不同的，因此可能会遇到 computed 快于 onLoad 的情况。以下是问题的原因和解决方案：

原因

  1. computed 的执行时机：

    • computed 属性是基于依赖的响应式数据进行计算的值，当依赖的数据发生变化时，computed 会自动重新计算。
    • 在页面初始化时，computed 会在模板渲染之前执行，以确保模板中使用的数据是最新的。

  2. onLoad 的执行时机：

    • onLoad 是页面的生命周期钩子，在页面加载时触发，通常用于初始化数据或发起异步请求。
    • onLoad 的执行发生在页面实例化之后，但可能在 computed 之后执行。

  3. 问题场景：

    • 如果在 computed 中依赖了 onLoad 中初始化的数据，而 onLoad 还未执行，computed 可能会使用默认值或空值进行计算，导致结果不符合预期。

解决方案

  1. 确保数据初始化顺序：

    • 将需要在 computed 中使用的数据提前初始化，避免依赖 onLoad 中的数据。
    • 例如，在 data 中为相关变量设置默认值。
    export default {
  data() {
    return {
      list: [], // 提前初始化
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.active); // 确保 list 已初始化
    },
  },
  onLoad() {
    this.list = this.fetchData(); // 在 onLoad 中获取数据
  },
  methods: {
    fetchData() {
      // 模拟异步请求
      return [{ active: true }, { active: false }];
    },
  },
};

  2. 使用 watch 监听数据变化：

    • 如果 computed 依赖的数据需要从 onLoad 中获取，可以使用 watch 监听数据变化，并在数据更新后执行相关逻辑。
    export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.active);
    },
  },
  watch: {
    list(newVal) {
      console.log('list 更新了', newVal);
      // 在这里执行相关逻辑
    },
  },
  onLoad() {
    this.list = this.fetchData();
  },
  methods: {
    fetchData() {
      return [{ active: true }, { active: false }];
    },
  },
};

  3. 使用 mounted 替代 onLoad：

    • 如果数据初始化不需要依赖页面参数，可以将逻辑放在 mounted 中，确保在组件挂载后执行。
    export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.active);
    },
  },
  mounted() {
    this.list = this.fetchData();
  },
  methods: {
    fetchData() {
      return [{ active: true }, { active: false }];
    },
  },
};

  4. 异步数据处理的优化：

    • 如果 onLoad 中有异步操作（如网络请求），可以在 computed 中增加判断逻辑，确保数据存在后再进行计算。
    export default {
  data() {
    return {
      list: null, // 初始化为 null
    };
  },
  computed: {
    filteredList() {
      if (!this.list) return []; // 如果数据未加载，返回空数组
      return this.list.filter(item => item.active);
    },
  },
  onLoad() {
    this.fetchData().then(data => {
      this.list = data;
    });
  },
  methods: {
    fetchData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([{ active: true }, { active: false }]);
        }, 1000);
      });
    },
  },
};
回到顶部