Compute properties computed

data Inside is the attribute
The calculation of attributes is done with data Internal properties Calculated new properties .

Compute properties ： Initial reading and dependent data change reading .

Compute properties ：obj Is the object format ,get（） The return value is computed Internal obj The value of the object ;set（） Modify the dependency by passing in the value obj Value .

Complete writing ：（ object ：get、set）

 computed: {
    
        fullName: {
    
          get() {
     //  Read 
            return this.lastName + '-' + this.firstName;
          },
          set(value) {
     //  modify  --  Mostly used to present , There's no need to write set
            const arr = value.split('-');
            this.firstName = arr[1];
            this.lastName = arr[0];
          }
        }
      }

majority computed Properties are used to render , There's no need to write set;
determine Just to present You can use the abbreviated form ：
Abbreviation ：（ Function writing , The return value is the result ）

      computed: {
    
        fullName() {
    
          return this.lastName + '-' + this.firstName;
        }
      }

Listener attribute watch（ Also known as listening properties ）

In fact, it is the change of monitoring attributes , and computed Changes in weight measurement data dependencies
Results

@ event =“ Method ”

If the method is just a simple sentence, change :

<button @click="isHot = !isHot"> Weather switch </button>

But where there are two attribute changes ( Should be written in the method ):

      methods: {
    
        changeWeather() {
    
          this.isHot = !this.isHot;
        }
      },

Listener attribute (watch) Two ways of writing

Listening objects include data、computed Internal properties , When the listening object is modified, call handler（） function .
How to write it 1：
Callback function handler, The first position in the parameter list is the new value no matter what the name is , The second position is the old value

      watch: {
    
        isHot: {
    
          // immediate: true, //  The handler function is called upon initialization handler once 
          handler(newValue, oldValue) {
     //  Callback function , The first position in the parameter list is the new value no matter what the name is , The second position is the old value 
            console.log('isHot It was modified ', newValue, oldValue);
          }
        }
      }

immediate: true, // Call... When initializing handler once

How to write it 2：

	const vm = new Vue({
    });
    
    vm.$watch('isHot', {
    
      handler(newValue, oldValue) {
    
        console.log('isHot It was modified ', newValue, oldValue);
      }
    })

Deep monitoring ( use deep:true Monitor multi-level structure changes )

eg： Properties in objects

stay watch Use in :

deep：true

eg:

const vm = new Vue({
    
  el: '#root',
  data() {
    
    return {
    
      numbers: {
    // Multistage structure 
        a: 1,
      }
    }
  },
  methods: {
    
    changeWeather() {
    
      this.isHot = !this.isHot;
    }
  },
  
  watch: {
    
    numbers: {
    
      deep: true,// Deep monitoring 
      handler() {
    
        console.log('numbers Changed the ')
      }
    },
    
    'numbers.a': {
    
      handler() {
    
        console.log('numbers.a Changed the ');
      }
    }
  }

})

Short for listening properties

The calculation attribute is only getshi when , Abbreviation
The listening attribute is only used internally handler Function is applicable

      watch: {
    
        isHot(newValue, oldValue) {
    
          console.log('isHot It was modified ', newValue, oldValue);
        }
      },

The abbreviation is the same as computed identical , Are objects （ Embedded attribute method ） Change the form of to the form of a function ; The price of shorthand is that you can't add Initialize call immediate:true and Deep surveillance deep:true

The difference between computing and listening properties

Personal understanding ：
Calculating attributes is equivalent to using Vue Of n A result of an attribute , use Vue Instance proxy for .
The listening attribute and the modified attribute should be in Vue There are definitions in the instance

Silicon Valley ：
The listening property can enable asynchronous tasks （eg： use setTimeout Turn on Execute after one second delay handler function ）

Add ：
setTimeout () The method belongs to BOM Features provided
BOM It's the browser object model
Next section : Front end vue style