关于vue中Option Api的data数据

一，前言

1.Vue的核心是使用模板语法，声明式的将data数据渲染进DOM系统。

2.Vue2 Option Api 的data数据是响应式数据的来源

二，data数据声明

1.我们在Vue Option API的data选项里声明响应式数据：

new Vue({data:{...reactive data}) 
new Vue({data:{name:'lsq'}) 

2.在组件中，data必须是以函数的形式返回

new Vue({data:function(){return {...reactive data}})
new Vue({data:function(){return {address:"beijing"}})

三，data数据响应性

1.当一个 vue实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统，当数据变化时相应的视图也会发生变化。

2.注意，只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。

四，data数据修改

1.在vue选项中，我们直接使用this.xxx访问和修改data里的值，相应的改变视图。

2.需要注意的是：在vue中，data数据的更新是同步的，但是dom的更新是异步的，因此我们可以在程序运行的下一个状态拿到最新的data值，但是下一个状态拿不到最新的dom。

3.上面所说的响应式基于data数据已经被应用到模板中。如果数据未加入到模板中，那么即使数据改变了，也不会触发生命周期updated。这和react大不相同 ，react中只要使用setState改变了state，不管是否应用到模板中，都会触发更新的生命周期。