美文网首页
Vue flushCallbacks 刷新 BUG

Vue flushCallbacks 刷新 BUG

作者: jevons_lee_ | 来源:发表于2019-05-24 13:40 被阅读0次

原因

做一个表单后台的时候,我的想法是更新后可以继续更新,但是不知道为什么点了更新,我的数据就被清空了,数据库用的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

相关文章

  • Vue flushCallbacks 刷新 BUG

    原因 做一个表单后台的时候,我的想法是更新后可以继续更新,但是不知道为什么点了更新,我的数据就被清空了,数据库用的...

  • 简书demo

    VUE项目里写锚链接 HTML JS 以上在FireFox有BUG,修复如下: 刷新页面功能最简单的方法

  • vue实现不刷新整个页面刷新数据

    vue实现不刷新整个页面刷新数据 这样就出现了一个bug,如新闻列表页和发布新闻页面已通过点击左侧导航打开并添加至...

  • UITableView下拉刷新上下/左右颤抖问题

    tableView下拉刷新颤抖bug 1. 用MJRefresh下拉刷新UIcollectionview 左右颤抖...

  • Eat-Vue:日常记录1

    日常记录Vue中遇见的Bug和一些用法汇总:BUG:1、[Vue warn]: You are using the...

  • vue动态设置title标签

    ====== 更新 ========================发现bug:刷新的时候,title设置...

  • 记vue路由传参引发的bug

    最近遇到一个bug通过vue路由跳转到页面,然后接参调接口,失败而直接刷新页面,其他逻辑不变,接参调接口,成功 苦...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

  • iOS Bug

    Refresh Bug : Bug: 添加完数据后一次刷新table,引发多次footRefresh for ba...

  • 苹果自带的刷新控件UIRefreshControl(不推荐使用)

    苹果自带的刷新控件UIRefreshControl(不推荐使用)有bug,例:如果正在刷新,用tabbar切换控制...

网友评论

      本文标题:Vue flushCallbacks 刷新 BUG

      本文链接:https://www.haomeiwen.com/subject/mesgzqtx.html