Vue 数据双向绑定的误区

都知道 Vue 的核心是数据的双向绑定：即数据变化，DOM中的显示值即变化；

但有个例外，

<template>
    <div>
        <input v-model="form.name" />
        <span>{{form.code}}</span>
        <input v-model="form.old" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                name: '张三',
                code: '0001'
            }
        }
    },
    watch: {
        ['form.name']() {
            console.log(this.form)
        },
        ['form.old']() {
            console.log(this.form)
        }
    },
    mounted() {
        this.form.old = 12
    },
    methods: {
        oldInput(value) {
            this.form.old = value
        }
    }
}
</script>

参数中 form.old是后加的参数，这样的结果就是form.old变化时，是监听不到数据变化的，会导致一些逻辑问题。

所以在Vue中要实现数据的双向绑定，一定要初始化时，参数一定要存在，否则就会有意想不到的问题