Vue中数据回滚问题

问题描述

vue与jquery方式联合使用时，出现数据回滚问题

举例

var app=new Vue({
    el:"app",
    data:{
       combinedValue:"current" 
    }
})
<input v-model="combinedValue" type="text"  id="combinedInput"/>

//...产生事件

$("#combinedInput").val("newValue")

//现象
//$("#combinedInput")的值先变成 "newValue"，最后却又回滚为"current"值

分析

在执行事件时打断点,发现当值发生变化时DOM结构重新渲染，通过
$(“#combinedInput”).val()方式修改值，app.combinedValue却仍旧是之前的值，因此当重新渲染时
恢复为之前的值

执行方法

/* globals MessageChannel */

var callbacks = [];
var pending = false;

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