1、对象还是函数?
vue官方文档在声明式渲染这一节中给了我们这样的一个demo:
<div id="app">
{
{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,能够直接把data上的message属性通过模板渲染到页面上。
但在官方文档的Vue组件基础这一节中却明确指出:一个组件的 data 选项必须是一个函数
注意:图中最下方告诉我们,如果没有这条规则,那么就会出现同一组件的不同实例之间牵一发而动全身的问题。
2、为什么组件中的data必须是函数
为什么组件中的data必须是一个函数而不是对象, 我们首先来看一下第一个声明式渲染的demo中data:我们只在当前页面的挂载的div#app这个点上使用,但是对于组件而言,有一个很明显的特性是它