计算属性和侦听器的六大区别
1.作用不同
1.计算属性的作用: 解决模板语法渲染代码冗余问题(官网原话哟)
简单来说
:就是如果我们渲染一个数据需要经过计算才能得到,那么就可以使用计算属性。例如:判断购物车是否全选,求累加和等经典计算场景
2.侦听器作用 : 监听data中某一个数据的变化
如果我们希望可以实时的对data中某一个数据进行监听,就可以使用侦听器,
来几个业务感受一下吧
注册表单,需要实时显示这个账户是否已注册
搜索框推荐搜索列表,需要实时侦听搜索框变化
2.语法不同
-
(1)计算属性有返回值,侦听器没有返回值
-
(2)计算属性可以新增属性,而侦听器只能侦听data中的属性
1.计算属性有两种写法
get(){ return 计算属性值 }一定有返回值
set(val){ //val是设置的值 }
2.侦听器也有两种写法: 普通侦听与深度侦听
3.缓存机制不同
计算属性有缓存机制,侦听器没有缓存机制
4.代码不同
计算属性不支持异步操作,侦听器支持异步操作
5.监听数量不同
计算属性可以监听多个数据变化,侦听器只能监听一个数据变化
6.初始执行时机不同
- 计算属性在页面一加载的时候就会执行一次
- 侦听器只有在数据第一次发生变化的时候才会执行