vue関数同期実行で発生した問題

vueで属性値を動的に修正する一環で,業務の違いからコールバック,.then、と同期して実行し、すべて穴の中を踏んでいます.の
 

var widthNum;
var heightNum;
document.onmousemove = function(e){
	oDrag.style.width = e.pageX - disx-195+'px';
	oDrag.style.height = e.pageY - disy-85+'px';
	widthNum = e.pageX - disx-195;
	heightNum = e.pageY - disx-85;
}
var i = 0;
console.log(this);

this.$emit('changeSize',{theId:i,width:widthNum,height:heightNum});
console.log(widthNum);
	                
document.onmouseup = function(e){
	document.onmousemove = document.onmouseup = null;
}

 
そう書いたのか、問題は明らかだ.私が手に入れたwidthNumは最新に生成されたものではなく、上で定義されたもので、空の値(undefined)を手に入れた.
問題は実際に上のonmousemove関数が実行されない前に後ろの$emit関数を先に実行し、私たちが望んでいる値が得られないことです.
この問題を解決するには、最も直接的な考えがあるかもしれない.一つの判断で、上の関数が実行されてから後の文を開始します.2.コールバック関数3.閉パッケージまたは上の関数から必要な数値をreturnします.
試してみたが穴があって登れなかった.
重要な原因の1つは、$emitが関数に入れられないことです.関数には必要なthisが得られないからです.
そして,関数の外で変数を明示して関数内で変数の値を修正することを考えると,よい考えである.
さらになぜこの値を変数に割り当てて関数内で呼び出さないのですか?
次のようになります.

var self = this;
document.onmousemove = function(e){
	oDrag.style.width = e.pageX - disx-195+'px';
	oDrag.style.height = e.pageY - disy-85+'px';
	let widthNum = e.pageX - disx-195;
	let heightNum = e.pageY - disx-85;
	/*          width height  ，  var self = this;    this     ，         */
	var i = 0;
	self.$emit('changeSize',{theId:i,width:widthNum,height:heightNum});
		//console.log();
}
	                
document.onmouseup = function(e){
	document.onmousemove = document.onmouseup = null;
}

清潔で、考え方を変えるだけで、おおらかになりました.
まとめ:
知らないところから手に入れて、穴は避けられないので、踏んだ穴はすべて1種の富になって、振り返ってみるとあなたは自分がどうして足首の深い小さな水たまりに落ちたことに気づくことができますか?
昼休みは考えが乱れていて、読めない歓迎の伝言があって、指摘して交流することを歓迎します.