快捷導(dǎo)航

vue計(jì)算屬性computed--getter和setter用法

更新時(shí)間：2023年01月20日 10:23:44 作者：王解

這篇文章主要介紹了vue計(jì)算屬性computed--getter和setter用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

計(jì)算屬性computed和方法methods的區(qū)別

計(jì)算屬性本質(zhì)上是包含getter和setter的方法

當(dāng)獲取計(jì)算屬性時(shí)，實(shí)際上是在調(diào)用計(jì)算屬性的getter方法。vue會(huì)收集計(jì)算屬性的依賴(lài)，并緩存計(jì)算屬性的返回結(jié)果。只有當(dāng)依賴(lài)變化后才會(huì)重新進(jìn)行計(jì)算。

方法沒(méi)有緩存，每次調(diào)用方法都會(huì)導(dǎo)致重新執(zhí)行。

計(jì)算屬性的getter和setter參數(shù)固定，getter沒(méi)有參數(shù)，setter只有一個(gè)參數(shù)。而方法的參數(shù)不限。

由于有以上的這些區(qū)別，因此計(jì)算屬性通常是根據(jù)已有數(shù)據(jù)得到其他數(shù)據(jù)，并在得到數(shù)據(jù)的過(guò)程中不建議使用異步、當(dāng)前時(shí)間、隨機(jī)數(shù)等副作用操作。

實(shí)際上，他們最重要的區(qū)別是含義上的區(qū)別。計(jì)算屬性含義上也是一個(gè)數(shù)據(jù)，可以讀取也可以賦值；方法含義上是一個(gè)操作，用于處理一些事情。

計(jì)算屬性的完整寫(xiě)法

      computed: {
        propsName: {
          a:['aavsx'],
          get(){
            return this.a;
          },
          set(val){
            this.a = val
          }
        },
      }

注：

1.get方法是當(dāng)屬性被讀取時(shí)觸發(fā)，在計(jì)算屬性中，如果計(jì)算屬性依賴(lài)沒(méi)有發(fā)生改變（例子中this.a就是計(jì)算屬性的依賴(lài)，只要this.a不發(fā)生改變，它就不會(huì)再次調(diào)用get方法），get只會(huì)調(diào)用一次，并且會(huì)將返回結(jié)果緩存起來(lái)。

2.get方法必須需要一個(gè)返回值，否者會(huì)報(bào)出以下錯(cuò)誤：

3.如果set方法沒(méi)有改變get方法中的依賴(lài)（this.a)，則get方法不會(huì)再次調(diào)用，而是直接使用緩存值

<template>
    <div>
    {{propsName = 'add'}} //結(jié)果是add
    {{propsName}}//結(jié)果是 a ，以為set方法沒(méi)有改變this.a這個(gè)依賴(lài)
    </div>
</template>

<script>
export default {
  data(){
    return {
      a:'a',
      b:'b'
    }
  },
  computed: {
    propsName: {
      get(){
        return this.a
      },
      set(val){
       this.b = val
      }
    },
  }
}
</script>

一般情況下，計(jì)算屬性只使用getter方法，所以計(jì)算屬性可以簡(jiǎn)寫(xiě)為：

computed: {
  propName(){
    // getter
    //必須要有返回值
  }
}

vue3計(jì)算屬性computed實(shí)現(xiàn)原理

computed實(shí)現(xiàn)原理

computed特性

computed可以傳入一個(gè)函數(shù)，也可以傳入一個(gè)對(duì)象（帶有g(shù)et和set方法）,計(jì)算屬性返回一個(gè)計(jì)算值，該值通過(guò)value屬性訪(fǎng)問(wèn)，當(dāng)參與計(jì)算的數(shù)據(jù)發(fā)生改變，則重新計(jì)算，不發(fā)生改變，則直接返回之前緩存的值

render 只執(zhí)行了一次

   const { effect, reactive,computed } = VueReactivity

        const state = reactive({
            firstName:'s',
            lastName:'x'
        })
        let fullName = computed(()=>{
            console.log('runner')
            return state.firstName + state.lastName
        })
        console.log(fullName.value)
        console.log(fullName.value)
        console.log(fullName.value)

計(jì)算屬性返回值可以作為屬性參與effect更新

 const { effect, reactive,computed } = VueReactivity

        const state = reactive({
            firstName:'s',
            lastName:'x'
        })
       
        let fullName = computed({
            get(){
                return state.firstName + state.lastName
            },
            set(value){
                state.lastName = value
            }
        })
        fullName.value = 100
        effect(()=>{
            app.innerHTML = fullName.value
        })
        setTimeout(()=>{
            state.firstName = 'x'
        },1000)

實(shí)現(xiàn)思路

導(dǎo)出一個(gè)computed函數(shù),函數(shù)內(nèi)部有兩個(gè)變量getter、setter

函數(shù)傳入一個(gè)對(duì)象或者函數(shù)。

如果是函數(shù)，則將該函數(shù)賦值給getter,setter賦值為一個(gè)報(bào)錯(cuò)函數(shù)(即拋出錯(cuò)誤)

如果是對(duì)象，則將其get和set分別賦值給getter和setter

創(chuàng)建computedRefImpl類(lèi)，有兩個(gè)形參(getter、setter),在computer函數(shù)中實(shí)例化并返回該類(lèi)

類(lèi)中在實(shí)例的constructor構(gòu)造器中通過(guò)實(shí)例化ReactiveEffect類(lèi)，傳入getter，實(shí)現(xiàn)對(duì)計(jì)算屬性函數(shù)傳入的屬性的數(shù)據(jù)綁定，傳入第二個(gè)參數(shù)，在數(shù)據(jù)更新完之后將_dirty標(biāo)記為true，并實(shí)現(xiàn)數(shù)據(jù)更新（triggerEffects）

私有變量_dirty控制數(shù)據(jù)是否更新

其有兩個(gè)方法get value 和 set value

當(dāng)調(diào)用get，讓ReactiveEffect實(shí)例運(yùn)行，獲取其返回值賦值給內(nèi)部變量_value，并返回改變量，將_dirty設(shè)置為false，表示沒(méi)有新的數(shù)據(jù)改變了，可以使用緩存,判斷當(dāng)前環(huán)境是否存在activeEffect，存在則進(jìn)行依賴(lài)收集（調(diào)用trackEffects）

調(diào)用set則運(yùn)行setter

完整代碼如下：

import { isFunction } from "@vue/shared"
import { activeEffect, trackEffects, triggerEffects,ReactiveEffect } from "./effect";

export function computed(getterOrOptions){
    let getter = null;
    let setter = null;
    let fn = ()=>{
        throw new Error("this function is onlyRead");
        
    }
    let isGetter = isFunction(getterOrOptions)
    if(isGetter){
        getter = getterOrOptions
        setter = fn
    }
    else {
        getter = getterOrOptions.get
        setter = getterOrOptions.set || fn
    }

    return new computedRefImpl(getter,setter)
}

class computedRefImpl{
    private _value = null
    private _dirty = true
    public effect = null
    public deps = null
    constructor(getter,public setter){
        this.effect = new ReactiveEffect(getter,()=>{
            if(!this._dirty){
                this._dirty = true
                triggerEffects(this.deps)
            }
        })
    }
    get value(){
        debugger
        if(activeEffect){
            // 存在effect，則進(jìn)行依賴(lài)收集
            trackEffects(this.deps ||  (this.deps = new Set()) )
        }
        if(this._dirty){
            this._dirty = false
            this._value = this.effect.run()
        }
        return this._value
    }
    set value(newValue){
        this.setter(newValue)
    }
}