1.作用不同

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

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

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

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

2.语法不同

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

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

• 1.计算属性有两种写法

  • get(){ return 计算属性值 }
    • 一定有返回值
  • set(val){ //val是设置的值 }

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

3.缓存机制不同

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

4.代码不同

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

5.监听数量不同

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

6.初始执行时机不同

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

喜欢点个赞哟