vue计算属性computed--getter和setter用法

• 计算属性computed和方法methods的区别
• 计算属性的完整写法
• vue3计算属性computed实现原理
• computed实现原理
• 总结

计算属性computed和方法methods的区别

计算属性本质上是包含getter和setter的方法

当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。

方法没有缓存，每次调用方法都会导致重新执行。

计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。而方法的参数不限。

由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。

实际上，他们最重要的区别是含义上的区别。计算属性含义上也是一个数据，可以读取也可以赋值；方法含义上是一个操作，用于处理一些事情。

计算属性的完整写法

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

注：

1.get方法是当属性被读取时触发，在计算属性中，如果计算属性依赖没有发生改变（例子中this.a就是计算属性的依赖，只要this.a不发生改变，它就不会再次调用get方法），get只会调用一次，并且会将返回结果缓存起来。

2.get方法必须需要一个返回值，否者会报出以下错误：

3.如果set方法没有改变get方法中的依赖（this.a)，则get方法不会再次调用，而是直接使用缓存值

template>
        div>
    {
{
propsName = 'add'}
}
 //结果是add    {
{
propsName}
}
    //结果是 a ，以为set方法没有改变this.a这个依赖    /div>
    /template>
    script>
export default {
  data(){
    return {
      a:'a',      b:'b'    }
  }
,  computed: {
    propsName: {
      get(){
        return this.a      }
,      set(val){
       this.b = val      }
    }
,  }
}
    /script>
    

一般情况下，计算属性只使用getter方法，所以计算属性可以简写为：

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

vue3计算属性computed实现原理

computed实现原理

computed特性

computed可以传入一个函数，也可以传入一个对象（带有get和set方法）,计算属性返回一个计算值，该值通过value属性访问，当参与计算的数据发生改变，则重新计算，不发生改变，则直接返回之前缓存的值

render 只执行了一次

   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)

计算属性返回值可以作为属性参与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)

实现思路

导出一个computed函数,函数内部有两个变量getter、setter

函数传入一个对象或者函数。

如果是函数，则将该函数赋值给getter,setter赋值为一个报错函数(即抛出错误)

如果是对象，则将其get和set分别赋值给getter和setter

创建computedRefImpl类，有两个形参(getter、setter),在computer函数中实例化并返回该类

类中在实例的constructor构造器中通过实例化ReactiveEffect类，传入getter，实现对计算属性函数传入的属性的数据绑定，传入第二个参数，在数据更新完之后将_dirty标记为true，并实现数据更新（triggerEffects）

私有变量_dirty控制数据是否更新

其有两个方法get value 和 set value

当调用get，让ReactiveEffect实例运行，获取其返回值赋值给内部变量_value，并返回改变量，将_dirty设置为false，表示没有新的数据改变了，可以使用缓存,判断当前环境是否存在activeEffect，存在则进行依赖收集（调用trackEffects）

调用set则运行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，则进行依赖收集            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)    }
}
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解
• Vue计算属性与监视(侦听)属性的使用深度学习
• Vue中关于computed计算属性的妙用

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！