vue 数据,方法,计算属性和侦听器

导读:本篇文章讲解 vue 数据,方法,计算属性和侦听器,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

vue的计算属性get和set

计算属性是用来存储数据,但具有以下几个特点:

1.数据可以进行逻辑处理操作。
2.对计算属性中的数据进行监视。
3.可以缓存文件,提高游览器性能。

计算属性和普通属性的区别:
1.计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化
2.计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存计算的结果,不会多次执行。

get和set

计算属性由两部分组成,get和set,分别用来获取计算属性和设置计算属性。
默认只有get,如果需要set,要自己添加

eg:求 count *price的 值 ,使用computed计算属性
在这里插入图片描述

页面显示结果:
在这里插入图片描述
当我在控制台动态改变 price 的值时,页面上的值也会跟着变

在这里插入图片描述

也可以使用方法来做

在这里插入图片描述

页面显示结果:
在这里插入图片描述
当我在控制台动态改变 price 的值时,页面上的值也会跟着变
在这里插入图片描述在这里插入图片描述
可以看出来 ,当数据发生变化时,使用 computed 和 方法,页面值都会重新渲染。

这样看起来,两者在使用时,并没有差异,但实际上仔细观察,还是有差异的

eg:使用 computed

在这里插入图片描述
页面渲染:
在这里插入图片描述

当修改 message值时,后边的时间戳数据并没有任何变化

在这里插入图片描述在这里插入图片描述

eg:使用 方法

在这里插入图片描述
在这里插入图片描述

当修改 message值时,后边的时间戳数据也会发生变化

在这里插入图片描述在这里插入图片描述

eg
在这里插入图片描述
eg: 当修改count 值时,后边的时间戳数据会跟着发生变化
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

watch 也可以实现上述功能

eg:
在这里插入图片描述
看起来和computed是一样的,但是watch需要写更多代码以及重新定义新的变量

总结

// data & methods & computed & watcher
computed 和 method 都能实现的一个功能,建议使用 computed ,因为有缓存
computed 和 watcher 都能实现的功能,建议使用 computed ,因为更加简洁

computed

当计算属性依赖的内容发生变更时,才会重新计算

方法

只有页面重新渲染,才会重新计算

this指向:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/79176.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!