Vue中data和computed都能存储数据，区别在哪？

Vue中data和computed都能存储数据，区别在哪？

在学习的过程中，遇到一个现象，computed与vuex配合使用，通过computed获取vuex返回过来的值，而不是使用data与vuex配合使用，在此进行自我反思与学习；

vue中响应式是什么？

概念：
官网解释：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

简而言之就是数据变页面变。

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被劫持过后的数据会有两个属性：一个叫getter，一个叫setter。

getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。

vm.$data

• 类型：Object

• 详细：

  Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。

官网的说明：

data：当一个 Vue 实例被创建时，它将 data 对象中的所有的 property （属性）加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，如果你知道你会在晚些时候需要这个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。如果是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

自己的总结

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项时，Vue 将遍历此对象所有的属性，并使用
Object.defineProperty 把这些属性全部转为 getter/setter

data的值在实例化时就已经被定义好，在使用时被响应，要改变或者新增data的属性与值，需要getter与setter，所以新增的属性不易被响应，特别是数组与对象（使用$set能进行赋值）。

简单来说：data的值不易变 ，如果想让他变，需要赋值；

vm.$computed:

官网的说明：

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

自己的总结：

其实重点就是什么是响应式依赖，首先我们要了解一下vue的基本工作过程：

完成页面获取数据到渲染的过程，我们需要：

• 对数据进行监听是否变化
• 收集view中变化数据所依赖的变量 收集视图依赖了哪些数据
• 数据变化了就 通知view更变数据

对应专业俗语分别是：

• 数据劫持 / 数据代理
• 依赖收集
• 发布订阅模式

现在再来重新看看官网的这句话：计算属性是基于它们的响应式依赖进行缓存的。也就是说如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，一般用computed 进行处理，只会走到依赖收集这一步，不会再调度方法，当页面打开，就会从已经缓存好的computed上取值，computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值（而watch 则是当数据发生变化便会调用执行函数）。

在这值得一提的是computed与watch的不同的是：

computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）

一句话总结一下：

data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动，而computed 会。