vue 异步渲染

最新推荐文章于 2024-08-17 16:43:34 发布

沙西

最新推荐文章于 2024-08-17 16:43:34 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签： vue js vue.js

本文链接：https://blog.csdn.net/ruko9805/article/details/116277981

版权

本文介绍了在Vue中如何避免使用定时器进行异步渲染，提供了两种不同的解决方案：一种是无需定时器的方法，另一种是利用Vue的$set和nextTick进行异步渲染。通过实例代码展示了如何优化异步渲染，以提高性能并遵循最佳实践。

摘要由CSDN通过智能技术生成

vue 异步渲染

昨天遇到一个事，项目里之前的同事留下了一个定时器，在ajax请求后，接了个定时器，异步调用，保证数据全部接受后再渲染数据，然后被组长看到了，把我们说了一顿，叫我们把前端代码里遇到的所有定时器全部改掉。那改成什么呢，怎么改呢。我也是个菜鸟，说实话，我定时器都
没怎么用过，平时ajax请求，除了数据特别多的情况，基本没用到什么需要重新渲染的场景，于是我又开始了面向百度编程。找到了几种解决方法，晚上写篇博客，记录一下。

问题代码

第一种，不需要定时器的方法

 /**
         * 选中
         */
//这是一段列表选中，添加到选中列表的方法 
//下面说说这段代码的问题
    chooseInfo(row) {
   
      let self = this
      for (let item of self.materialTableDate) {
   
        if (row.id === item.id) {
   
          self.$message.error('不能重复选择')
          return
        }
      }
        //每次选中都需要调用两个接口 而且重复调用 ，在数量不大的情况下 应该抽取出来，写成list 这样减少数据库读写
      if (isNotNull(row.supplierId)) {
   
        getSupplier(row.supplierId, true).then(data => {
   
          var supplier = data.result
          self.supplierName = supplier.name
        })
      }

      let param = {
   
        code: consts.CODE_226,
        decode: row.code
      }
      getCodeName(param).then(data => {
   
        var codeLisy = data.result
        self.unitName = codeLisy[0].decodeValue
      })
      let temp = {
   
        id: row.id,
        materialCode: row.code,
        materialId: row.id,
        stockQuantity: null,
        name: row.name,
        supplierName: this.supplierName,
        specModel: row.code,
        unitName: null,
        shelfLife: row.shelfLife,
        grossWeight: row.grossWeight,
        netWeight: row.netWeight,
        productDate: null,
        expiringDate: null,
        remark: null,
        warehouseId: null
      }
      //判断是否为第一条的原因是第一条是有添加按钮的，所有在初始化时，没有数据的时候，给第一条添加了空数据
      if (!self.materialTableDate[0].id || self.materialTableDate[0].id === 'undefined') {
   
        setTimeout(() => {