Vue中data和computed的区别

First
data 和 computed都是响应式的，先看看官方的说法：

Data:

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
深入理解响应式原理：
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
原理如下图：

2.两者的区别：

1. data中的属性并不会随赋值变量的改动而改动，(赋值变量类似：num1: aaa.bbb这种，而这种是直接赋值：num1: "aaa")

当需要这种随赋值变量的改动而改动的时候，还是用计算属性computed合适
如果实在要在data里面声明属性，可以先赋一个值，然后在methods里面定义方法操作该属性，效果等同，也会有响应式
测试以下代码感受以下：

<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>

以上代码转载自代码来源