在 vue 的组件基础中有这样一句话: data 必须是一个函数.
为什么 data 必须是一个函数呢?
我们来看 Vue 在声明式渲染中给出的一个 demo:
- <div id="app">
- {{ message }}
- </div>
- var App = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
在这个 demo 中 data 是一个对象, 通过 new Vue 创建的 Vue 实例中, 我们直接把 data 上的 message 属性通过模板渲染到页面上去了. 这个 data 我们只在当前页面挂载的 div#App 这个点上使用, 但是组件是可以被复用的, 所以我们全局注册一个组件来分析.
先假设将 data 作为一个对象:
我们前面说组件是可以被复用的, 那么注册了一个组件本质上就是创建了一个组件构造器的引用, 而真正当我们使用组件的时候才会去将组件实例化.
这里可以发现当使用组件的时候, 虽然 data 是在构造器的原型链上被创建的, 但是实例化的 component1 和 component2 却是共享同样的 data 对象, 当你修改某一个实例的 data 对象的一个属性的时候, 公用的 data 对象也会发生改变, 这明显不是我们想要的效果.
这里可以看到, 而当 data 是一个函数的时候, 每一个实例的 data 属性都是独立的, 不会相互影响了.
总结:
综上可知, 如果 data 是一个函数的话, 这样每复用一次组件, 就会返回一份新的 data, 类似于给每个组件实例创建一个私有的数据空间, 让各个组件实例维护各自的数据. 而单纯的写成对象形式, 就使得所有组件实例共用了一份 data, 就会造成一个变了全都会变的结果.
所以说 vue 组件的 data 必须是函数. 这都是因为 JS 的特性带来的, 跟 vue 本身设计无关.
JS 本身的面向对象编程也是基于原型链和构造函数, 应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了.
来源: http://www.bubuko.com/infodetail-3408638.html