Question

我有一个相当简单的Vuejs应用程序，我只是在学习Vuejs。当我在数据属性中添加或删除时，我想要发生其他一些功能。代码是这样的：

data: {
  pricings: null,
},
mounted(){
  var somePrice = {"name":"service price", "price":"2.45"}
  this.pricings.push(somePrice);

}, 
methods:{
  callMe: function(){
     alert("call me");
  }
}

我喜欢在pricings中添加或删除某些其他方法（在这种情况下为callMe）。我相信这是可能的，但我没有找到如何做到这一点。

Answer 1

您可以使用computed或watch属性。这实际上取决于你的用例。

采用以下示例：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data: {
    pricings: [],
  },
  mounted() {
    const somePrices = [{
      "name": "Service",
      "price": "2.45"
    }, {
      "name": "Another Service",
      "price": "5.25"
    }, {
      "name": "Service Three",
      "price": "1.52"
    }];

    this.pricings.push(...somePrices);

  },
  methods: {
    callMe: function(newVal) {
      // console.log(newVal);
      // async or expensive operation ...
      console.log("call me");
    }
  },
  computed: {
    pricingsSum: function() {
      return this.pricings.reduce((sum, item) => sum + Number.parseFloat(item.price), 0);
    }
  },
  watch: {
    pricings: function(newVal) {
      this.callMe(newVal);
    }
  }
});

<script src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in pricings" :key="item.name">
      {{ item.name }} ${{ item.price }}</li>
  </ul>
  <p>Total: ${{ pricingsSum }}</p>
</div>

我们使用了一个复杂逻辑的计算属性，通过执行以下操作来阻止模板简单和声明：

  <p>Total: ${{ this.pricings.reduce((sum, item) => sum + Number.parseFloat(item.price), 0) }}</p>

如果您需要在模板的多个部分重复此操作，情况会更糟。

另一方面，我们使用pricings的监视属性，该属性会对pricings的数据更改做出反应。

引用文档：

当您想要执行异步或昂贵时，这非常有用响应不断变化的数据的操作。

这意味着您可能会向服务器或其他一些复杂/昂贵的操作发出异步请求，而不是像处理我们的计算属性一样操纵数据。

希望这会有所帮助，我建议您阅读完整的文档here。

在一天结束时，计算属性只是一个观察者，你可以在这里看到：

function createComputedGetter (key) {
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value
    }
  }
}

重要的区别是计算属性是同步的，必须返回一个值。

将某些内容添加到Vuejs数据元素时添加我们自己的函数

1 个答案: