原因

做一個(gè)表單后臺(tái)的時(shí)候，我的想法是更新后可以繼續(xù)更新，但是不知道為什么點(diǎn)了更新，我的數(shù)據(jù)就被清空了，數(shù)據(jù)庫用的MongoDB，發(fā)送的 _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;
            // 更新前的校驗(yàn)
            for(const item in obj) {
                const i = obj[item]
                if(i==="" || i===" ") {
                    this.$message({
                        type: 'error',
                        message: `請(qǐng)完整輸入 ${item}`
                    });
                    return false;
                }
                if(item==="sort"&&window.isNaN(i-1)) {
                    this.$message({
                        type: 'error',
                        message: `${item} 不是數(shù)字`
                    });
                    return false;
                }
            }

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

            // 這個(gè)值到發(fā)送的時(shí)候就沒了。。。
            let idSave2;
            this.whichStar._id&&(idSave2 = this.whichStar._id)
            
            let content = obj;

            // id是空的話更新沒有用的
            if(!content['_id']) {
                this.$message({
                    type: 'error',
                    message: `id 是空，這可能是個(gè)BUG`
                });
                this.loading = false;
                return false;
            }

            // 總之是要?jiǎng)h除 `_id` 這個(gè)屬性
            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 后發(fā)現(xiàn)是 flushCallbacks 函數(shù)刷新(清空)了 _id

debugger 發(fā)現(xiàn)和更新的這段代碼沒有關(guān)系
數(shù)據(jù)是在 invokeWithErrorHandling 中消失了
繼續(xù) debugger 問題出現(xiàn)在了 flushCallbacks

用暫存值的方法簡單粗暴的暫時(shí)修改了這個(gè)問題

handleUpData() {

            const obj = this.inputBox;
            // 更新前的校驗(yàn)
            for(const item in obj) {
                const i = obj[item]
                if(i==="" || i===" ") {
                    this.$message({
                        type: 'error',
                        message: `請(qǐng)完整輸入 ${item}`
                    });
                    return false;
                }
                if(item==="sort"&&window.isNaN(i-1)) {
                    this.$message({
                        type: 'error',
                        message: `${item} 不是數(shù)字`
                    });
                    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)

            // 這個(gè)值到發(fā)送的時(shí)候就沒了。。。
            let idSave2;
            this.whichStar._id&&(idSave2 = this.whichStar._id)
            
            let content = obj;

            // id是空的話更新沒有用的
            if(!content['_id']) {
                this.$message({
                    type: 'error',
                    message: `id 是空，這可能是個(gè)BUG`
                });
                this.loading = false;
                return false;
            }

            // 總之是要?jiǎng)h除 `_id` 這個(gè)屬性
            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)
        }

認(rèn)識(shí)

• flushCallbacks 用來清空回調(diào)隊(duì)列和依次執(zhí)行回調(diào)。

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

在 Vue.js 里是數(shù)據(jù)驅(qū)動(dòng)視圖變化，由于 JS 執(zhí)行是單線程的，在一個(gè) tick 的過程中，它可能會(huì)多次修改數(shù)據(jù)，但 Vue.js 并不會(huì)傻到每修改一次數(shù)據(jù)就去驅(qū)動(dòng)一次視圖變化，它會(huì)把這些數(shù)據(jù)的修改全部 push 到一個(gè)隊(duì)列里，然后內(nèi)部調(diào)用 一次 nextTick 去更新視圖，所以數(shù)據(jù)到 DOM 視圖的變化是需要在下一個(gè) tick 才能完成。

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