【vue回顾系列】06-关于data的一些注意事项，为什么要写成函数的形式

需要写成用return返回出数据的函数

其实vue的data有两种写法

函数写法：

data(){
   	return {
    	name:"xiaoming"
	}
}

对象写法（会有控制台警告）：

data: {
    name:"xiaoming"
}

这两种写法会有什么不同呢？

我们知道我们写的一个个组件，相当于在写构造函数，当new Vue的时候，我们的构造函数就进行实例化了。例如我们有个Hello.vue组件。当我们采用对象的写法写data数据时，在vue的处理后大致会变成这样：

Hello.prototype.data = {
	name : 'xiaoming'
}

这样，当这个组件复用多次，也就是实例化多次时，每个实例化对象的data都是这个构造函数原型上的同一个引用地址的对象。

那么当HelloA.vue组件修改了name，通过原型链修改了后，HelloB.vue组件中的name也会发生改变。

当我们采用函数的写法后，vue处理后大致会是这样：

Hello.prototype.data = function (){
    return {
   		name : 'xiaoming'
    }
}

当每个组件通过原型链使用data数据时，都会执行后返回一个独立的对象，互不干扰。

---

变量写在data外不具备响应式

vue只对放在data里的变量做响应式处理，所以你直接在data外的变量做修改是不具备响应式的。下面会有响应式原理的具体分析链接。

---

给对象添加新属性时，视图层不会刷新

比如data里一个对象obj : {}。然后你加了个新属性 this.obj.val = 'xxx'，视图层并不会自动刷新。可以用this.$set()解决。

具体原因可以看【vue回顾系列】18-数据响应式原理之Object的变化侦测

---

原数组直接修改时，视图层不会刷新

比如this.arr[0] = 1。必须用 this.$set(this.arr,0,4) 改变数组里的值，才能使得视图层改变。 对象的话则不会。

具体可看【vue回顾系列】22-数据响应式原理之Array的变化侦测

---

如果修改的变量并没有在视图层使用，则也不会刷新

可以用钩子函数来检测视图层是否更新

updated(){
    console.log('更新')
},

---

在data中执行函数获取不到变量

data() {
    return {
        obj: this.init(), 
        obj1: {a: 1}
    }
},
methods: {
   // 表单数据初始化
   init() {
       this.obj = this.obj1 // 获取到的是undefined
   }
}

具体原因个人现在也只是有猜测，证实之后再记录。

建议在created钩子中处理。