Vue.js是否可无需在data中显式声明即可自动识别v-model绑定属性

核心结论 #

Vue 默认不提供 AngularJS 那种自动将模板中 ng-model 对应的属性隐式挂载到作用域的能力，这是由Vue的响应式原理决定的：

• Vue 2 的响应式依赖初始化阶段对data中声明的属性做Object.defineProperty劫持，未提前声明的属性默认不具备响应式能力
• Vue 3 基于 Proxy 实现响应式，支持动态给对象新增响应式属性，但也不会自动识别模板中使用的属性并自动挂载

针对多属性场景的替代方案 #

你提到的计算器有上百个独立属性的场景，可以用以下方案避免逐个声明的冗余：

方案1：统一挂载到单个响应式对象下（推荐） #

所有属性都绑定到一个提前声明的空对象上，无需逐个声明子属性：

Vue 2 实现示例

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="exampleApp">
    <input v-model="form.firstName" v-on:input="makeName">
    <input v-model="form.lastName" v-on:input="makeName">
    <input v-model="form.fullName">
</div>
<script>    
    var app = new Vue({
        el: '#exampleApp',        
        data: {
           // 仅需声明一个根对象，无需逐个声明子属性
           form: {}
        }, 
        methods: {
            makeName: function () {
                // Vue 2 动态新增属性需用 $set 保证响应式
                this.$set(this.form, 'fullName', this.form.firstName + " " + this.form.lastName)
            }
        }
    });
</script>

Vue 3 实现示例

Vue 3 基于 Proxy 实现响应式，直接赋值即可，无需调用$set：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="exampleApp">
    <input v-model="form.firstName" @input="makeName">
    <input v-model="form.lastName" @input="makeName">
    <input v-model="form.fullName">
</div>
<script>    
    const { createApp } = Vue
    createApp({
        data() {
            return {
                form: {}
            }
        },
        methods: {
            makeName() {
                this.form.fullName = this.form.firstName + " " + this.form.lastName
            }
        }
    }).mount('#exampleApp')
</script>

方案2：批量生成初始属性 #

如果希望所有属性都直接挂载到根实例下，可以提前把所有字段名维护在一个数组中，批量生成data的初始值：

// 仅需维护字段名数组，上百个属性直接加在这个数组里即可
const CALC_FIELDS = ['firstName', 'lastName', 'fullName', /* 其余97个属性名 */]

var app = new Vue({
    el: '#exampleApp',        
    data: () => CALC_FIELDS.reduce((data, key) => {
        data[key] = ''
        return data
    }, {}),
    methods: {
        makeName: function () {
            this.fullName = this.firstName + " " + this.lastName
        }
    }
});

这种方式和你原来的模板写法完全兼容，不需要修改v-model的绑定路径，同时避免了逐个写属性的冗余。

不推荐的方案：自定义指令模拟AngularJS隐式挂载 #

你也可以通过自定义v-model的扩展指令，自动收集模板中用到的属性并挂载到实例上，但这种方式会导致状态来源不透明，排查问题难度大幅提升，不建议在生产环境使用。

内容的提问来源于stack exchange，提问作者Kevin Denham