关于v-model绑定未定义的对象属性的几个细节验证

关于v-model绑定未定义的对象属性的几个细节验证

首先先看下边这段代码

代码1

   <div id="app">
        <div id="my" style="height:20px;width:100px">{{myData.username}}</div>
        <input type="text" v-model="myData.username">
        <button @click="m1">给username属性赋值</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    myData:{}
                }
            },
            methods:{
                m1(){
                    this.myData.username='tom'
                }
            }
            
        })
    </script>

id=my的div用插值表达式关联到了myData.username,input用v-model绑定了myData.username,但在data中并没有给myData声明username属性

在浏览器中打开这个页面

情况1 先在input框中输入值，此时发现上边的div中的内容会随着input的输入而发生变化，说明这个属性是响应式的，这个时候在点按钮给myData.username赋值tom,这个属性还是响应式的,div的内容会跟着变。

情况2 页面出来后先点按钮给myData.username属性赋值,这个时候会发现上边div的内容并没有更新，这个时候再给input框输入值上边的div内容也不会变,说明属性username不是响应时的。

通过这两种情况的对比得出结论,在data中没有生命的属性如果后期通过代码添加了该属性，它不是响应式的；但是如果不是通过代码添加了属性，而是用v-model给这个属性赋值，那么这个属性会是响应式的。

代码2

    <div id="app">
        <div style="height:20px;width:100px">{{myData.username}}</div>
        <input type="text" v-model="myData.username">
        <button @click="m1">给整个myData对象重新赋值</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    myData:{}
                }
            },
            methods:{
                m1(){
                    this.myData={
                        username:'jerry'
                    }
                }
            }
            
        })
    </script>

这个时候，点击按钮给整个mydata对象重新赋值并添加新属性,该属性是响应式的,上边的div的内容也会跟着变化.

先点按钮还是先在input输入内容对结果没有影响。