vue中data的三种写法以及处理数据污染问题

data有三种数据处理方式

1.对象写法

var app = new Vue({
　　el: '#app',
　　data: {
　　　　msg: 'hello' //data是一个对象，html通过键值对取值
　　}
})

2.函数写法

var app = new Vue({
　　el: '#app',
　　data: function() {
　　　　return {
　　　　　　msg: 'hello' //html取值方式仍旧是键值对
　　　　}
　　}
})

3.ES6语法的函数写法

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　msg: 'hello'
　　　　}
　　}
})

在不存在组件复用的情况下，三种写法的使用是没有任何区别的，对象写法可能会更简单一些。

存在组件复用的情况下，官方规定必须使用函数写法，否则会出现数据污染问题，对象写法中data是一个对象，js中对象的作用域是广泛的，并且对象只有一个，那么如果过组件复用，多个视图对一个组件数据进行读写，就可能出现数据不一致也就是数据污染问题。如果使用函数写法，js中函数作用域私有，并且函数之间作用域独立，就不会出现数据污染问题。

所以，组件中推荐使用第三种es6函数写法。