0
点赞
收藏
分享

微信扫一扫

Vue的计算属性

蓝莲听雨 2022-04-18 阅读 106
前端vue.js

1.什么是计算属性?

它是一种属性,有计算这个特殊的性质,每次取得它的值的时候,它不像普通属性那样直接返回结果,而是经过计算后再返回结果,同时只要在它的当中引用data中的某个属性,当这个data中的属性发送改变时,计算属性会自动计算重新执行。

2.用法

计算属性需要以function函数的形式声明到组件的computed选项中,要使用时必须写它的名称(当作一个属性来用),示例如下

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{{ plus }}</p> 
  </div>
</template>

<script>
export default {
  name: 'MyCounter',
  data() {
    return {
      count: 1,
    }
  },
  computed: {
    plus() {
      console.log('计算属性被执行了')
      return this.count * 2
      // 计算属性侧重于得到一个计算的结果,因此计算属性中要有return返回值
    },
  },
}
</script>

3.计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

<template>
  <div>
    <input type="text" v-model.number="count" />
    <p>{{ count }} 乘以 2 的值为:{{ plus }}</p>
    <p>{{ count }} 乘以 2 的值为:{{ plus }}</p>
    <!-- 上面两行代码只执行第一个,打印一次"计算属性被执行了",只有当data中与之相关的依赖项发生变化时(如count发生改变)才会继续执行 -->
    <p>{{ count }} 乘以 2 的值为:{{ plus() }}</p>
    <p>{{ count }} 乘以 2 的值为:{{ plus() }}</p>
    <!-- 上面两行代码都会被执行,打印两次"方法被执行了" -->
  </div>
</template>

<script>
export default {
  name: 'MyCounter',
  data() {
    return {
      count: 1,
    }
  },
  computed: {
    plus() {
      console.log('计算属性被执行了')
      return this.count * 2
      // 计算属性侧重于得到一个计算的结果,因此计算属性中要有return返回值
    },
  },
  methods: {
    plus() {
      console.log('方法被执行了')
      return this.count * 2
    }
  }
}
</script>

<style></style>

相对于方而言,计算属性会缓存计算的结果,只有计算属性的依赖项发生变化时,才会重新进行运算,因此计算属性的性能更好。

注意:

1.计算属性必须定义到computed节点中

2.计算属性必须必须是一个function函数

3.计算属性必须有返回值

4.计算属性必须当作普通属性使用

           

举报

相关推荐

0 条评论