Vue面试computed、watch和methods的区别

1.methods
不存在缓存，执行一次运行一次，执行n次，运行n次

  <input type="text" v-model="textValue" v-on:keyup.13="handleKeyUp(num, $event)">
  methods: {
        handleKeyUp(num, e) {
          // 按的是回车键
         if (num.keyCode === 13) {
        alert('按了回车键')
        }
      },

2.computed

• 计算属性是被动的，别人改变我才改变
• 没有参数，需要有返回值
• 可以同时依赖多个响应式数据
• 多数情况下优先选用计算属性

 data() {
        return {
          msg: 'hello Vue!',
          count: 10
       }
  },
 computed: {
        // 计算属性的本质是函数,并且return出想要的结果
        // 使用的时候不需要调用
        reverseMsg() {
          return this.msg.split('').reverse().join('') + this.count;
        },
        reverseMsg2() {
          return this.reverseMsg + this.reverseMsg
        }
      }

3.侦听属性

• 侦听属性是主动，我改变让别人改变，或者触发某些事件
• 有两个参数，不需要返回值
• 没有办法监听多个
• 可以使用异步

 mounted() {
        setTimeout(() => {
          this.msg = 'hi Vue!'
        }, 2000);
      },
 watch: {
        // 里面是函数
        // 函数名就是我们要监听的响应式数据/计算属性
        // 里面默认有两个参数
        msg(val, oldVal) {
          console.log(val, oldVal)
        }
      }