current position:Home>Vue calculation attribute and monitoring attribute of the front end

Vue calculation attribute and monitoring attribute of the front end

2022-04-29 05:12:18A little rabbit who likes eating radishes

Compute properties computed

 Insert picture description here

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
 Insert picture description here
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 )
 Insert picture description here
 Insert picture description here

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

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446427.html

Random recommended