javascript - Soalan besar untuk mendapatkan bantuan!!!!! Mengapa output ini berbeza?

Question

Seperti yang ditunjukkan dalam gambar, mengapa sifat keluaran berbeza? ? ? ? ?

<template>
        <p class="table-p">
            <span @click='change_router'>点我跳转</span><br>
            <ul class="table">
                <li v-for='item in data'>                
                    <p 
                    :class="item.moveYse?'zindex':''"
                    class="content" 
                    @click='start0(item,$event)'
                    @mousedown='moveDown(item,$event)'
                    @mousemove='move0(item,$event)'
                    @mouseup='moveUp(item,$event)'
                    :style="'top:'+item.top+'px;left:'+item.left+'px'">
                        {{item.a}}
                    </p>
                </li>
            </ul>
        </p>
</template>
<script>
export default{
    data(){
        return{
            data: [
                {a:'列表1',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表2',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表3',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表4',top:0,left:0,startX:0,startY:0,moveYse:false},
            ],
        }
    },
    created(){
        var that =this
        setInterval(function () {
          that.msg += 1
        }, 1000)
    },
    watch: {
        
    },
    methods: {        
        change_router() {
            this.$router.push({name:'index'})
        },
        start0(item,e) {
            item.moveYse = true
            // console.log(item,e,'click')
        },
        moveDown(item,e) {
            item.moveYse = true
            console.log(item,e,'down')
            item.startX = e.clientX
            item.startY = e.clientY
        },
        move0(item,e) {
            if (item.moveYse == true) {
                console.log(item,e,item.moveYse,'move')
                item.top = e.clientY - item.startY
                item.left = e.clientX - item.startX 
            }
        },
        moveUp(item,e) {
            item.moveYse = false
            let l = e.clientY - item.startY
            if (l < 50) {
                console.log(l)
                item.startY = 0
                item.startX = 0
                item.top = 0
                item.left = 0
            }else {

            }
            console.log(item.moveYse,item,item.moveYse,'up')
        }
    }
}    
</script>

Answer 1

 moveDown(item,e) {
    item.moveYse = true
    console.log(item,e,'down')
    item.startX = e.clientX
    item.startY = e.clientY
},

moveUp(item,e) {
    item.moveYse = false
    let l = e.clientY - item.startY
    if (l < 50) {
        console.log(l)
        item.startY = 0
        item.startX = 0
        item.top = 0
        item.left = 0
    }else {

    }
    console.log(item.moveYse,item,item.moveYse,'up')
}

Apabila anda mencetakconsole.log(item.moveYse,item,item.moveYse,'up'), ia sebenarnya palsu, tetapi apabila anda mengklik pada objek item dalam konsol untuk melihatnya, kerana kaedah moveDown dilaksanakan, item.mouseYse ditukar kembali kepada benar.