Vue之computed 和 wacth

本文深入解析Vue.js中的计算属性computed与监听属性watch,阐述它们存在的意义、内部机制及底层实现方式。通过对比methods中的普通函数,解释计算属性如何优化性能,减少不必要的计算,以及监听属性如何在数据变化时执行异步操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

计算属性computed ,监听属性wacth:

计算属性存在的意义:

在html中插入一个普通函数时(methdos中的函数),每次修改数据,html结果就会刷新(局部的重排和重绘)。同时普通函数也会重复执行。这样性能大打折扣。所以就有了计算属性computed。

computed的内部机制:

当他依赖的值发生变化的时候。他会重新计算

内部设置有缓存,会缓存当前数据。会监听当前值的变化。内部有get(获取值的时候触发)和set(设置值的时候触发)方法。当监听的数据修改时,会执行一系列的逻辑操作。

computed的底层核心实现:

借用了对象上的方法:Object.defineProperty 能实时对改变的数据监听。(响应式的核心实现,不过在vue3中更换了es6中新增的api)

 

监听属性存在的意义:

可以特定的监听某个数据,内部也设置有缓存。

虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watch,在数据变化时来执行异步操作,这时watch是非常有用的。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值