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>

以上代码转载自代码来源

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章