This is the 21st day of my participation in the August More Text Challenge

Lately, it is my honor to be addicted to you. I have downloaded a game I have not played for more than a year. I am addicted to the beautiful appearance of Tuta and Crystal Goddess, and I always forget to write articles at Shanghai Observatory

Understanding the VUE lifecycle

The life cycle refers to the process from creation to destruction of an instance:

  • beforeCreate()Executed between instance creation, data is not loaded
  • created()Can initialize data after instance creation and data loading,domExecute before rendering
  • beforeMount()virtualdomCreated to change the data one last time before rendering it
  • mounted()Page, data rendering complete, realdomMount the complete
  • beforeUpadate()Rerender before trigger
  • updated()The data has been changed,domAlso torenderDone, the change data falls into an endless loop
  • beforeDestory() 和 destoryed()The former is executed before destruction (the instance is still fully available), while the latter is executed after destruction

Component communication

Parent component communicates with child component: The child component uses the props property to bind data of the parent component to implement communication between the two components.

Child component to parent component: the parent component’s events are emitted in the child component via $emit

Data transfer between non-parent and sibling components:

// Create a new Vue instance as the central event
let event = new Vue();

// Listen on events
event.$on('eventName'.(val) = > {
    / /... do something
});

// Trigger the event
event.$emit('eventName'.'this is a message.')
Copy the code

Vue-router uses the difference between params and Query parameter passing

/ / pass
this.$router.push({path: './xxx'.params: {xx:xxx}})
this.$router.push({path: './xxx'.query: {xx:xxx}})

/ / receive
this.$route.params

this.$route.query
Copy the code
  • paramsIt’s part of the route. It has to be there.queryIs joining togetherurlParams (path, name); params (path, name); params (path, name)
  • paramsIf this parameter is not set, the page refresh or return parameter will be discarded.queryThere is no such problem

How to bind Class and Style dynamically?

Class

Class =”[class1, class2]” class=”{color: ripe, ripe, ripe, ripe, ripe, ripe, ripe, ripe}” color, fontSize: fontSize+’px’}”

Stlye

Style =”{color: activeColor, fontSize: fontSize + ‘px’}” style=” styleColor,styleSize]”

The difference between computed and Watch

Computed: : Computes attributes, relying on other attribute values, and computed values are cached. Only when the dependent attribute values change, the computed value will be recalculated the next time the computed value is obtained.

Watch: : Is more of an observation function, similar to the listening callback of some data. Whenever the monitored data changes, the callback will be executed and subsequent operations will be carried out.

Application scenario:

1. Use computed data when you need to do numerical calculations and rely on other data, because you can take advantage of the caching nature of computed data and avoid having to recalculate every time you get a value;

2. Use Watch when we need to perform asynchronous or expensive operations when data changes. Use the Watch option to allow us to perform asynchronous operations (accessing an API), limit how often we perform that operation, and set the intermediate state until we get the final result. These are all things you can’t do with computed properties.