Vue中计算属性和侦听器的区别你都找到吗?

计算属性和侦听器的六大区别

1.作用不同

1.计算属性的作用： 解决模板语法渲染代码冗余问题（官网原话哟）

简单来说：就是如果我们渲染一个数据需要经过计算才能得到，那么就可以使用计算属性。例如：判断购物车是否全选，求累加和等经典计算场景

2.侦听器作用 : 监听data中某一个数据的变化

如果我们希望可以实时的对data中某一个数据进行监听，就可以使用侦听器，
来几个业务感受一下吧
注册表单，需要实时显示这个账户是否已注册
搜索框推荐搜索列表，需要实时侦听搜索框变化

2.语法不同

• (1)计算属性有返回值，侦听器没有返回值

• (2)计算属性可以新增属性，而侦听器只能侦听data中的属性

  1.计算属性有两种写法
  get(){ return 计算属性值 }

  一定有返回值

  set(val){ //val是设置的值 }

  2.侦听器也有两种写法： 普通侦听与深度侦听

3.缓存机制不同

计算属性有缓存机制，侦听器没有缓存机制

4.代码不同

计算属性不支持异步操作，侦听器支持异步操作

5.监听数量不同

计算属性可以监听多个数据变化，侦听器只能监听一个数据变化

6.初始执行时机不同

• 计算属性在页面一加载的时候就会执行一次
• 侦听器只有在数据第一次发生变化的时候才会执行