五个区别

1. 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2. 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
3. computed就是计算属性，用来计算出一个值，这个值在调用的时候不需要加括号，可以直接当属性来用，会根据依赖自动缓存，要是依赖不变就不会重新计算；而watch在每次监听的值发生变化的时候都会执行回调。
4. watch里面有两个选项，一个immediate，表示是否在第一次渲染的时候要执行该函数，一个deep，若是我们要监听一个对象，表示是否要看对象里面的属性的变化
5. 使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----用户名展示、列表展示、购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框。

computed 例子（筛选男女生）

• 被计算出来的属性就是计算属性
• 将可以被计算出来的属性放在这里面

data() {
    return {
      users: [
        createUser("方方", "男"),
        createUser("圆圆", "女"),
        createUser("小新", "男"),
        createUser("小葵", "女")
      ],
      gender:''
    };
  },
computed:{
displayUsers(){
  const hash ={
    male:'男',
    female:'女'
  }
  const {users,gender}=this;
  if(gender===''){
     return users;
  }else(typeof gender === 'string'){
    return users.filter(u => u.gender === hash[gender]);
  }
}
}

链接：little-breeze-hdx44 - CodeSandbox

watch 用法

• 当数据变化时，就会执行一个函数

语法

• 类型：{ [key: string]: string | Function | Object | Array }
• immediate 表示是否在第一次监听的时候运行，默认不运行，加true 便运行
• deep 若是true则会深入了解对象里面的变化，里面的变化是否算对象的的变化

语法一

 watch: {
    object1: function (val, oldVal) {},
   
    object2: 'someMethod', // 方法名
      
    object3(){},
   
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    object4: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
   
    // 该回调将会在侦听开始之后被立即调用
    object5: {
      handler: 'someMethod',
      immediate: true
    },
   
    // 你可以传入回调数组，它们会被逐一调用
    object6: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
      
    // watch vm.e.f's value: {g: 5}
    'object.a': function (val, oldVal) { /* ... */ }
  }
复制代码

语法二

vm.$watch('xxx',fn(){
  
},
{
 deep: ...,
 immediate: ...
}