我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

计算属性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)
    }
}

总结

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

这篇文章主要介绍了vue计算属性computed--getter和setter用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-28

Vue的computed计算属性怎么用

这篇文章主要介绍“Vue的computed计算属性怎么用”,在日常操作中,相信很多人在Vue的computed计算属性怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue的computed计算属性怎么用
2023-06-29

vue中计算属性computed怎么使用

这篇“vue中计算属性computed怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中计算属性computed
2023-07-02

Vue中的计算属性computed怎么用

今天小编给大家分享一下Vue中的计算属性computed怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、计算属性co
2023-07-04

聊聊Vue中的计算属性computed

computed 是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新。官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性。
2022-11-22

vue计算属性computed方法内传参方式

这篇文章主要介绍了vue计算属性computed方法内传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

Vue中computed计算属性和data数据怎么获取

这篇文章主要介绍“Vue中computed计算属性和data数据怎么获取”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中computed计算属性和data数据怎么获取”文章能帮助大家解决问题。
2023-06-29

怎么用redux实现computed计算属性

这篇文章主要介绍“怎么用redux实现computed计算属性”,在日常操作中,相信很多人在怎么用redux实现computed计算属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用redux实现com
2023-06-30

vue 过滤、模糊查询及计算属性 computed详解

计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的,这篇文章主要介绍了vue 过滤、模糊查询(计算属性 computed),需要的朋友可以参考下
2022-11-13

Vue监听属性和计算属性怎么使用

这篇文章主要讲解了“Vue监听属性和计算属性怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue监听属性和计算属性怎么使用”吧!一、watch监听属性这个属性用来监视某个数据的变化,
2023-06-25

Vue基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

计算属性就是Vue实例选项中的computed,computed的值是一个对象类型,对象中的属性值为函数,而且这个函数没办法接收参数,这篇文章主要介绍了Vue基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下
2022-11-13

vue怎么调用计算属性方法

在Vue中,计算属性是一种特殊的属性,它可以根据已有属性的值计算出新的属性值。在开发中,我们通常会将一些需要计算的属性定义为计算属性,以便在模板中直接使用,避免了在JS代码中频繁地进行逻辑计算。但是,有时候我们在Vue组件中需要调用计算属性的方法(不是取它的值),这该如何实现呢?在本文中,我们会介绍几种方法来实现这种需求。## 直接调用计算属性Vue组件中的计算属性可以像普通的
2023-05-14

编程热搜

目录