关于Vue.js中data函数特性与methods调用逻辑的技术问询

const vm = Vue.createApp({
    data(){
        return{
            firstname: "tanner",
            lastname: "die"
        }
    },
    methods:{
        fullname(){
            return `${this.firstname} ${this.lastname.toUpperCase()}`
        }
    }
}).mount("#app")

问题解答 #

1. data为何需要定义为函数？是Vue预定义的规则，还是Vue能自动识别其函数类型？ #

这是Vue的预定义规则，核心目的是避免组件复用时的数据污染。如果data是普通对象，所有复用的组件实例会共享同一个对象引用，修改其中一个组件的data会同步影响其他组件。将data定义为函数后，每个组件实例创建时都会调用该函数，返回一个全新的独立对象，确保每个组件拥有专属的数据源，互不干扰。

同时Vue会识别data的类型，在开发模式下如果发现data是对象而非函数，会直接抛出警告，强制开发者遵循这个规则。

2. methods是对象还是函数？若methods是对象，为何在HTML中调用时不使用{{methods.fullname()}}的形式？ #

methods本身是对象，它的属性才是具体的方法函数。

不用methods.fullname()调用是因为Vue初始化组件实例时，会把methods里的所有方法直接挂载到组件实例（即this）上，并且自动绑定了实例上下文，保证方法内的this始终指向当前组件实例。所以在模板里可以直接通过方法名调用，Vue会自动从当前实例上找到对应的方法执行，无需添加methods前缀。

内容的提问来源于stack exchange，提问作者Punkin Pyjamas