【vue3 computed 的讲解案例使用 v3.2+新特性】

有时我们需要依赖于其他状态(普通proxy响应式数据)的状态(computed响应式数据)：
在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 函数：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

案例1：

接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。

修改count.value 或 str.value其中一个，test1 的getter都会触发，并return新结果
import { ref,computed } from 'vue';
let count = ref(147)
let str = ref('字符串1')
let test1 = computed(() => str.value + count.value + '不可变的响应式ref对象')
//test1.value = 666 修改 test1.value 会无效且抛出警告
// 修改count.value 或 str.value其中一个，test1 的getter都会触发，并return新结果

案例2：

接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

该案例功能常用于父组件双向绑定，在子组件 props 与 computed结合使用很方便！
import { ref,computed } from 'vue';
let test2_count = ref(0)let test2 = computed({// test2.value = 3 则会触发 set()// set/get里都不能操作test2.value，否则会报错get: () => {return test2_count.value + '可变的响应式ref对象'},set: (val:any) => {test2_count.value = val - 11}
})
test2.value = 1 // test2_count.value = 1 - 11

功能3：调试 Computed

computed 可接受一个带有 onTrack 和 onTrigger 选项的对象作为第二个参数：

onTrack 会在某个响应式 property 或 ref 作为依赖被追踪时调用。

onTrigger 会在侦听回调被某个依赖的修改触发时调用。

所有回调都会收到一个 debugger 事件参数，其中包含了一些依赖相关的信息。推荐在这些回调内放置一个 debugger 语句以调试依赖。
import { ref,computed } from 'vue';
let count = ref(147)
let countComputed = computed(() => count.value + '计算属性',{onTrack(e) {// 当 count.value 作为依赖被追踪时触发。用人话将就是被访问的时候触发console.log('onTrack',e);},onTrigger(e) {// 当 count.value 被修改时触发console.log('onTrigger',e);}
})
注意：onTrack 和 onTrigger 仅在开发模式下生效！！

QQ交流群：522976012 ，欢迎来玩。

聚焦vue3，但不限于vue，任何前端问题，究其本质，值得讨论，研究与学习。

【vue3 computed 的讲解案例使用 v3.2+新特性】相关推荐

OpenStack Keystone v3 API新特性
OpenStack Keystone v3 API新特性原连接 http://blog.chinaunix.net/uid-21335514-id-3497996.html keystone的v3 ...
Android之仿网易V3.5新特性
为什么80%的码农都做不了架构师?>>> 最近,网易新闻更新到V3.5了,给我印象最深的是第一次进应用时显示新特性的ViewPager变成垂直滑动了.于是,小小的模仿了一下,我 ...
Android P v3签名新特性
新版v3签名在v2的基础上,仍然采用检查整个压缩包的校验方式.不同的是在签名部分增可以添加新的证书,即可以不用修改ApplicationID来完成证书的更新迭代. 本文引用自 https://xuan ...
深入浅出讲解MSE Nacos 2.0新特性
简介:随着云原生时代的到来,微服务已经成为应用架构的主流,Nacos也凭借简单易用.稳定可靠.性能卓越的核心竞争力成为国内微服务领域首选的注册中心和配置中心:Nacos2.0更是把性能做到极致,让业务 ...
深入浅出讲解 MSE Nacos 2.0 新特性
前言 MSE从2020年1月发布Nacos1.1.3版本引擎,支持在公有云环境全托管的方式使用Nacos作为注册中心.2020年7月发布Nacos1.2.1版本支持元配置数据管理,支持微服务应用在运行 ...
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
一文了解Composition API新特性:ref.toRef.toRefs 一.
React 新特性 Hooks 讲解及实例(四)
想优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 使用 Ref Hooks 类组件中使用 Ref 一般有: String Ref Callback Ref CreateRef 上述在函数组 ...
Vite+Vue3+TypeScript基础知识案例
Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2.0已经很完善了,很多 ...
Vue3 - computed 计算属性（详细教程）
简介相信大家在 Vue2 中已经领略到了其功能,不再过多赘述了. 计算属性处理一些复杂的运算非常合适,对于任何包含响应式数据的复杂逻辑的表达式,都建议使用计算属性来完成,而不是臃肿的在模板中直接书写 ...

【vue3 computed 的讲解案例使用 v3.2+新特性】

【vue3 computed 的讲解案例使用 v3.2+新特性】相关推荐

最新文章

热门文章

【vue3 computed 的讲解 案例使用 v3.2+新特性】

【vue3 computed 的讲解 案例使用 v3.2+新特性】相关推荐

最新文章

热门文章

【vue3 computed 的讲解案例使用 v3.2+新特性】

【vue3 computed 的讲解案例使用 v3.2+新特性】相关推荐