一、computed和methods的区别

  1. computed有缓存，只要监听的数据没有变化，计算属性就不会重新运行，性能更优

  2. methods没有缓存，每次都会执行，一般是监听事件时使用

    二、computed和watch的区别

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

  • 如果一个值改变后需要处理的步骤比较多，使用watch
  • 如果一个值需要多个值算出来，使用computed
  1. computed首次加载就会执行，watch不会执行，如果需要第一次就需要将immediate改为true
  2. computed是深度监听，watch如果需要深度监听，需要加上deep
  3. 看到一些文章说computed中不支持异步代码，实测一下，异步代码还是会执行的，但是如果给computed加上async 那么这个计算属性的值就是promise对象，因为async函数的返回值就是promise。在watch中则不会受到影响，因此不建议在computed中执行异步代码。
    1. computed: {
    2.  total() {
    3.    new Promise((resolve,reject)=>{
    4.      setTimeout(() => {
    5.        console.log(999)   // 这行代码会执行，异步代码会在计算属性中执行，只要变化都会执行
    6.        resolve(33)
    7.      }, 1000);
    8.    })
    9.    return JSON.stringify(this.obj)  // 会深度监听对象的变化
    10.  },
    11.  async num(){
    12.    await new Promise((resolve,reject)=>{
    13.      setTimeout(() => {
    14.        resolve(33)
    15.      }, 10000);
    16.    })
    17.    console.log(999)  // 等待10秒后，这行代码会执行
    18.    return this.obj.age    // async修饰的函数返回值是一个promise对象。
    19.  }
    20. },
    21. watch: {
    22.  obj: {
    23.    handler() {
    24.      this.sum = this.obj.name + this.obj.age
    25.    },
    26.    immediate:true, // 立即执行
    27.    deep:true   // 深度监听
    28.  }
    29. }