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

Logo

前往低代码交流专区

更多推荐