The difference between computed and watch

computed Through several data changes , To affect a data , Supports caching , Asynchronous is not supported
watch Monitor a data change , To affect multiple data . Caching is not supported , Asynchronous Support

// computed :
<template>
  <div>
    <p>{
   { reversedMessage }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      message: 'hello world',
      number: 1
    }
  },
  computed: {
    //  String inversion 
    reversedMessage () {
      return this.message.split('').reverse().join('') + this.number
    }
  }
}
</script>

//watch：
<template>
  <div>
    <p>{
   { this.number }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      number: 1
    }
  },
  created () {
    setTimeout(() => {
      this.number = 100
    }, 2000)
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

Compute properties computed：
1 Supports caching , Only dependent data changes , To recalculate
2 Asynchronous is not supported , When computed Invalid if there is an asynchronous operation inside , Can't monitor data changes
3 computed Property value will default to cache , Computational properties are cached based on their responsive dependencies , That is based on data Is declared in or passed by the parent component props The value obtained by calculating the data in
4 If an attribute is computed by another attribute , This property depends on other properties , It's a many to one or one to one , It's usually used computed
5 If computed Property property value is a function , So default will go get Method ; The return value of the function is the property value of the property ; stay computed Medium , All attributes have one get And a set Method , When data changes , call set Method
Listening properties watch：
1 Caching is not supported , Data change , The corresponding operation will be triggered directly ;
2 watch Asynchronous Support ,computed Asynchronous is not supported
3 The listening function takes two parameters , The first parameter is the latest value ; The second parameter is the value before input ;
4 When an attribute changes , The corresponding operation needs to be performed ; One to many ;
5 The listening data must be data Or passed from the parent component props Data in , When data changes , Trigger other operations , Function has two arguments ,
　　immediate： Component loading immediately triggers callback function execution ,
　　deep: Deep monitoring , In order to find changes in the internal value of an object , Complex types of data when using , For example, changes in the contents of objects in an array , Note that you don't need to listen for array changes . Be careful ：deep Unable to listen to array changes and object additions , Reference resources vue Array variation , Only when triggered in a responsive way will it be monitored .