计算属性的定义与使用

今天彩票也没中奖呢

已于 2024-02-26 11:22:04 修改

阅读量121

点赞数 2

文章标签：前端 javascript vue.js

于 2024-02-26 10:55:40 首次发布

本文链接：https://blog.csdn.net/changchang_/article/details/136293649

版权

<template>
  <div>{{ publicMessage }}</div>
</template>

<script setup>
  import { reactive, computed } from 'vue'
  const author = reactive({
    name: 'zhangsan',
    books: [
      'books1',
      'books2',
      'books3'
    ]
  })
  const publicMessage = computed(() => {
    return author.books.length > 0 ? 'YES' : 'NO'
  })
</script>

<body>
  <div>{{ publicMessage }}</div>
</body>
<script>
  export default {
    data(){
      author : {
        name: 'zhangsan',
        books: [
          'books1',
          'books2',
          'books3'
        ]
      }
    },
    methods: {},
    computed: {
      publicMessage () {
        return author.books.length > 0 ? 'YES' : 'NO'
      }
    }
  }
</script>

1. 计算属性特点：

1.1 计算结果不保存，data数据无改变，data中任何数据得变动，都会导致重复计算。

1.2 计算结果的改变，依赖于计算数据的变动。

1.3 计算属性默认只读，通过getter、setter修改计算属性。

注：getter中只做计算，不能更改状态、做异步请求、或者更改DOM

1.4 计算属性应该被视为只读，永远不应该被修改；即使一定要修改值，也应该去修改依赖数据源的值。

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

<body>
  <div>{{ fullName }}</div>
</body>
<script>
  export default {
    data(){
      firstname: 'John',
      lastname: 'Doe'
      }
    },
    methods: {},
    computed: {
      fullName: {
        get(){
          return this.firstname + ' ' + this.lastname
        },
        set(newValue) {
          const name = newValue.split(' ')
          this.firstname = name[0]
          this.lastname = name[name.length -1]
        }
      }
    }
  }
</script>

2. 计算属性的缺点：

2.1 增加资源消耗 —— 使用过滤器

2.2 异步无法监听 —— 添加watch监听

今天彩票也没中奖呢

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
计算属性的定义与使用

1.1 计算结果不保存，data数据无改变，data中任何数据得变动，都会导致重复计算；1.2 计算结果的改变，依赖于计算数据的变动。2.2 异步无法监听 —— 添加watch监听。2.1 增加资源消耗 —— 使用过滤器。
复制链接

扫一扫