vue之列表渲染，数组更新检测

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

对象更改检测注意事项：
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

实例：
点击选中标签，再次点击取消选中，提交时把最终选中标签的值存入数组传给后端

image.png

//原理：通过给一个对象添加key value作为标识   isActive: 'selected'
data() {
  return {
    skinTypeList:[
      {
        key: '干燥',
        value: 'DRY'
       },
       {
        key: '松弛',
        value: 'RELAXATION'
       },
       {
        key: '色斑',
        value: 'SPLASH'
       }
    ],
    btnDisable: false //提交时做个标识
  }
}
//点击时执行方法如下：
  selectTag(index){
                let item = this.skinTypeList[index]
                let oldArr = {
                    key: item.key,
                    value: item.value
                }
                let newArr = {
                    key: item.key,
                    value: item.value,
                    isActive: 'selected'
                }
                if(item.isActive === 'selected'){
                    this.skinTypeList.splice(index,1,oldArr) //如标签为选中状态,再次点击时重新构造数组, 取消选中
                    let arrIndex = this.saveTagList.indexOf(item.value) //找当前item.value在saveTagList中的位置，并删掉
                    this.saveTagList.splice(arrIndex,1) // 重新构造saveTagList数组
                } else {
                    this.skinTypeList.splice(index,1,newArr)//如点击前是不选中状态,那么点击时重新构造数组,为选中状态
                    this.saveTagList.push(item.value)  // 并把item.value push进数组
                }
            }

//提交时执行方法如下：
//提交时前置手机号和年龄不能为空
submitFace(){
if(this.ageNum && this.phoneNum){
                    if(this.btnDisable) return //防止多次提交不断发请求
                    wepy.showLoading({
                        title: '提交中...',
                        mask: true
                    })
                    this.btnDisable = true  //防止多次提交不断发请求
                    wepy.request({
                    url: '/mobile/mina/face/save',
                    method: 'POST',
                    data: {
                        age: this.ageNum,
                        phone: this.phoneNum,
                        problemTypeList: this.saveTagList
                    }
                    }).then((res) => {
                        if (res.resCode != 0) return
                        wepy.showToast({
                            title: '信息提交成功',
                            icon: 'success',
                            duration: 2000
                        })
                        this.showFaceDia = false
                        this.phoneNum = ''
                        this.ageNum = ''
                        this.saveTagList = [] //防止再次push累加上一次的值
                        this.skinTypeList.forEach((item)=>{
                            if(item.isActive) item.isActive=''
                        })
                        this.$apply()
                    })
                }
}