element el-dialog标签里的内容不能即时更新

Question

<template>
<div>
  <el-dialog
    title='编辑发起人'
    class="add-reply-dialog"
    :visible.sync="true"
  >
    <span>{{form.id}}222222</span>
    <button @click="toChange">click change</button>
  </el-dialog>    
</div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    id: '',
                }
            }
        }
        methods: {
            toChange() {
                this.form.id = 'this show show'
            }
        }
    }
</script>

上面的代码当我click的时候，span标签没有显示'this show show'，但是当我把toChange方法改成这样

toChange() {
     this.form = {
         ...this.form,
         id: 'this show show',
     }
 }

就会显示正常结果，这是为什么呢？

Answer 1

因为vue只能监听对象上已有的属性变化，form之前没有id这个属性，所以id变化了，并不会触发视图的更新

第二种直接覆盖的的form，会自动检测form的值并向下检测，检测到了id,所以会自动更新到视图上

Answer 2

建议看下文档，深入响应式原理！https://cn.vuejs.org/v2/guide...