Vue.js中不希望依赖与缓存，你可以使用_来替代computed计算属性

在Vue.js中，computed计算属性是基于它的依赖缓存的，也就是说只有在依赖发生变化时才会重新计算，否则直接从缓存中获取结果。但是有时候我们不希望依赖和缓存，这时候可以使用_来替代computed计算属性。

例如，我们需要在模板中使用一个随机数，但是不希望它被缓存，可以这样写：

<div>{{ _random }}</div>

然后在Vue实例中定义_random方法：

new Vue({
  data: {
    // ...
  },
  methods: {
    _random() {
      return Math.random()
    }
  }
})

这样每次访问_random方法时都会重新计算随机数，避免了缓存的影响。需要注意的是，使用_替代computed计算属性可能会影响性能，应该根据实际情况选择使用。

相关问题

computed计算属性和data_Vue项目中如何使用computed计算属性

在Vue项目中，computed计算属性可以用来处理一些复杂的逻辑计算和数据处理，常常被用来计算和更新DOM中的数据，以及处理表单输入等。

使用computed计算属性需要在Vue组件中定义一个computed对象：

<template>
  <div>
    <p>原始数据：{{ originalData }}</p>
    <p>计算后的数据：{{ computedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalData: 'hello'
    }
  },
  computed: {
    computedData() {
      return this.originalData + ' world'
    }
  }
}
</script>

在上面的例子中，我们定义了一个computed对象，其中包含一个computed属性computedData，它的计算方式是将原始数据originalData与字符串' world'拼接起来。在模板中，我们可以直接使用computedData来显示计算后的数据。

需要注意的是，computed计算属性是基于它所依赖的data属性进行计算的，只有当所依赖的data属性发生变化时，computed属性才会重新计算。这也是computed计算属性和methods方法的区别所在。

vue中computed计算属性的使用案例

computed计算属性是在Vue.js中非常常用的一个功能，它可以根据已有的数据计算出新的数据，然后通过模板渲染到页面上。

下面是一个Vue组件中使用computed计算属性的例子：

<template>
  <div>
    <p>商品名：{{ product.name }}</p>
    <p>商品价格：{{ product.price }}</p>
    <p>商品税价：{{ taxPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: "苹果",
        price: 10,
        taxRate: 0.1
      }
    };
  },
  computed: {
    taxPrice() {
      return this.product.price * this.product.taxRate;
    }
  }
};
</script>

在这个例子中，我们定义了一个商品对象，包含商品名、价格和税率。然后我们通过computed计算属性来计算商品的税价，最后在页面上渲染出来。

computed计算属性的好处是它们具有缓存性，也就是说，只要依赖的数据没有发生变化，computed计算属性就不会重新计算。这样可以避免不必要的计算，提高应用的性能。