一、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 outer_obj1 = { no: 30 };
export default {
  data() {
    return {
      t: outer_obj1, //这样,这个组件被多次使用时，c_num1共享状态。没有这句，computed中的c_num1也不跟踪状态。
      num1: outer_obj1.no
    };
  },
  computed: {
    c_num1() {
      return outer_obj1.no;
    }
  },
  methods: {
    outerNumChange() {
      outer_obj1.no += 10;
      console.log(this.c_num1);
    }
  }
};
</script>

<style>
</style>