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]);
  }
}
}

缓存

如果依赖的属性没有变化就不会重新计算

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: ...
}

区别（面试题）

computed 和 watch的区别：

• computed就是计算属性，用来计算出一个值，这个值在调用的时候不需要加括号，可以直接当属性来用，会根据依赖自动缓存，要是依赖不变就不会重新计算

• watch就是监听侦听，某个属性变化了，便执行一个函数。里面有两个选项，一个immediate，表示是否在第一次渲染的时候要执行该函数，一个deep，若是我们要监听一个对象，表示是否要看对象里面的属性的变化
• 如果一个数据依赖其他数据，那么可以将这个数据设计为computed，如果你需要在数据变化的时候做一些事情，你可以用watch来监听数据变化