17.Vue生命周期使用不当造成的Bug

[CruxF]

update与beforeUpdate生命周期函数

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

根据上面的概念，我们可以知道，如果写了如下的代码，页面必定会卡死，程序陷入无限循环之中

beforeUpdate() {
  this.$nextTick(() => {
    this.getFoptions()
  })
}
methods: {
  getFoptions() {
    let status = this.firstValue
    if(status == 'ecommerce') {
      this.showCode = true
      let arr = [{
        value: 'a',
        label: '综合电商'
      }, {
        value: 'b',
        label: '返利平台'
      }, {
        value: 'c',
        label: '电商导购'
      }]
      for(var i = 0; i < arr.length; i++) {
        console.log(arr[i].value)
        this.soptions.push({
          value: arr[i].value,
          label: arr[i].label
        })
      }
    }
    if(status == 'join') {
      this.showCode = true
    }
  }
}
}

那么如何来改变这一个线状呢？其实很简单，利用watch即可

watch: {
  firstValue() {
    this.getFoptions()
  }
},
methods: {
  getFoptions() {
    let status = this.firstValue
    if(status == 'ecommerce') {
      this.showCode = true
      let arr = [{
        value: 'a',
        label: '综合电商'
      }, {
        value: 'b',
        label: '返利平台'
      }, {
        value: 'c',
        label: '电商导购'
      }]
      for(var i = 0; i < arr.length; i++) {
        console.log(arr[i].value)
        this.soptions.push({
          value: arr[i].value,
          label: arr[i].label
        })
      }
    }
    if(status == 'join') {
      this.showCode = true
    }
  }
}
}