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

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

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

1.定義

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

2.用法

一般情況下，computed默認使用的是getter屬性

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

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

2.computed計算屬性會被緩存，在下面代碼中使用了兩次fullName，但在控制臺只輸出了一次 “這是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.應用場景

當一個數(shù)據(jù)受多個數(shù)據(jù)影響時，可以使用computed

1.本組件計算

2.計算props的值

3.計算vuex的state或者getters值的變化

附：計算屬性的 getter 與 setter

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

<!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: {
? ? ? ? ? ? ? ? //計算屬性在這里寫的屬性不要在data重復寫 跟data中的數(shù)據(jù)一樣可以通過vm.獲取或者修改
? ? ? ? ? ? ? ? isAll: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //只要獲取這個屬性就會觸發(fā)get這個函數(shù)
? ? ? ? ? ? ? ? ? ? ? ? console.log(1);
? ? ? ? ? ? ? ? ? ? ? ? return this.is
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? set(val) {
? ? ? ? ? ? ? ? ? ? ? ? // val 設置的值
? ? ? ? ? ? ? ? ? ? ? ? this.isAll = this.is
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? x: {
? ? ? ? ? ? ? ? ? ? // 只要是依賴的值（必須有setter和getter響應的數(shù)據(jù)）發(fā)生改變了就會重新計算自己的值
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? // set(){
? ? ? ? ? ? ? ? ? ? // ? ? Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? // }

? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? o: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //如果沒有在data的obj中初始化 就沒有g(shù)etter和setter響應 當改變this.obj.a的時候不會影響 數(shù)據(jù)o
? ? ? ? ? ? ? ? ? ? ? ? return this.obj.a + 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ss: {
? ? ? ? ? ? ? ? ? ? get() { },
? ? ? ? ? ? ? ? ? ? //計算屬性必須要有g(shù)et可以沒有set
? ? ? ? ? ? ? ? ? ? //v-model綁定的計算屬性有g(shù)et和set
? ? ? ? ? ? ? ? ? ? //其他的一般只有g(shù)et
? ? ? ? ? ? ? ? ? ? set() { }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? xx() {
? ? ? ? ? ? ? ? ? ? //如果這個計算屬性只有g(shù)et可以寫成一個函數(shù)的形式
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? bb() {
? ? ? ? ? ? ? ? ? ? //第一次獲取的時候依賴值沒有發(fā)生改變但是也會默認執(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