快捷導(dǎo)航

關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解

更新時(shí)間：2022年07月10日 09:56:21 作者：alical

computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下

1.定義

computed是vue的計(jì)算屬性，是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)進(jìn)行更新

2.用法

一般情況下，computed默認(rèn)使用的是getter屬性

3.computed的響應(yīng)式依賴(緩存)

1. computed的每一個(gè)計(jì)算屬性都會(huì)被緩存起來(lái)，只要計(jì)算屬性所依賴的屬性發(fā)生變化，計(jì)算屬性就會(huì)重新執(zhí)行，視圖也會(huì)更新。下面代碼中，計(jì)算屬性fullName，它依賴了firstName和lastName這兩個(gè)屬性，只要它們其中一個(gè)屬性變化，fullName就會(huì)重新執(zhí)行。

2.computed計(jì)算屬性會(huì)被緩存，在下面代碼中使用了兩次fullName，但在控制臺(tái)只輸出了一次 “這是fullName”。

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName" />
    </div>
    <div>
      名：<input type="text" v-model="lastName" />
    </div>
    <!-- 調(diào)用兩次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "張",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("這是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

4.應(yīng)用場(chǎng)景

當(dāng)一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響時(shí)，可以使用computed

1.本組件計(jì)算

2.計(jì)算props的值

3.計(jì)算vuex的state或者getters值的變化

附：計(jì)算屬性的 getter 與 setter

默認(rèn)情況下，計(jì)算屬性函數(shù)是一個(gè) getter 函數(shù)，如果計(jì)算屬性只有 get 需求，則可以簡(jiǎn)寫

<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
? ? <div id="app">
? ? ? ? <div>
? ? ? ? ? ? <!-- <input type="checkbox" v-model='isAll'> -->
? ? ? ? ? ? <input type="text" v-model='n'>
? ? ? ? ? ? +
? ? ? ? ? ? <input type="text" v-model='m'>
? ? ? ? ? ? =
? ? ? ? ? ? <input type="text" v-model='x'>
? ? ? ? </div>
? ? ? ? {{o}}
? ? </div>
? ? <script>
? ? ? ? let vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? is: true,
? ? ? ? ? ? ? ? obj: {
? ? ? ? ? ? ? ? ? ? // a: 1
? ? ? ? ? ? ? ? ? ? a: 1
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? n: '',
? ? ? ? ? ? ? ? m: ''
? ? ? ? ? ? },
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? //計(jì)算屬性在這里寫的屬性不要在data重復(fù)寫 跟data中的數(shù)據(jù)一樣可以通過(guò)vm.獲取或者修改
? ? ? ? ? ? ? ? isAll: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //只要獲取這個(gè)屬性就會(huì)觸發(fā)get這個(gè)函數(shù)
? ? ? ? ? ? ? ? ? ? ? ? console.log(1);
? ? ? ? ? ? ? ? ? ? ? ? return this.is
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? set(val) {
? ? ? ? ? ? ? ? ? ? ? ? // val 設(shè)置的值
? ? ? ? ? ? ? ? ? ? ? ? this.isAll = this.is
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? x: {
? ? ? ? ? ? ? ? ? ? // 只要是依賴的值（必須有setter和getter響應(yīng)的數(shù)據(jù)）發(fā)生改變了就會(huì)重新計(jì)算自己的值
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? // set(){
? ? ? ? ? ? ? ? ? ? // ? ? Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? // }

? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? o: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //如果沒有在data的obj中初始化 就沒有g(shù)etter和setter響應(yīng) 當(dāng)改變this.obj.a的時(shí)候不會(huì)影響 數(shù)據(jù)o
? ? ? ? ? ? ? ? ? ? ? ? return this.obj.a + 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ss: {
? ? ? ? ? ? ? ? ? ? get() { },
? ? ? ? ? ? ? ? ? ? //計(jì)算屬性必須要有g(shù)et可以沒有set
? ? ? ? ? ? ? ? ? ? //v-model綁定的計(jì)算屬性有g(shù)et和set
? ? ? ? ? ? ? ? ? ? //其他的一般只有g(shù)et
? ? ? ? ? ? ? ? ? ? set() { }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? xx() {
? ? ? ? ? ? ? ? ? ? //如果這個(gè)計(jì)算屬性只有g(shù)et可以寫成一個(gè)函數(shù)的形式
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? bb() {
? ? ? ? ? ? ? ? ? ? //第一次獲取的時(shí)候依賴值沒有發(fā)生改變但是也會(huì)默認(rèn)執(zhí)行一次
? ? ? ? ? ? ? ? ? ? // 必須要有return ?不支持異步
? ? ? ? ? ? ? ? ? ? let a = 'kk';
? ? ? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? a = this.aa + a
? ? ? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? ? ? ? ? console.log(a);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? return this.aa
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

</html>

參考：https://cn.vuejs.org/v2/guide/computed.html

https://segmentfault.com/a/110000012948175