vuejs v-model 和value 值不同步

Question

<input v-model='password' ref='password' />
<script type="text/javascript">

new Vue({
    el:'.loginDiv',
    data:{
        password:''
    },
    methods:{
        submitForm:function() {
            var sha = hex_sha1(this.password);
            this.password = sha;
            console.log(this.$refs.password.value)
        }
    }
})

</script>
为什么我执行submitForm这个函数，改变password，而this.$refs.password.value打印出来的却不是password的值

Answer 1

多看文档 dom 更新 并不是实时的
Vue-nextTick

Answer 2

password值是同步更新的，而 DOM 是异步更新的。可以等本轮 DOM 更新再获取 DOM 值。

this.$nextTick(() => {
    console.log(this.$refs.password.value)
})

Answer 3

可以认为,这个值已经告诉了v-model,但是他还没来得及写到页面上,这时候你直接去取页面的值,还是旧的值.
更新页面是异步操作,你这块代码都执行完了才会去做.