目錄

一、Vue3計(jì)算屬性

1.Vue3計(jì)算屬性基礎(chǔ)使用

2.計(jì)算屬性緩存和常規(guī)方法

3.可寫計(jì)算屬性

一、Vue3計(jì)算屬性

1.Vue3計(jì)算屬性基礎(chǔ)使用

當(dāng)我們需要針對(duì)一些數(shù)據(jù)進(jìn)行一些邏輯運(yùn)算時(shí)可以使用模板中的表達(dá)式如下：

<script setup lang="ts">
import { reactive } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "薩姆",
    "小乖"
  ]
});
</script>
<template>
  <div>
    {{ onePeople.chineseName.length > 0 ? "有中文名" : "沒有" }}
  </div>
</template>
<style scoped></style>

但是如果在模板中寫太多邏輯，會(huì)讓模板變得臃腫，難以維護(hù)。因此我們可以使用計(jì)算屬性computed()?方法來描述依賴響應(yīng)式狀態(tài)的復(fù)雜邏輯，返回值為一個(gè)計(jì)算屬性 ref。

<script setup lang="ts">
import { reactive,computed } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "薩姆",
    "小乖"
  ]
});
// 一個(gè)計(jì)算屬性 ref
const haveChineseName = computed<string>(() => {
  return onePeople.chineseName.length > 0 ? "有中文名" : "沒有"
})
</script>
<template>
  <div>
    {{ haveChineseName }}
  </div>
</template>
<style scoped></style>

2.計(jì)算屬性緩存和常規(guī)方法

<script setup lang="ts">
import { reactive,computed } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "薩姆",
    "小乖"
  ]
});
// 一個(gè)計(jì)算屬性 ref
const haveChineseName = computed<string>(() => {
  return onePeople.chineseName.length > 0 ? "有中文名" : "沒有"
})
function haveChineseNameFun ():string {
    return onePeople.chineseName.length > 0 ? "有中文名" : "沒有"
}
</script>
<template>
  <div>
    {{ haveChineseName }}
  </div>
  <div>
    {{ haveChineseNameFun() }}
  </div>
</template>
<style scoped></style>

我們可以看到兩種方式在結(jié)果上確實(shí)是完全相同的，然而，不同之處在于計(jì)算屬性值會(huì)基于其響應(yīng)式依賴被緩存。一個(gè)計(jì)算屬性僅會(huì)在其響應(yīng)式依賴更新時(shí)才重新計(jì)算。這意味著只要?onePeople不改變，無論多少次訪問?haveChineseName都會(huì)立即返回先前的計(jì)算結(jié)果，而不用重復(fù)執(zhí)行 getter 函數(shù)

如下：計(jì)算屬性永遠(yuǎn)不會(huì)更新，因?yàn)?Date.now()?并不是一個(gè)響應(yīng)式依賴

相比之下，方法調(diào)用總是會(huì)在重渲染發(fā)生時(shí)再次執(zhí)行函數(shù)。

<script setup lang="ts">
import {  computed } from "vue";
const now = computed<number>(() => Date.now());
function nowTime(): number {
  return Date.now();
}
</script>
<template>
  <div>
    {{ now }}
  </div>
  <div>
    {{ now }}
  </div>
  <div>
    {{ now }}
  </div>
  <div>
    {{ nowTime() }}
  </div>
  <div>
    {{ nowTime() }}
  </div>
  <div>
    {{ nowTime() }}
  </div>
</template>
<style scoped></style>

當(dāng)我們每增加一個(gè)包含nowTime的div時(shí)，會(huì)發(fā)現(xiàn)頁面上的nowTime的值會(huì)相應(yīng)的發(fā)生變化，而now并不會(huì)。

所以當(dāng)我們有一個(gè)非常耗性能的計(jì)算屬性?list，需要循環(huán)一個(gè)巨大的數(shù)組并做許多計(jì)算邏輯，并且可能也有其他計(jì)算屬性依賴于?list。沒有緩存的話，我們會(huì)重復(fù)執(zhí)行非常多次?list?的 getter，然而這實(shí)際上沒有必要！如果你確定不需要緩存，那么也可以使用方法調(diào)用。

3.可寫計(jì)算屬性

計(jì)算屬性默認(rèn)是只讀的。當(dāng)你嘗試修改一個(gè)計(jì)算屬性時(shí)，你會(huì)收到一個(gè)運(yùn)行時(shí)警告。

如下：

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('Sam')
const lastName = ref('xiaoguai')
const fullName = computed<string>(() => {
  return firstName.value + ' ' + lastName.value;
});
fullName.value = "samxiaoguai"
</script>
<template>
  <div>
    {{ fullName }}
  </div>
</template>
<style scoped></style>

我們會(huì)看到一個(gè)警告??：

Write operation failed: computed value is readonly

因此如果你需要用到“可寫”的屬性，你可以通過同時(shí)提供 getter 和 setter 來創(chuàng)建

如下：

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('Sam')
const lastName = ref('xiaoguai')
const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我們這里使用的是解構(gòu)賦值語法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
fullName.value = "sam xiaoguai"
</script>
<template>
  <div>
    {{ fullName }}
  </div>
</template>
<style scoped></style>

有問題可以在下面評(píng)論，我會(huì)為大家解答，如果此文對(duì)大家有幫助，歡迎大家點(diǎn)點(diǎn)關(guān)注啊，博主在此感謝。文章來源地址http://www.zghlxwxcb.cn/news/detail-424551.html

到了這里，關(guān)于Vue3淺談：（二）Vue3計(jì)算屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！