Vue中computed和watch的总结

计算属性（computed）

我们需要对数据进行一些处理后再展示这个时候就可以用到computed。当然模板中也可以处理，但是可读性差，且不好维护。
如下： 对已知数组转换特定字符串

  <!-- <div id="app">{{arr.join('-')}}</div> --> // 模板中处理
  
  <div id="app">{{str}}</div> // 直接引用computed中的str
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3, 4, 5],
      },
      computed: {
        str() {
          return this.arr.join('-')
        }
      }
    })
  </script>

计算属性的getter和setter
一般的时候，我们都是用getter来读取数据，然后返回处理后的数据。
以下是setter的调用

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3, 4, 5],
      },
      computed: {
        str: {
          get() {
            return this.arr.join('-')
          },
          set(newValue) {
            let temp = newValue + 'abc'
            console.log(temp) // abc
          }
        }
      }
    })
    vm.str = '' // 触发 set()
  </script>

监听属性（watch）

当有某些数据需要随着某个数据变动而变动时，可以使用watch
watch的基本用法

const vm = new Vue({
  el: '#app',
  data: {
    name: '123',
  },
  watch: {
    name(newVal, oldVal) {
      console.log(newVal) // abc
      console.log(oldVal) // 123
    }
  },
  created() {
    this.name = 'abc'
  }
})

handler方法和immediate属性
watch第一次绑定的时候，不会执行监听函数。如果需要最初绑定值的时候也执行函数，则需要用到immediate属性。

const vm = new Vue({
  el: '#app',
  data: {
    name: '123',
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        console.log(newVal) // 123
        console.log(oldVal) // undefined
      },
      immediate: true
    }
  },
  created() {
    // this.name = 'abc'
  }
})

handler函数与计算属性中的get()函数一样基本使用情况下可以省略。
immediate:true表示立即先去执行handler方法。
deep深度监听
如果监听是第一个对象，当对象的属性改变时，会发现无法监听到。这个时候就需要deep属性对其深度监听

const vm = new Vue({
      el: '#app',
      data: {
        student: {
          name: 'xiaoA',
          age: 15
        },
      },
      watch: {
        student: {
          handler(newVal, oldVal) {
            console.log(newVal) // {name: 'xiaoA',age:18}
            console.log(oldVal) // {name: 'xiaoA',age:18}
          },
          deep: true,
        },
      },
      created() {
        this.student.age = 18 // 触发监听
      }

如果只是监听对象中某个属性，可以简写如下

  watch: {
    'student.age'(newVal, oldVal) {
      console.log(newVal) // 18
      console.log(oldVal) // 15
    },
  },

监听整个对象时候发现已经可以监听到对象属性值的变化，但是newVal与oldVal值是一致的。是因为他们的引用指向的是同一个地址。
优化如下

  computed: {
        tempAge() {
          return JSON.parse(JSON.stringify(this.student.age))
        }
      },
      watch: {
        tempAge: {
          handler(newVal, oldVal) {
            console.log(newVal) // 18
            console.log(oldVal) // 15
          },
          deep: true
        }
      },

总结

1，computed与watch都能实现相同的功能
2，computed支持缓存，可以避免多次无意义的重新计算，可提高性能
3，watch支持异步，computed不支持
4，使用场景：
computed是一个返回的数据受一个或多个数据影响（一对一或多对一）
watch是一个监听值改变时，处理其他数据 （一对多）
执行异步操作或开销较大的操作时使用watch