侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
vue

vue-计算属性

woku
2022-03-08 / 0 评论 / 0 点赞 / 83 阅读 / 2,331 字

计算属性:computed

干什么的

解决模板中的复杂的逻辑和复用的问题

对于任何复杂逻辑,你都应当使用计算属性

比如在template中要计算下面的逻辑

<template>
<div>
  <p>
    {{ list.length ? JSON.stringify(list) : '暂无数据'}}
  </p>
</div>
</template>

<script>
  
export default {
  name: 'App',
  data: function() {
    return {
      list: []
    }
  },
}
</script>

<style>
</style>
  • 模板、样式、逻辑尽可能的分离
  • 一段逻辑可能会在模板中的其他地方用到。

可以使用computed来代替上面的写法

怎么用

在template中像使用data数据一样使用computed中对应的计算属性

<template>
<div>
  <p>
    {{ info }}
  </p>
  <div>{{ info }}</div>
</div>
</template>

<script>
  
export default {
  name: 'App',
  data: function() {
    return {
      list: []
    }
  },
  computed: {
    info() {
      return this.list.length ? JSON.stringify(this.list) : '暂无数据'
    }
  }
}
</script>

<style>
</style>

特点

  • 计算属性会缓存上一次计算出的结果,放在vm实例上

  • 多次复用一个相同值的数据,计算属性只调用一次

  • 计算属性只会在内部逻辑依赖的数据发生了变化后,再次调用

<template>
<div>
  <p>
    {{ info }}
  </p>
  <div>{{ info }}</div>
  <button @click="changeList">change</button>
</div>
</template>

<script>
  
export default {
  name: 'App',
  data: function() {
    return {
      list: []
    }
  },
  computed: {
    info() {
      console.log('start compute')
      return this.list.length ? JSON.stringify(this.list) : '暂无数据'
    }
  },
  methods: {
    changeList() {
      this.list = []
    }
  }
  // info复用了2次,只打印了一次'start compute',也就是计算属性只调用一次(其他复用的取vm实例上挂载的缓存)
  // 点击button按钮,info计算属性依赖的list数据发生了变化,再次调用计算属性
}
</script>

<style>
</style>

计算属性的set

计算属性对应的函数,将作为property vm.info 的 getter 函数

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

<template>
<div>
  <p> {{ fullName }}</p>
</div>
</template>

<script>
  
export default {
  name: 'App',
  data: function() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName
      },
      set: function(newVal) {
        const names = newVal.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  created() {
    this.fullName = 'wo ku'
  }
}
</script>

<style>
</style>

计算属性 vs methods

在模板中使用计算属性时,自动调用getter函数。

是一个函数的话,那么也可以在methods中定义,在模板中手动调用

<template>
<div>
  <p>
    {{ info() }}
  </p>
  <div>{{ info() }}</div>
</div>
</template>

<script>
  
export default {
  name: 'App',
  data: function() {
    return {
      list: []
    }
  },
  computed: {
    
  },
  methods: {
    info() {
      console.log('start compute')
      return this.list.length ? JSON.stringify(this.list) : '暂无数据'
    }
  }
}
</script>

<style>
</style>

使用methods属性中的方法,每次复用都会再次执行函数

使用computed是基于它们的响应式依赖进行缓存的,如果依赖的数据没有发生变化,computed不会重新执行

0

评论区