javascript - Vue.js 中计算属性和普通数据的区别

Question

我观察到，当来自 data() 的普通属性和派生自它的计算属性通过事件传递时，前者保持其 react 性，而后者失去它。

我为其设置了以下测试用例(also as a JSFiddle 如果您愿意):

const EventBus = new Vue();

Vue.component('comp', {
  data() {
    return {
      arrData: ['a', 'b']
    };
  },
  computed: {
    arrComputed() {
      return this.arrData.map((e) => e.toUpperCase());
    }
  },
  template: `
  <div>
    <div>Original array: {{ arrData }}</div>
    <div>Computed array: {{ arrComputed }}</div>
    <button @click="remove('a')">Remove a</button>
    <button @click="remove('b')">Remove b</button>
    <button @click="pass">Pass through event</button>
    <button @click="reset">Start over soft</button>
    <button @click="resetHard">Start over hard</button>
  </div>`,
  methods: {
    remove(name) {
      name = name.toLowerCase();
      if(this.arrData.indexOf(name) != -1) {
        this.$delete(this.arrData, this.arrData.indexOf(name));
      }
    },
    pass() {
      EventBus.$emit('pass', this.arrData, this.arrComputed);
    },
    reset() {
      this.$set(this.arrData, 0, 'a');
      this.$set(this.arrData, 1, 'b');
    },
    resetHard() {
      this.arrData = ['a','b'];
    }
  }
});

Vue.component('othercomp', {
  data() {
    return {
      items1: [],
      items2: []
    }
  },
  mounted() {
		EventBus.$on('pass', this.receive);
  },
  template: `
  <div>
    <div>Original array: {{items1}}</div>
    <div>Computed array: {{items2}}</div>
  </div>`,
  methods: {
    receive(items1, items2) {
      this.items1 = items1;
      this.items2 = items2;
    }
  }
});

var app = new Vue({
  el: '#app',
  components:['comp', 'othercomp']
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <comp></comp>
  <othercomp></othercomp>
</div>

计算属性与普通属性有何不同，从而导致这种行为差异发生？

我从 previous question 中学到了像这样传递 react 对象是不好的做法，我应该改用 getter 函数，但是我仍然想知道为什么会出现这种差异。

Answer 1

我不希望这会起作用。通过返回 map() 的结果，您将 react 数组的副本 传递给其他组件。此副本不会对原始数组的更改使用react——它是一个完全不同的数组。即使计算属性将在arrData 更改时更新，它也不会自动向第二个组件发送另一个事件，告诉它更新它的数据数组。我认为您将需要在两个组件上都有一个计算属性——您可以使用混合或过滤器以 DRY 方式执行此操作(在这种情况下可能更合适)。

您可以在计算函数中触发事件。但这对我来说似乎很老套:

arrComputed() { 
   let newArray = this.arrData.map((e) => e.toUpperCase());
   EventBus.$emit('pass', this.arrData, newArray);
   return newArray
}