关于双向绑定data.obj中未定义的属性

Question

下面代码中input双向绑定的是person对象中未定义的属性name，后面的数组也是绑定了未定义的属性hobby。响应式是双向绑定的子集，我理解按照响应式原理，name、hobby应该是未通过Object.defineProperty 把这些属性转为 getter/setter。但为何能够实现双向绑定（下面的结果图），浏览器也没有报错。不是应该通过vue.set()声明这两个属性后，才能实现双向绑定吗？
v-model绑定事先未定义的属性，是否可以这样使用？
我又试着通过方法handleSth2赋值直接去改变未定义属性，数据更新但视图是没有更新。但为何v-model能使未定义的属性数据、视图都更新？

<template>
    <div>
        <!-- 对象的属性未定义是否能v-model双向板顶 -->
        <div>person对象:{{person}}</div>
        <input type="text" v-model="person.name" placeholder="请输入姓名">
        
        <!-- 数组 -->
        <div>list对象:{{list}}</div>
        <input type="text" v-model="list[0].hobby" placeholder="请输入甲的兴趣">
        
        <a-button @click="handleSth1">Vue.set（）改变未定义属性</a-button>
        <a-button @click="handleSth2">赋值改变未定义属性</a-button>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            person:{},
            list:[
                {
                    name:'甲',
                },
                {
                    name:'乙',
                },
            ],
        }
    },
    methods: {
        handleSth1() {
            Vue.set(this.person,'name','亚历山大')
        },
        handleSth2() {
            this.person.name = '通过方法修改-----梦娜'
            console.log('方法2',this.person)
        },
    },
}
</script>

结果：

Answer 1

双越 2021-09-18 21:17:29

我没看懂你的问题，这么多文字看懵了。

能否再简化一下？直接了当的提出你的问题即可，

• 提问者 三玖 #1

  简单说就是组件实例化的时候data中只定义了person为空对象，v-model能否绑定person.name使用。
  课程里说属性通过Object.defineProperty 来实现响应式（数据驱动视图），但name属于后增属性，组件渲染的时候应该没有被监听起来，为何还能双向绑定。

• 提问者 三玖 #2

  简单说就是组件实例化时只定义了person为空属性，使用v-model=person.name是否正确？
  vue通过object.defineProperty实现data属性响应式，像name这种后增的属性，为何能双向绑定数据？

• 双越 回复 提问者 三玖 #3

  1. 强烈不建议这么用。2. 可以通过 Vue.set 来设置值