vue 中data和computed的区别 computed和method区别

首先我们先看看官方怎么解释的

data：

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

2.两者的区别

1.data属性不会随着赋值属性的改动而改动（赋值属性类似 num：obj.num 直接赋值：num：3333）

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

 

我们来写个例子看一看

<template>
  <div class>
    <h2>这是data中的num:{{ num1 }}</h2>
    <h2>这是computed中的num:{{ num2 }}</h2>
    <button @click="changeNum">点击改变obj.num</button>
  </div>
</template>

<script>
let obj = {
  num: 2
};
export default {
  data() {
    return {
      num1: obj.num,
      t: obj //这一句一定要，这样组卷复用的时候num2共享状态。没有这句，computed中的num2也不跟踪状态。
    };
  },
  computed: {
    num2() {
      return obj.num;
    }
  },
  methods: {
    changeNum() {
      ++obj.num;
      console.log(obj.num);
    }
  }
};
</script>

computed和method区别

1.计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed可以赋值吗？

computed默认只有getters属性 有必要时可以添加setter属性

例如：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName也会相应地被更新。