computed和methods，watch的区别

一、computed和methods的区别

1. computed有缓存，只要监听的数据没有变化，计算属性就不会重新运行，性能更优
2. methods没有缓存，每次都会执行，一般是监听事件时使用

二、computed和watch的区别

1. computed可以监控多个值的变化，watch只能监听一个值的变化

• 如果一个值改变后需要处理的步骤比较多，使用watch
• 如果一个值需要多个值算出来，使用computed

2. computed首次加载就会执行，watch不会执行，如果需要第一次就需要将immediate改为true

3. computed是深度监听，watch如果需要深度监听，需要加上deep
4. 看到一些文章说computed中不支持异步代码，实测一下，异步代码还是会执行的，但是如果给computed加上async 那么这个计算属性的值就是promise对象，因为async函数的返回值就是promise。在watch中则不会受到影响，因此不建议在computed中执行异步代码。

  computed: {
    total() {
      new Promise((resolve,reject)=>{
        setTimeout(() => {
          console.log(999)   // 这行代码会执行，异步代码会在计算属性中执行，只要变化都会执行
          resolve(33)
        }, 1000);
      })
      return JSON.stringify(this.obj)  // 会深度监听对象的变化
    },
    async num(){
      await new Promise((resolve,reject)=>{
        setTimeout(() => {
          resolve(33)
        }, 10000);
      })
      console.log(999)  // 等待10秒后，这行代码会执行
      return this.obj.age    // async修饰的函数返回值是一个promise对象。
    }
  },
  watch: {
    obj: {
      handler() {
        this.sum = this.obj.name + this.obj.age
      },
      immediate:true, // 立即执行
      deep:true   // 深度监听
    }
  }