vue修改计算属性的值_复习之Vue的计算属性、方法、侦听器的区别

49d6bb7ccb39f9043eb50d24c9605054.png

Vue的计算属性

计算属性的值一直存于缓存中,只要它依赖的data数据不改变,每次访问计算属性,都会立刻返回缓存的结果,而不是再次执行函数。如:

<

12a2b34675a73343b0661e5c5d9dfb49.png
欣欣:复习之Vue的计算属性​zhuanlan.zhihu.com
05dedf71d63d78d63cd920fe10e9f59a.png

Vue的方法

当使用方法时,每一次页面重新渲染,对应的方法都会重新执行一次,如:

<

16903a4f8bcbb947cfbec76c14f59c15.png

虽然在表达式中调用方法也可以实现同样的效果,但是使用``计算属性``和使用``方法``有着本质的区别。

在上面的例子中我们可以看到,一旦更改age的值,页面会重新渲染,此刻控制台中打印出`方法执行`这串字符串,代表着fullName这个函数执行了,但是我们并不需要该方法执行,因为改动的数据和这个函数没有任何关系,如果这个函数内的逻辑很复杂,那么对于性能来讲,也是一种消耗。但是利用计算属性做,就不会有这样的现象出现。

所以,计算属性和方法的最本质的区别:

计算属性是基于响应式依赖进行缓存的,计算属性的值一直存于缓存中,只要它依赖的data数据不改变,每次访问计算属性,都会立刻返回缓存的结果,而不是再次执行函数。

而方法则是每次触发重新渲染,调用方法将总会再次执行函数。

Vue侦听器

侦听属性,响应数据(data&computed)的变化,当数据变化时,会立刻执行对应函数。

<

09678fe609cd60f7423b4b548ba49f78.png
欣欣:复习之Vue侦听器​zhuanlan.zhihu.com
4470e2c0244a39f50fcbcec7b07afca3.png
侦听器 vs 计算属性
1. 两者都可以观察和响应Vue实例上的数据的变动。
2. watch擅长处理的场景是:一个数据影响多个数据。计算属性擅长处理的场景是:多个数据影响一个数据。
3. 在侦听器中可以执行异步,但是在计算属性中不可以。

当我们可以使用一个功能,使用计算属性、方法、侦听器都可以时,推荐使用计算属性。计算属性的模板较轻,有利于提高浏览器的性能。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页