浅谈Vue.js中data、computed和watch有什么区别

在Vue.js中data、computed和watch的区别常常在面试中被问到，但是许多人弄不明白，或者弄明白了也感觉似懂非懂，说不出来。那么现在知了姐就给大家整理一下，希望能顾帮助到大家！

data:

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

Vue 会递归的将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

computed：

computed是计算属性,也就是计算值,它更多用于计算值的场景。

computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。

computed适用于计算比较消耗性能的计算场景。

watch:

更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作。

无缓存性，页面重新渲染时值不变化也会执行。

小结：

1.    data属性的值，不会随赋值变量的改动而改动。如果要改变这个属性的值，则需要直接给data属性赋值，视图上对这个属性的显示才会变。

2.    computed属性，属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。

3.    当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed。

4.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。