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>

以上代码转载自代码来源