Vue flushCallbacks 刷新 BUG

原因

做一个表单后台的时候，我的想法是更新后可以继续更新，但是不知道为什么点了更新，我的数据就被清空了，数据库用的MongoDB，发送的 _id 为underfind

后端代码

DBOption.prototype.modifyDB = function(modifyData, dbName, DBROOT="astrondb", callBack) {
    MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
        if (err) throw err;
        if(!modifyData) return false;
        const dbRoot = db.db(DBROOT);
        const objectId_id = objectId(modifyData._id);
        param = {_id: objectId_id};
        dbRoot.collection(dbName).updateOne(param, { $set: modifyData.content }, function(err, res) {
            if (err) {throw err};
            callBack(`${res}`)
        });
    })
}

前端代码

handleUpData() {

            const obj = this.inputBox;
            // 更新前的校验
            for(const item in obj) {
                const i = obj[item]
                if(i==="" || i===" ") {
                    this.$message({
                        type: 'error',
                        message: `请完整输入 ${item}`
                    });
                    return false;
                }
                if(item==="sort"&&window.isNaN(i-1)) {
                    this.$message({
                        type: 'error',
                        message: `${item} 不是数字`
                    });
                    return false;
                }
            }

            this.loading = true;
            const this_ = this;
            const cb = function cb() {
                this_.loading = false;
            }

            // 这个值到发送的时候就没了。。。
            let idSave2;
            this.whichStar._id&&(idSave2 = this.whichStar._id)
            
            let content = obj;

            // id是空的话更新没有用的
            if(!content['_id']) {
                this.$message({
                    type: 'error',
                    message: `id 是空，这可能是个BUG`
                });
                this.loading = false;
                return false;
            }

            // 总之是要删除 `_id` 这个属性
            for(const con in content){
                delete content['_id'];
            }

            // 一开始是用this.whichStar._id存id 但是更新第二次就是underfind
            console.log("-=-=-=-=->",this.whichStar._id, content)
            stars_modify({_id: reqID, content }, cb);

            this.star_find_fun();

            this.whichStar = obj;
            idSave&&(this.whichStar._id=idSave);
            console.log("idSave",idSave)
        }

debugger 后发现是 flushCallbacks 函数刷新(清空)了 _id

debugger 发现和更新的这段代码没有关系
数据是在 invokeWithErrorHandling 中消失了
继续 debugger 问题出现在了 flushCallbacks

用暂存值的方法简单粗暴的暂时修改了这个问题

handleUpData() {

            const obj = this.inputBox;
            // 更新前的校验
            for(const item in obj) {
                const i = obj[item]
                if(i==="" || i===" ") {
                    this.$message({
                        type: 'error',
                        message: `请完整输入 ${item}`
                    });
                    return false;
                }
                if(item==="sort"&&window.isNaN(i-1)) {
                    this.$message({
                        type: 'error',
                        message: `${item} 不是数字`
                    });
                    return false;
                }
            }

            this.loading = true;
            const this_ = this;
            const cb = function cb() {
                this_.loading = false;
            }

            let idSave;
            if(obj._id) {
                idSave = obj._id;
            }
            console.log("====>",obj)

            // 这个值到发送的时候就没了。。。
            let idSave2;
            this.whichStar._id&&(idSave2 = this.whichStar._id)
            
            let content = obj;

            // id是空的话更新没有用的
            if(!content['_id']) {
                this.$message({
                    type: 'error',
                    message: `id 是空，这可能是个BUG`
                });
                this.loading = false;
                return false;
            }

            // 总之是要删除 `_id` 这个属性
            for(const con in content){
                delete content['_id'];
            }

            const reqID = this.whichStar._id ? this.whichStar._id : idSave2
            console.log("-=-=-=-=->",reqID, content)
            stars_modify({_id: reqID, content }, cb);

            this.star_find_fun();

            this.whichStar = obj;
            idSave&&(this.whichStar._id=idSave);
            console.log("idSave",idSave)
        }

认识

• flushCallbacks 用来清空回调队列和依次执行回调。

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

在 Vue.js 里是数据驱动视图变化，由于 JS 执行是单线程的，在一个 tick 的过程中，它可能会多次修改数据，但 Vue.js 并不会傻到每修改一次数据就去驱动一次视图变化，它会把这些数据的修改全部 push 到一个队列里，然后内部调用 一次 nextTick 去更新视图，所以数据到 DOM 视图的变化是需要在下一个 tick 才能完成。

参考 https://segmentfault.com/a/1190000016922527?utm_source=tag-newest