Handler: Method used to listen for properties of an array or object

Deep: deep listening. To detect changes in an object’s internal value, you can specify deep:true in the option argument. Note that you don’t need to do this to listen for changes in the array.

Immediate: Specifying immediate: true in the option argument triggers the callback immediately with the current value of the expression

Tips: Whenever the bet attribute changes (which can be detected), the handler function is executed; If you want to monitor specific property changes, such as pokerHistory changes, you can do an intermediate layer with computed property.

1 ordinary watch

Data () {return {frontPoints: 0}}, watch: {frontPoints(newValue, oldValue) {console.log(newValue)}}Copy the code

2 array watch

Data () {return {winChips: new Array(11).fill(0)}}, watch: {winChips: {handler(newValue, oldValue) {for (let I = 0; i < newValue.length; I ++) {if (oldValue[I]! = newValue[I]) {console.log(newValue)}}},}}Copy the code

3 Watch of the object

Data () {return {bet: {pokerState: 53, pokerHistory: 'local'}}}, watch: {bet: {handler(newValue, oldValue) {console.log(newValue)}, deep: true}}Copy the code

4 Watch [Active Computed] for object specific attributes

Data () {return {bet: {pokerState: 53, pokerHistory: 'local'}}}, computed: {pokerHistory() {return this.bet.pokerhistory}}, watch: {pokerHistory(newValue, oldValue) {console.log(newValue)}}Copy the code

The Computed:

  • It supports caching and recalculates only when the dependent data changes
  • Asynchronism is not supported. You cannot listen for changes in data when there is asynchronous operation in Computed
  • If the attribute value of a computed attribute is a function, the default get method is used, and the return value of the function is the attribute value of the attribute. In computed, attributes have a GET method and a set method, which are called when data changes.

To Watch:

  • It does not support caching, and when the data changes, it triggers the corresponding operation
  • Support asynchronous listening
  • The listening function takes two arguments, the first the most recent value and the second the previous value