Vue中为何data函数必须用return返回？其背后的原理是什么？

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

官方示例：使用Vue创建实例+var vm=new Vue({+el: ''+})+

官网的示例

var vm = new Vue({ el: '#example', data: { message: 'Hello' } });

项目中的写法

data() { return { message: 'Hello' } }

为什么要把data变成函数并return属性呢？

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。