Vue组件中data选项为何必须是函数？其内部原理是什么？

本文共计786个文字，预计阅读时间需要4分钟。

官方解释data必须是函数 + 构造Vue实例时传入的各种选项大多都可以在组件中使用。只有一个例外：data必须是函数。实际上，如果你这样写：

javascriptVue.component('my-component', { template: '{{ }}'})

那么，组件将无法正确渲染。因为模板中使用了插值表达式，但没有提供相应的数据。正确的做法是定义一个包含数据的data函数，并在模板中引用这些数据。例如：

javascriptVue.component('my-component', { template: '{{ message }}', data: function() { return { message: 'Hello, Vue!' } }})

官方解释

data 必须是函数

构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做：

Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } })

那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。