一、data是响应式的。
官网对data的说明：
1. 选项 / 数据
https://cn.vuejs.org/v2/api/#data
Vue 会递归的将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。
2.如何追踪变化
https://cn.vuejs.org/v2/guide/reactivity.html#如何追踪变化
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
二、computed是响应式的。
当你有一些数据需要随着其它数据变动而变动时，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
但是，我发觉，这个源数据只是指data中定义的数据，或者vuex中定义的state数据.。并不针对普通数据。
官方资料：
https://cn.vuejs.org/v2/guide/computed.html
三、两者应用时的区别：
1.data属性的值，不会随赋值变量的改动而改动。如果要改变这个属性的值，则需要直接给data属性赋值，视图上对这个属性的显示才会变。
2.computed属性，属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。
在看一下代码，感受下data不变，computed会随之改变的特性。
（修订代码2018.9）
<template>
<div>
<h2>num1是data中的变量，其初始值为：{{num1}}</h2>
<h2>点击按钮后，data中的num1（不会）变化为：{{num1}}</h2>
<h2>点击按钮后，computed中的c_num1变化为：{{c_num1}}</h2>
<button @click="outerNumChange">给num1+10</button>
<hr>
<h1>1.data定义的属性不会因为它的赋值变量的变化而变化</h1>
<h1>2.computed定义的属性会随它的赋值变量的变化而变化</h1>
</div>
</template>
<script>
let mm = { no: 30 };
export default {
data() {
return {
t: mm, //这样会导致这个组件被多次使用时，c_num1共享状态。
num1: mm.no
};
},
computed: {
c_num1() {
return mm.no;
}
},
methods: {
outerNumChange() {
mm.no += 10;
console.log(mm.no);
}
}
};
</script>
<style>
</style>