vue3 computed 属性笔记

已于 2023-01-06 11:14:37 修改
阅读量340 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-01-06 11:05:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Flippedguky/article/details/128575511
版权

computed 具有缓存的特点

computed 对象是一个类的实例对象
computed 对象本质上就是 ComputedRefImpl 的实例对象

实例属性

dep属性
是当computed 发生变化时需要通知computed对象进行重新渲染 这里dep就是存储那行effect依赖了该computed

effect属性
除了computed 发生改变时依赖的computed 重新渲染 另外计算属性中依赖的响应式数据
发生改变时 该computed 也会进行重新渲染 简单的说一个computed 也是一个effct 它对它内部
使用响应式的数据进行依赖收集

_value
computed 是具有缓存的特点 那么每次改变计算的值需要存储 这里的_value就是computed
存储值的位置

_dirty
当每次访问computed时 就是通过_dirty来进行判断本次computed 是否需要重新计算如果不需要则直接返回_values属性

__v_isReadonly
这个属性表示computed 是否可写 通常情况下computed 仅具有getter函数 那么此时computed 不具备写入是因为没有setter。所以当get/set都具有属性时该属性为false

Flipped525
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.0学习笔记之Vue中的computed属性
08-29
Vue 2.0学习笔记之Vue中的computed属性 computed 属性是 Vue 中的一个重要概念，它允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。在本篇文章中，我们将详细介绍 Vue 中的 computed...
Vue计算属性的学习笔记
12-04
本文为大家分享了Vue计算属性的学习笔记，供大家参考，具体内容如下 ①模板内的表达式实际上只用于简单的运算，对于复杂逻辑，使用计算机属性。 ②基础例子： <p>Original message:"{{message}}" <p>Computed ...
Vue3中的computed函数详解
linfeng_meng的博客
09-19 2801
computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。
【Vue3源码学习】响应式api: computed
ColdCoder的博客
03-03 2411
computed 是组件的计算属性，它的含义是依赖于其他状态而生成的状态，与响应式紧密相关。
vue3中的computed
最新发布
m0_60189088的博客
05-13 1121
computed计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改；如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。
Vue3警告：Write operation failed: computed value is readonly
ydcgye_的博客
01-13 4936
Vue3警告：Write operation failed: computed value is readonly
Vue3的计算属性——computed
omroji的博客
02-03 4672
在日常开发中我们可能会有这样的需求，当页面中某个变量发生改变时要同时修改另一个变量的值。一般我们会通过监听器或者回调事件的方式来实现同步更改，但是如果修改次数过多，内容复杂时就会导致代码冗余。为了解决这一问题，Vue3提供了 computed 计算属性。computed属性在Vue3中是一个非常重要的响应式特性。它可以根据其他响应式数据的变化自动更新自身的值，无需手动操作。computed属性可以接收一个函数作为参数，这个函数会在需要时被调用，并使用其他响应式数据的值进行计算。
【VUE3】计算属性及其缓存特性
芳草萋萋鹦鹉洲哦
03-28 745
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。
vue3入门基础
谢谢你的关注
08-01 2942
1.setup：一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口 -- 不能使用this 2.两种使用方式：1.作为组件选项：是一个函数，返回一个对象，对象中的property就可以在模板中访问......
前端之vue3计算属性computed
weixin_46372074的博客
05-24 7470
计算属性computed
Vue3 Computed 计算属性应用介绍
qq_59181609的博客
04-18 2892
一：Computed 介绍 1.简化代码，直接计算得出想要使用的数据 2.计算属性只在相关响应式依赖发生改变时它们才会重新求值。如果响应式数据发生变化，则计算属性会依据它所依赖的数据进行重新计算 3.计算属性是有缓存机制的 4.接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用 二：Computed 使用 1.组合式API注册 computed 方法 import { defineComponent, computed, onMounted, watch } from 'vue'
Vue.js的computed用来计算对象中的属性
热门推荐
undefined
02-19 2万+
最近学习了Vue.js Vue.js官网的computed计算属性文档 找到了计算属性computed，于是写了个栗子玩玩，于是就有了下面的这些 &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;a
vue3 computed筛选数据渲染列表
菜鸟先飞
03-24 835
vue3 中不支持filter过滤器，v-for和v-if 不可在同一个标签中同时使用，除了用template标签包裹一下，还可以用computed属性来实现。
Vue3中的computed用法
2201_75341058的博客
10-08 653
计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
vue3之computed
过客如期的博客
09-01 1971
是一个函数，接受一个函数作为参数，返回值是。
vue3学习（四）computed计算属性
weixin_70617457的博客
12-16 837
计算属性会立即返回之前的计算结果，而不必再次执行函数。只在相关响应式依赖发生改变时它们才会重新求值。还没有发生改变，多次访问。
vue3 中的 computed 和 watch 的使用
qq_54281798的博客
03-13 1533
computed 函数 import { computed , reactive } from 'vue'; setup(){ const person = reactive({ firstName : '张'， lastName : '三' }) // 计算属性 --- 简写 const fullName1 = computed(()=>{ return person.firstName + '-' + pers
动力节点vue2+vue3笔记
08-02
在他们的Vue2和Vue3的笔记中，引用[1]提到了Vue3中template标签下可以有多个根标签，这是一个新的特性。而引用[3]提到了Vue3中新增的配置项setup函数，它是一个函数，用于配置组件中所用到的data、methods、computed...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值